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.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#008aab; -
$sb-color-blue-2#00a5c9; -
$sb-color-blue-3#43caea; -
$sb-color-blue-4#cdf2ff;
4.3.2 #Style.colors.brand Brand
-
$sb-color-blue-2#00a5c9; -
$sb-color-green-2#00c97e; -
$sb-color-yellow-2#ffb867; -
$sb-color-red-2#ed4a59;
4.3.3 #Style.colors.dark Dark
-
$sb-color-dark-1#23272a; -
$sb-color-dark-2#41474c; -
$sb-color-dark-3#59636b;
4.3.4 #Style.colors.dark-blue Dark blue
-
$sb-color-darkblue-1#11333b; -
$sb-color-darkblue-2#02566a;
4.3.5 #Style.colors.dark-red Dark red
-
$sb-color-darkred-1#5b1419; -
$sb-color-darkred-2#7d202b; -
$sb-color-darkred-3#972936;
4.3.6 #Style.colors.green Green
-
$sb-color-green-1#00a265; -
$sb-color-green-2#00c97e; -
$sb-color-green-3#52d7a5; -
$sb-color-green-4#a9ebd2;
4.3.7 #Style.colors.light Light
-
$sb-color-light-1#9cacba; -
$sb-color-light-2#bac8d3; -
$sb-color-light-3#c8d2da; -
$sb-color-light-4#eef3f7;
4.3.8 #Style.colors.mood-smilies Mood smilies colors
-
$sb-color-mood-background#ffd442; -
$sb-color-mood-heart-eyes#f4606e; -
$sb-color-mood-lines#594504;
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;
4.3.10 #Style.colors.red Red
-
$sb-color-red-1#bb2e3e; -
$sb-color-red-2#ed4a59; -
$sb-color-red-3#fc7b87; -
$sb-color-red-4#fcaab2;
4.3.11 #Style.colors.yellow Yellow
-
$sb-color-yellow-1#dea64b; -
$sb-color-yellow-2#ffb867; -
$sb-color-yellow-3#ffd99c; -
$sb-color-yellow-4#ffe1be;
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.links Links
Link elements <a>
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Markup
<a href="#">Visit this page.</a>4.4.3 #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.4 #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.5 #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>