<form class="w100">
	<fieldset>
		<legend>Simple form</legend>
		<p><label>Name <input type="text" class="w100" placeholder="name"></label></p>
		<p><label>Phone <input type="text" class="w100" placeholder="phone"></label></p>
		<p><label>Message <textarea class="w100" placeholder="message"></textarea></label></p>
		<p><label><input type="checkbox"> I agree with the rules</label></p>
		<p><button type="submit" class="i-check">Send</button> <button type="reset" class="i-undo bg-gray400 hover-bg-gray500">Reset</button></p>
	</fieldset>
</form>

<form class="w100">
	<p class="flex flex-vcenter mar20-b"><i class="i-user t-gray mar10-r"></i><input type="text" class="w100 light" placeholder="name"></p>
	<p class="flex flex-vcenter mar20-b"><i class="i-envelope-o t-gray mar10-r"></i><input type="text" class="w100 light" placeholder="email"></p>
	<p class="flex flex-vcenter mar20-b"><i class="i-phone t-gray mar10-r"></i><input type="text" class="w100 light" placeholder="phone"></p>
	<p class="flex mar20-b"><i class="i-pencil t-gray mar10-r pad7-t"></i><textarea class="w100 light" placeholder="message" rows="2"></textarea></p>
	<p class="t-right"><button type="submit" class="i-check pad50-rl">Send</button></p>
</form>

<span class="i-user icon-circle t200 bg-red t-white"></span> 
<span class="i-user icon-circle t150 bg-red t-white"></span> 
<span class="i-user icon-circle t110 bg-red t-white"></span>

<span class="i-plane icon-square t200 bg-blue t-white"></span> 
<span class="i-plane icon-square t150 bg-blue t-white"></span> 
<span class="i-plane icon-square t110 bg-blue t-white"></span>

<span class="i-ship icon-rounded t200 bg-green t-white"></span> 
<span class="i-ship icon-rounded t150 bg-green t-white"></span> 
<span class="i-ship icon-rounded t110 bg-green t-white"></span>

<div class="gr-gray400-100 pad20 t-center">.gr-gray400-100</div>
<div class="gr-gray100-400 pad20 t-center">.gr-gray100-400</div>

<button class="button">Simple button</button> 
<button class="button" disabled>Disabled button</button> 
<button class="button i-check">Button with icon</button> 
<button class="button bg-red t-red100 hover-bg-red600 hover-t-white">Custom button</button> 
<a class="button i-pencil bg-color1 t-white hover-bg-colorA1 hover-t-white" href="">Link button</a>

<a class="hover-no-underline pad10 t-white bg-color1 hover-t-white hover-bg-colorA1" href="#">color1</a> 
<a class="hover-no-underline pad10 t-white bg-color2 hover-t-white hover-bg-colorA2" href="#">color2</a> 
<a class="hover-no-underline pad10 t-white bg-color3 hover-t-white hover-bg-colorA3" href="#">color3</a> 
<a class="hover-no-underline pad10 t-white bg-color4 hover-t-white hover-bg-colorA4" href="#">color4</a> 
<a class="hover-no-underline pad10 t-white bg-color5 hover-t-white hover-bg-colorA5" href="#">color5</a>

<nav class="t-red links-no-color links-hover-t-blue">
Menu » 
<a href="#">Link1</a> / 
<a href="#">Link2</a> / 
<a href="#">Link3</a> 
<a class="hover-no-underline hover-t-green i-user b-inline b-right" href="#">Profile</a>
</nav>

<nav class="t-pink">
Menu » 
<a class="t-red hover-t-red600" href="#">red</a> / 
<a class="t-green hover-t-green600" href="#">green</a> / 
<a class="t-blue hover-t-blue600" href="#">blue</a>
</nav>

<div class="flex">
	<div class="w30 bordered pad20">30%</div>
	<div class="w30 bordered pad20">30%</div>
	<div class="w30 bordered pad20">30%</div>
</div>

<div class="flex flex-wrap">
	<div class="w20 w50-tablet w100-phone bordered pad20">20% 50% 100%</div>
	<div class="w20 w50-tablet w100-phone bordered pad20">20% 50% 100%</div>
	<div class="w55 w100-tablet w100-phone bordered pad20">55% 100% 100%</div>
</div>

<div class="flex t-center">
	<div class="w30 flex-order3 bordered pad20">1</div>
	<div class="w30 flex-order1 bordered pad20">2</div>
	<div class="w30 flex-order2 bordered pad20">3</div>
</div>

<div class="flex">
	<div class="w200px bordered pad20">200px</div>
	<div class="w10px"></div><!-- 10px -->
	<div class="flex-grow2 bordered pad20">grow 2</div>
	<div class="w5"></div><!-- 5% -->
	<div class="flex-grow3 bordered pad20">grow 3</div>
</div>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h1>Heading 1</h1>
<p>Nulla velit. Morbi sit amet mi. Quisque congue ultricies neque. Sed consectetuer sodales justo. Integer iaculis pharetra eros. In vehicula. Aenean quam mauris, vehicula non, suscipit at, venenatis sed arcu. Aenean consequat tempor mi. Phasellus in neque. Sed eu turpis. Etiam ornare fermentum felis. Aliquam dictum gravida libero. Aliquam.</p>
<h2>Heading 2</h2>
<p>Nullam a nisl. Phasellus in neque. Sed iaculis ultricies tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc fermentum convallis ligula. Nam ut sapien quis arcu ullamcorper cursus. Cras malesuada. Aenean ut lacus. Donec viverra nibh et dolor. Curabitur id est. Sed convallis.</p>
<h3>Heading 3</h3>
<p>Cras pellentesque erat eu urna. Suspendisse eu tortor. Aliquam congue pede a ipsum. Integer iaculis pharetra eros. Sed eu turpis. Vestibulum tempor nisi rhoncus eros. Sed iaculis ultricies tellus. Sed consectetuer sodales justo. Aliquam sit amet felis. Nunc fermentum convallis ligula. Morbi eu justo sed tortor euismod porttitor. Nullam.</p>
<h4>Heading 4</h4>
<p>Sed iaculis ultricies tellus. Donec viverra nibh et dolor. Suspendisse in nulla. Ut magna. Sed convallis turpis a ante. Aliquam dictum gravida libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi eu justo sed tortor euismod porttitor. Cras pellentesque erat eu urna. Morbi.</p>
<h5>Heading 5</h5>
<p>Aliquam sit amet felis. Quisque congue ultricies neque. Aliquam dictum gravida libero. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac ante. Aliquam congue pede a ipsum. Sed eu turpis. Suspendisse eu tortor. Ut magna. Donec vitae felis nec ligula blandit rhoncus. Etiam congue. Aenean consequat tempor mi. Donec.</p>
<h6>Heading 6</h6>
<p>Morbi eu justo sed tortor euismod porttitor. Suspendisse in nulla. Vivamus vitae risus vitae lorem iaculis placerat. Cras malesuada. Sed consectetuer sodales justo. Donec vitae felis nec ligula blandit rhoncus. Nunc fermentum convallis ligula. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac ante. Ut magna. In vehicula. Curabitur.</p>

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam a nisl. Morbi sit amet mi. Vivamus vitae risus vitae lorem iaculis placerat. Aenean consequat tempor mi. Cras pellentesque erat eu.</p>
<p><cite>Lorem author</cite></p>
</blockquote>