Front end architecture utility CSS classes

Alignments

These alignments are using floats and sometimes you might need to reset the immediate following element, you can use the u-clearfix css class

[css classname=”u-padding-vertical”]
u-align-right
u-align-left
u-align-center

/* Responsive alignments */
palm | lap | lap-and-up | portable | desktop

ex.
u-palm-align-left
u-lap-and-up-align-center
u-portable-align-right

[/css]

Clearfix

Floated elements might drag the immediate content after them, use the u-clearfix class to reset this effect. Learn more about clearfix

[css classname=”u-padding-vertical”]
u-clearfix
[/css]
[html classname=”u-padding-vertical”]

<div class="u-align-left">….</div>

<div class="u-clearfix">….</div>

[/html]

Margins | Padding

Utility classes to put specific spacing values onto elements
As a rule of thumb try not to apply margin top to avoid css margin collapse, use padding top instead

[css classname=”u-padding-vertical”]
u-padding | u-margin

/* Size class construction */
-tiny | -small | -large | -huge | -none

/* Directional class construction */
-top | -right | -bottom | -left | -horizontal | -vertical

Application example:
u-padding (normal padding top-right-bottom-left)
u-padding-tiny (tiny padding top-right-bottom-left)
u-padding-left (normal padding left)
u-padding-left-none (reset padding left)
u-padding-horizontal (normal padding left-right)
u-padding-vertical-small (small padding top-bottom)
… and so on

u-margin (normal margin top-right-bottom-left)
u-margin-tiny (tiny margin top-right-bottom-left)
u-margin-left (normal margin left)
u-margin-left-none (reset margin left)
u-margin-horizontal (normal margin left-right)
u-margin-vertical-small (small margin top-bottom)
… and so on
[/css]

Background colors and manipulation

[css classname=”u-padding-vertical”]
u-background-color-one
u-background-color-two
u-background-color-three
u-background-color-four
u-background-color-five
u-background-color-six
u-background-light
u-background-dark
u-background-body

/* Transparent Backgrounds */
u-background-opaq-dark
u-background-opaq-light

/* Background Image Adjustments */
u-background-cover
u-background-contain
u-background-no-repeat

/* Background positioning */
u-background-pos-top-center
u-background-pos-top-right
u-background-pos-bottom-left
u-background-pos-bottom-center
u-background-pos-bottom-right
u-background-pos-center
[/css]

Text colors, size, weight

[css classname=”u-padding-vertical”]
u-text-color-invert (invert text color to body color – usually white)
u-text-color-light
u-text-color-primary
u-text-color-secondary
u-text-color-tertiary

/* Text Size */
u-text-small
u-text-large
u-text-huge
u-h1
u-h2
u-h3
u-h4
u-h5
u-h6

/* Text Alignments */
u-text-center
u-text-right
u-text-left

/* Text Shadow */
u-text-shadow

/* Font weight */
u-text-normal
u-text-thinner
u-text-thin
u-text-bold
u-text-bolder
[/css]

Shadows

[css classname=”u-padding-vertical”]
/* Stand alone shadows */
u-shadow-0
u-shadow-1
u-shadow-1-half
u-shadow-2
u-shadow-3
u-shadow-4
u-shadow-5
/* Card Object */
o-card (card effect)
o-card–hover (add hover effect to card)
[/css]

Hide elements

[css classname=”u-padding-vertical”]
u-hide

/* Responsive hide */
palm | lap | lap-and-up | portable | desktop

ex.
u-palm-hide
u-lap-and-up-hide
u-portable-hide

[/css]

Borders

[css classname=”u-padding-vertical”]
u-border
u-border-top
u-border-bottom
u-border-left
u-border-right
u-border-vertical
u-border-horizontal
[/css]

Table manipulation

[css classname=”u-padding-vertical”]
o-table–striped
o-table–rows
o-table–columns

o-table–fixed (`table-layout: fixed` forces all cells within a table to occupy the same width as each other)

/* Size variants (cell padding) */
o-table–tiny
o-table–small
o-table–large
o-table–huge
[/css]

Wrapper manipulation

[css classname=”u-padding-vertical”]
o-wrapper–slim (make wrapper width thinner)

/* Size variants column spacing */
o-wrapper–tiny
o-wrapper–small
o-wrapper–large
o-wrapper–huge
[/css]

Form manipulation

[css classname=”u-padding-vertical”]
u-form-input-full (make form input fields full width)
u-form-required (add styling to element – colored asterix)
[/css]
[html classname=”u-padding-vertical”]

<div class="u-form-input-full">

<form><label><span class="u-form-required"></span> Filed name</label><input name="your-name" type="text" /></form>

</div>

[/html]

Buttons

[css classname=”u-padding-vertical”]
/* define the button */
c-button

/* Colors */
c-button–primary
c-button–secondary
c-button–tertiary
c-button–negative
c-button–positive
c-button–neutral
c-button–white

/* Size variants */
c-button–small
c-button–large

/* Ghost buttons */
c-button–ghost

/* Alignments */
c-button–center
c-button–right

/* Aspect */
c-button–pill
c-button–full
[/css]