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
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 ...
Clearfix
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>
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
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
Background colors and manipulation
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
Text colors, size, weight
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
Shadows
/* 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)
Hide elements
u-hide /* Responsive hide */ palm | lap | lap-and-up | portable | desktop ex. u-palm-hide u-lap-and-up-hide u-portable-hide ...
Borders
u-border u-border-top u-border-bottom u-border-left u-border-right u-border-vertical u-border-horizontal
Table manipulation
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
Wrapper manipulation
o-wrapper--slim (make wrapper width thinner) /* Size variants column spacing */ o-wrapper--tiny o-wrapper--small o-wrapper--large o-wrapper--huge
Form manipulation
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>
Buttons
/* 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