Core Framework v2.0.2 – Documentation

Core CSS Cheat Sheet

A selection of classes in the Core CSS framework, clustered by category.

  • Backgrounds

    • background
    • background-white
    • background-brandorange
    • background-brandblue
    • background-confirm
    • background-info
    • background-warning
    • background-error

  • Borders

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

  • Buttons

    • button-primary
    • button-secondary
    • button
    • <state>-button-<type>
    • disabled

  • Fonts

    • font-xs | s | m | l | xl | xxl | xxxl
    • font-line-s | standard
    • font-light | normal | semibold | bold
    • font-italic
    • font-strike
    • font-uppercase
    • font-capitalized
    • font-ellipsis

  • Font Color

    • font-regular
    • font-lightgray
    • font-white
    • font-brandorange
    • font-confirm
    • font-info
    • font-warning
    • font-error

  • Forms

    • form
    • form-theme-standard
    • 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 | xxl
    • 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 | xxl

  • 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
    • vertical-center-container
    • vertical-center

  • Shadows

    • shadow
    • shadow-none

  • Spacing

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

  • States

    • palm-
    • lap-
    • desk-

  • Status Messages

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

  • 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