Core CSS Cheat Sheet

Backgrounds

• background-white
• background-lightblue
• background-darkblue
• background-lightgray
• background-darkgray
• background-brandorange
• background-brandblue
• background-confirm
• background-info
• background-warning
• background-error
• background-gradient
• background-gradient-full

Borders

• border
• border-top | right | bottom | left
• border-vertical | horizontal
• border-solid | dotted
• border-<side>-solid | dotted
• border-lightblue
• border-darkblue
• border-lightgray
• border-darkgray
• border-confirm
• border-info
• border-warning
• border-error

Buttons

• button-lightblue
• button-darkblue
• button-orange
• button-transparent
• <state>-button-<color>
• disabled

Fonts

• font-headline
• font-global
• font-xs | s | m | l | xl | xxl
• font-line-s | standard | l
• font-normal
• font-bold
• font-italic
• font-strike
• font-uppercase
• font-capitalized
• font-ellipsis

Font Color

• font-regular
• font-light
• font-white
• font-confirm
• font-info
• font-warning
• font-error
• font-brandorange
• font-brandblue

Forms

• form
• form-theme-blue
• form-theme-white
• input-text
• select
• input-radio
• label-radio
• input-checkbox
• label-checkbox
• input-unit
• unit-icon
• error
• required

Grid

• grid
• gutter
• gutter-xs | s | m | l | xl
• gutter-top | right | bottom | left
• gutter-vertical | horizontal
• gutter-<side>-xs | s | m | l | xl
• grid-item
• push-<width>
• <state>-push-<width>

Helpers

• clearfix
• clearfix-before
• fineprint

Icons – Links

• icon-arrow
• icon-arrow-back
• icon-arrow-forward
• disabled

Icons – Freestyle

• fa
• fa-<icon-name>

See the official documentation at FontAwesome

Links – Touchable

• touch-area
• <state>-touch-area

Lists

• list-bullet
• list-check
• list-spacing
• list-spacing-xs | s | m | l | xl

Positioning

• block
• inline-block
• inline
• align-left | center | right
• align-top | middle | baseline | bottom
• float-left | right | none
• clear-left | right | none
• hide
• <state>-hide
• invisible
• overflow-hidden

Rounded Corners

• rounded
• rounded-top | right | bottom | left

Shadows

• shadow
• shadow-none

Spacing

• padding
• padding-xs | s | m | l | xl
• padding-top | right | bottom | left
• padding-vertical | horizontal
• padding-<side>-xs | s | m | l | xl
• margin
• margin-xs | s | m | l | xl
• margin-top | right | bottom | left
• margin-vertical | horizontal
• margin-<side>-xs | s | m | l | xl

States

• palm-
• lap-
• desk-

Status Messages

• status-message
• status-confirm
• status-info
• status-warning
• status-error

Widths

• one-whole
• one-half
• one-third, <n>-thirds
• one-fourth, <n>-fourths
• one-fifth, <n>-fifths
• one-sixth, <n>-sixths
• one-eighth, <n>-eighths
• one-tenth, <n>-tenths
• one-twelfth, <n>-twelfths