Grid

xs: < 768px
sm: ≥768px
md: ≥1025px
lg: ≥1200px

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-1

col-*-2

col-*-2

col-*-2

col-*-3

col-*-3

col-*-4

col-*-4

col-*-4

col-*-5

col-*-7

col-*-6

col-*-6

col-*-4

col-*-8

col-*-9

col-*-10

col-*-11

col-*-12

col-*-10 col-*-offset-1

row has class: roc 

row has class: roc AND is-small

Text styling

class: text-left

text-left-xs

class: text-center

text-center-s
text-center-xs

class: text-right
text-right-ml
text-right-xs

class: text-justify 

class: text-nowrap

class: text-lowercase
UPPERCASE WORDS ARE DISPLAYED LOWERCASE

class: text-uppercase
lowercase words are displayed uppercase

class: text-capitalize
Indicates capitalized text: Capitalized Text

class: text-small
reduced font size

class: text-light
light text color

class: font-bold

H1 Headline



H2 Headline



H3 Headline



H4 Headline



H5 Headline


H6 Headline

h1 class: "h3 icon-user headline-with-icon"



h2 class:"h6 icon-headline icon-users"



h1 class:"headline-product-name-pdp"



class:"headline-product-name"

Text justify centered
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

roboto default



font-size-xxxs 10px

font-size-xxs 11px(screen-s: 10px)

font-size-xs 12px

font-size-s 14px

font-size-lead 16px

font-size-xxl 24px

font-size-mega 40px

font-size-mega-large 50px

roboto condensed



font-size-xxxs 10px

font-size-xxs 11px(screen-s: 10px)

font-size-xs 12px

font-size-s 14px

font-size-lead 16px

font-size-xxl 24px

font-size-mega 40px

font-size-mega-large 50px

roboto medium bold



font-size-xxxs 10px

font-size-xxs 11px(screen-s: 10px)

font-size-xs 12px

font-size-s 14px

font-size-lead 16px

font-size-xxl 24px

font-size-mega40px

font-size-mega-large50px

von der buddypage:

@buddyHeadlineSize: 55px;

//buddy button.font-size-xl: 20px

Helpers

class: pull-right (this is the second col in this row)

class: pull-left (this is the third col in this row)

.pull-right-lg
.pull-left-lg
.pull-right-sm
.pull-left-sm
.pull-right-xs

class: center-block

class: centered-xs

class: centered

separator-line

div class="separator-line separator-padding"

nur mobile: separator-line-xs
nur tablet: separator-line-sml
hr

hr mit class small-divider

Margins

.margin-*

.margin-*-top
.margin-*-right
.margin-*-left
.margin-*-bottom

.margin-xl-bottom-screen-sm  768px - 1025px
.margin-xl-bottom-screen-xs < 768px

xl: 30px
l: 15px
default: 10px
s: 5px

Visibilities

                      XS         SM       MD         LG

.visible-xs Visible Hidden Hidden Hidden

.visible-sm Hidden Visible Hidden Hidden

.visible-md Hidden Hidden Visible Hidden

.visible-lg Hidden Hidden Hidden Visible

.hidden-xs Hidden Visible Visible Visible

.hidden-sm Visible Hidden Visible Visible

.hidden-md Visible Visible Hidden Visible

.hidden-lg Visible Visible Visible Hidden

row has class: row-vertical-middle
contains 2 cols which will be vertical aligned

row has class: row-vertical-bottom
contains 2 cols which will be bottom aligned

Images

img-circle at the <img>: Shapes the image to a circle (not available in IE8)
please use a squarish format!

img-rounded: Adds rounded corners to an image (not available in IE8)
img-responsive: Makes an image responsive (will scale nicely to the parent element)

Icon Font

This need a manual update from http://app.fontastic.me/