Front end architecture utility CSS classes

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

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
...

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

u-clearfix

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


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

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

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

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

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

/* 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)

u-hide

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

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

u-border
u-border-top
u-border-bottom
u-border-left
u-border-right
u-border-vertical
u-border-horizontal

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

o-wrapper--slim (make wrapper width thinner)

/* Size variants column spacing */
o-wrapper--tiny
o-wrapper--small
o-wrapper--large
o-wrapper--huge

u-form-input-full (make form input fields full width)
u-form-required (add styling to element - colored asterix)

<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>

/* 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