UI library

Code smells in CSS

Do not use

Plain tag name selectors 'DIV,HEADER': Too far reaching.

Qualified selecttors: 'A.button': Too specifig, prevent reuse.

ID in CSS: Allows only one instance. More specific than class.

Magic numbers: Value that is used "just because it works" in current situation.

Fixed line heights: Always relative to font size line-height: 1.333;

BEM naming convention

Block. Element. Modifier. Convention to make everything modular.

Element	Description
block-name	Component: Module that has a certain purpose
bolck-name--modifier	Variation: Modifies componenet in some way.
block-name__element	Nested element: Componenet consists of
block.is-state	State: State of component is modified by user

Namespaces

Prefix	Name	Description
o-	Object	May be used in any number of unrelated contexts.
c-	Component	Specifig piece of UI.
u-	Utility	Provide only one declaration. Should not be bind to.
t-	Theme	Adds cosmetic appearance.
s-	Scope	New styling context. Similar to theme.
is-	State	State or conditions.
has-	State	State or conditions.
_	Hack	Temporary hack to make something work. Do not reuse or bind onto.
js-	Javascript	Used to bind js actions.
qa-	Test	Used for automated test hooks.

State examples	Description
is-active	Element is currently active
is-inactive	Is not acitve (hakuehto off)
is-expanded	Is expanded
is-editable	Editmode is on.
is-initial	Element is in start state; not yet initialized (render onces)
is-clickable	Makes element to change text/border/bg color on hover.
is-hidden	Element is hidden
is-hidden-print	Element is hidden
is-hidden-xs	Hidden in extra small screen
is-hidden-sm	Hidden in small screen
is-hidden-md	Hidden in medium screen
is-hidden-lg	Hidden in large screen
is-hidden-phone	Alias to is-hidden-xs
is-hidden-tablet	Alias to is-hidden-sm
is-hidden-laptop	Alias to is-hidden-md
is-hidden-desktop	Alias to is-hidden-ls
is-hidden	Element is hidden
is-hidden	Element is hidden
is-hidden	Element is hidden

Position
in-page-header | Style when inside page header

eKansio CSS styles

Layout Z-Index

Elementti	Taso	Selite
tooltip	100	Musta laatikko, joka aukeaa sisällön päälle
ModalPanel	50	Paneeli -ikkuna.
popupDIV	30	Päivävalinta jne. @deprecated -> panel
panel	21
search	16	Palkissa olevan pikahaun hakutulokset
header	15	Sivun yläeunassa oleva valikko
sivunapit	13	Sivun tulukon nappi- ym. tietojen kopiointi, kun otsikko jää piiloon
valikko	10	Lomakkeella olevat valikot

CSS Styles

Text, Background and borders

Name	Description
text-:color	Add text color.
bg-:color	Add background color.
border	Add border to element
border-:color	Set border color

Alignment

Name	Description
align-left	Text align left
align-center	Text align center
align-right	Text align right
float-left	Float element left
float-right	Float element right

Presentation

Name	Description
no-padding	Reset all paddings
no-wrap	Prevent line breaks
hide	Display: none

Shape

Name	Description
radius	Add radius to all corners.
radius-left	Add radius to left corners.
radius-right	Add radius to right corners.
radius-top	Add radius to top corners.
radius-bottom	Add radius to bottom corners.
round	Make all corners round.
round-left	Make left corners round.
round-right	Make right corners round.
round-top	Make top corners round.
round-bottom	Make bottom corners round.
sharp	Make all corners sharp.
sharp-left	Make left corners sharp.
sharp-right	Make right corners sharp.
sharp-top	Make top corners sharp.
sharp-bottom	Make bottom corners sharp.

UI Elements

Table

Name	Description
table	Default table: TH gray background, lined
table-:size	Sizes: large, normal, small, mini
table-:color	Caption, TH, background and borders in given color.
table-lined	Row bottom borders.
table-bordered	All borders.
table-borderless	No bordres.
table-backgrounded	TH backgrounds.
table-backgroundless	No backgrounds to TH.
table-hover	Row over -effect.

Box

Name	Description
box	Bordered box.
box-:size	Sizes: large, normal, small, mini

Alert

Name	Description
alert	Alert -box. Default: Yellow.
alert-:color	Set color to box.
alert-:size	Sizes: large, normal, small, mini

Placeholder

Name	Description
placeholder	Empty content to be replaced with something. For example: Add new row.

Navigation pills

Name	Description
UL.nav-pills	Navigation pills.
UL.nav-pills LI.active	Active pill.
UL.nav-pills LI.:color	Pill color.