4.1 #Style.background Background
Utility classes that can be used to give a background color to any element.
Any colors from the styleguide can be applied.
Browser support: IE3+, Safari1+, Firefox1+, Chrome10+
Markup
<span class="sb-padding sb-flex [modifier class]">Text</span>4.2 #Style.border Border
Utility classes that can be used to give a border color to any element.
Any colors from the styleguide can be applied.
Browser support: IE3+, Safari1+, Firefox1+, Chrome10+
Markup
<span class="sb-padding-xs [modifier class]">Text</span>4.2.1 #Style.border.oneSide One side border
The border can applied only in one side of your element.
The available directions are top, bottom, left, right,
Browser support: IE3+, Safari1+, Firefox1+, Chrome10+
Markup
<span class="sb-margin sb-padding-xs sb-border-bottom-blue-1">
.sb-border-bottom-black
</span>
<span class="sb-margin sb-padding-xs sb-border-left-yellow-1">
.sb-border-left-yellow-1
</span>
<span class="sb-margin sb-padding-xs sb-border-top-green-3">
.sb-border-top-green-3
</span>
<span class="sb-margin sb-padding-xs sb-border-right-black">
.sb-border-right-black
</span>4.2.2 #Style.border.radius Border radius
Various border radius are available by level number: m, l,
Browser support: IE3+, Safari1+, Firefox1+, Chrome10+
Markup
<span class="sb-padding-xs sb-border-black [modifier class]">Text</span>4.2.3 #Style.border.widths Border widths
Various border widths are available by level number: top, bottom, left, right,
Browser support: IE3+, Safari1+, Firefox1+, Chrome10+
Markup
<span class="sb-padding-xs sb-border-black [modifier class]">Text</span>4.3 #Style.colors Colors
All colors are used as variables and exported as stand alone classes.
4.3.1 #Style.colors.blue Blue
-
$sb-color-blue-1#66c3d8; -
$sb-color-blue-2#98cfd8; -
$sb-color-blue-3#c3dee5; -
$sb-color-blue-4#dfecef;
4.3.2 #Style.colors.brand Brand
-
$sb-color-green-2#258060; -
$sb-color-dark-2#31353f; -
$sb-color-yellow-2#ffb100; -
$sb-color-red-2#c43e3e;
4.3.3 #Style.colors.dark Dark
-
$sb-color-dark-1#0f1013; -
$sb-color-dark-2#31353f; -
$sb-color-dark-3#555b6e;
4.3.4 #Style.colors.dark-blue Dark blue
-
$sb-color-darkblue-1#1c839b; -
$sb-color-darkblue-2#34b2d5;
4.3.5 #Style.colors.dark-red Dark red
-
$sb-color-darkred-1#912620; -
$sb-color-darkred-2#ae2121; -
$sb-color-darkred-3#c43e3e;
4.3.6 #Style.colors.green Green
-
$sb-color-green-1#11593d; -
$sb-color-green-2#258060; -
$sb-color-green-3#3ca07a; -
$sb-color-green-4#9ac2b4; -
$sb-color-green-4a#c7e0d6; -
$sb-color-green-4b#daeae4;
4.3.7 #Style.colors.light Light
-
$sb-color-light-1#b8bbc6; -
$sb-color-light-2#cacdd5; -
$sb-color-light-3#d7d9df; -
$sb-color-light-4#eaebee; -
$sb-color-light-4a#f3f3f5; -
$sb-color-light-4b#f9f9fa;
4.3.8 #Style.colors.mood-smilies Mood smilies colors
-
$sb-color-mood-background#fdc864; -
$sb-color-mood-background-light#d7d9df -
$sb-color-mood-heart-eyes#ae2121; -
$sb-color-mood-mouth#ae2121; -
$sb-color-mood-lines#0f1013; -
$sb-color-mood-outline#555b6e;
4.3.9 #Style.colors.purple Purple
-
$sb-color-purple-1#860479; -
$sb-color-purple-2#b306a2; -
$sb-color-purple-3#b34da8; -
$sb-color-purple-4#f7cff3; -
$sb-color-purple-5#8874db; -
$sb-color-purple-6#e8e5f7;
4.3.10 #Style.colors.raspberry Raspberry
-
$sb-color-raspberry-1#842a4d; -
$sb-color-raspberry-2#a13d60; -
$sb-color-raspberry-3#bc6285; -
$sb-color-raspberry-4#dda9be; -
$sb-color-raspberry-5#dcc9d0; -
$sb-color-raspberry-6#f4e6eb;
4.3.11 #Style.colors.red Red
-
$sb-color-red-1#d85757; -
$sb-color-red-2#eb7d7d; -
$sb-color-red-3#eda2a2; -
$sb-color-red-4#f2d5d5;
4.3.12 #Style.colors.yellow Yellow
-
$sb-color-yellow-1#e19625; -
$sb-color-yellow-2#ffb100; -
$sb-color-yellow-3#fdc864; -
$sb-color-yellow-4#f8daa3; -
$sb-color-yellow-4a#ffefcc; -
$sb-color-yellow-4b#fff7e5;
4.4.1 #Style.typography.headings Headings
Heading elements <h1> <h6>. All heading elements have their default margins set to 0.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Markup
<h1>The quick brown fox jumps over the lazy dog</h1>
<h2>The quick brown fox jumps over the lazy dog</h2>
<h3>The quick brown fox jumps over the lazy dog</h3>
<h4>The quick brown fox jumps over the lazy dog</h4>
<h5>The quick brown fox jumps over the lazy dog</h5>
<h6>The quick brown fox jumps over the lazy dog</h6>4.4.2 #Style.typography.headingsGFB Headings GFB
Heading elements <h1> <h6>. All heading elements have their default margins set to 0.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Subtitle - 1 The quick brown fox jumps over the lazy dog
Subtitle - 2 The quick brown fox jumps over the lazy dog
Overline - The quick brown fox jumps over the lazy dog
Caption - The quick brown fox jumps over the lazy dog
Body1 - The quick brown fox jumps over the lazy dog
Body2 - The quick brown fox jumps over the lazy dog
Markup
<h1 class="sb-text-h1">The quick brown fox jumps over the lazy dog</h1>
<h2 class="sb-text-h2">The quick brown fox jumps over the lazy dog</h2>
<h3 class="sb-text-h3">The quick brown fox jumps over the lazy dog</h3>
<h4 class="sb-text-h4">The quick brown fox jumps over the lazy dog</h4>
<h5 class="sb-text-h5>The quick brown fox jumps over the lazy dog</h5>
<h6 class="sb-text-h6The quick brown fox jumps over the lazy dog</h5>
<h5 class="sb-text-subtitle-1">Subtitle - 1 The quick brown fox jumps over the lazy dog</h5>
<h6 class="sb-text-subtitle-2">Subtitle - 2 The quick brown fox jumps over the lazy dog</h6>
<p class="sb-text-overline">Overline - The quick brown fox jumps over the lazy dog</p>
<p class="sb-text-caption">Caption - The quick brown fox jumps over the lazy dog</p>
<p class="sb-text-body-1">Body1 - The quick brown fox jumps over the lazy dog</p>
<p class="sb-text-body-2">Body2 - The quick brown fox jumps over the lazy dog</p>4.4.3 #Style.typography.links Links
Link elements <a>
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Markup
<a href="#">Visit this page.</a>4.4.4 #Style.typography.paragraphs Paragraphs
Paragraph elements <p>. All paragraph elements have their default margins set to 0.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
The quick brown fox jumps over the lazy dog
Markup
<p>The quick brown fox jumps over the lazy dog</p>4.4.5 #Style.typography.text Text Classes
The text classes to format the text of any html element.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
The quick brown fox jumps over the lazy dog 0123456789
Markup
<p class="[modifier class]">The quick brown fox jumps over the lazy dog 0123456789</p>4.4.6 #Style.typography.text-colors Text colors
Utility classes that can be used to give a color to some text.
Any colors from the styleguide can be applied.
Browser support: IE3+, Safari1+, Firefox1+, Chrome10+
Markup
<span class="[modifier class]">Text</span>