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-xsclass: text-center
text-center-stext-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-left-lg
.pull-right-sm
.pull-left-sm
.pull-right-xs
class: center-block
class: centered-xs
class: centered
div class="separator-line separator-padding"
nur tablet: separator-line-sml
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: 30pxl: 15pxdefault: 10pxs: 5pxVisibilities
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/
Land | Sprache