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]