Pattern Lab

Colors

#bc1239
#ffffff
#000000
#222222
#ad7f2a
#9b7226
#272727
#363636
#5a5a5a
#898989
#a8a8a8
#adadad
#d45fb7

HTML

									
										<ul class="sg-colors">
	<li>
		<span class="sg-swatch" style="background: #bc1239;"></span>
		<span class="sg-label">#bc1239</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #ffffff;"></span>
		<span class="sg-label">#ffffff</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #000000;"></span>
		<span class="sg-label">#000000</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #222222;"></span>
		<span class="sg-label">#222222</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #ad7f2a;"></span>
		<span class="sg-label">#ad7f2a</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #9b7226;"></span>
		<span class="sg-label">#9b7226</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #272727;"></span>
		<span class="sg-label">#272727</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #363636;"></span>
		<span class="sg-label">#363636</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #5a5a5a;"></span>
		<span class="sg-label">#5a5a5a</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #898989;"></span>
		<span class="sg-label">#898989</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #a8a8a8;"></span>
		<span class="sg-label">#a8a8a8</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #adadad;"></span>
		<span class="sg-label">#adadad</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #d45fb7;"></span>
		<span class="sg-label">#d45fb7</span>
	</li>
	
</ul>

Fonts

Adelle: "adelle", Georgia, Arial, sans-serif

Adelle Italic: "adelle", Georgia, Arial, sans-serif

Adelle bold: "adelle", Georgia, Arial, sans-serif

Adelle bold+italic: "adelle", Georgia, Arial, sans-serif

Adelle Light: "adelle", Georgia, Arial, sans-serif

Adelle Light Italic: "adelle", Georgia, Arial, sans-serif

Tablet Gothic: "tablet-gothic", Arial, sans-serif;

Tablet Gothic Bold: "tablet-gothic", Arial, sans-serif

Tablet Gothic Compressed: "tablet-gothic-compressed", Arial, sans-serif

Tablet Gothic Compressed Semi-Bold: "tablet-gothic-compressed", Arial, sans-serif

HTML

									
										<p>Adelle: "adelle", Georgia, Arial, sans-serif</p>
<p><em>Adelle Italic: "adelle", Georgia, Arial, sans-serif</em></p>
<p><strong>Adelle bold: "adelle", Georgia, Arial, sans-serif</strong></p>
<p><em><strong>Adelle bold+italic: "adelle", Georgia, Arial, sans-serif</strong></em></p>

<p class="adelle-light">Adelle Light: "adelle", Georgia, Arial, sans-serif</p>
<p class="adelle-light"><em>Adelle Light Italic: "adelle", Georgia, Arial, sans-serif</em></p>

<p class="tablet-gothic">Tablet Gothic: "tablet-gothic", Arial, sans-serif;</p>
<p class="tablet-gothic"><strong>Tablet Gothic Bold: "tablet-gothic", Arial, sans-serif</strong></p>

<p class="tablet-gothic-comp">Tablet Gothic Compressed: "tablet-gothic-compressed", Arial, sans-serif</p>
<p class="tablet-gothic-comp"><strong>Tablet Gothic Compressed Semi-Bold: "tablet-gothic-compressed", Arial, sans-serif</strong></p>

Animations

Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)

Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)

HTML

									
										<div class="demo-animate animate-fade"><strong>Fade:</strong> Duration: 0.3s Easing: ease-out (Hover to see effect)</div>

<div class="demo-animate animate-move"><div class="demo-shape"></div><strong>Movement:</strong> Duration: 0.8s  Easing: ease-in-out; (Hover to see effect)</div>

Visibility

This text is hidden on smaller screens

This text is only visible on smaller screens

This text is hidden on medium screens only

This text is only visible on medium screens

This text is hidden on large screens

This text is only visible on large screens

HTML

									
										<p class="hide-small">This text is hidden on smaller screens</p>

<p class="hide-med hide-large"><em>This text is only visible on smaller screens</em></p>

<p class="hide-med">This text is hidden on medium screens only</p>

<p class="hide-small hide-large"><em>This text is only visible on medium screens</em></p>

<p class="hide-large">This text is hidden on large screens</p>

<p class="hide-small hide-med"><em>This text is only visible on large screens</em></p>