<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>Aliquam congue pede a ipsum. Aenean quam mauris, vehicula non, suscipit at, venenatis sed arcu. Curabitur id est. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac ante. Ut magna. Sed convallis turpis a ante. Integer iaculis pharetra eros. Aliquam sit amet felis. Vestibulum tempor nisi rhoncus eros. Aenean.</p>
<h2>Heading 2</h2>
<p>Aenean consequat tempor mi. Aenean quam mauris, vehicula non, suscipit at, venenatis sed arcu. Integer iaculis pharetra eros. Cras pellentesque erat eu urna. Etiam congue. Suspendisse eu tortor. Suspendisse in nulla. Morbi blandit mollis magna. Etiam ornare fermentum felis. Morbi eu justo sed tortor euismod porttitor. Donec vitae felis.</p>
<h3>Heading 3</h3>
<p>Aliquam congue pede a ipsum. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac ante. Nunc fermentum convallis ligula. Morbi sit amet mi. Phasellus in neque. In vulputate. Nam ut sapien quis arcu ullamcorper cursus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dictum gravida libero. Etiam congue. Vivamus.</p>
<h4>Heading 4</h4>
<p>Phasellus in neque. Ut magna. Morbi blandit mollis magna. Maecenas nibh eros, dapibus at, pellentesque in, auctor a enim. Cras malesuada. Aenean consequat tempor mi. Donec ligula metus, placerat quis, blandit at, congue molestie ante. Nulla velit. Nunc eu ipsum tincidunt risus pellentesque fringilla. Aenean ut lacus. In vehicula.</p>
<h5>Heading 5</h5>
<p>Cras pellentesque erat eu urna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Etiam ornare fermentum felis. Suspendisse eu tortor. Sed iaculis ultricies tellus. Etiam congue. Sed eu turpis. Aenean consequat tempor mi. Donec risus risus, pretium ac, tincidunt eu, tempor eu quam.</p>
<h6>Heading 6</h6>
<p>Aliquam congue pede a ipsum. Ut a pede ac neque mattis facilisis. Nam ut sapien quis arcu ullamcorper cursus. Sed consectetuer sodales justo. Suspendisse eu tortor. Aenean quam mauris, vehicula non, suscipit at, venenatis sed arcu. Sed libero quam, sodales eget, venenatis non, cursus vel velit. Vivamus vitae risus.</p>

<blockquote>
<p>Sed eu turpis. Suspendisse in nulla. Curabitur id est. Vestibulum tempor nisi rhoncus eros. Morbi sit amet mi. Etiam congue. Nunc id lorem. Donec vitae felis nec ligula blandit.</p>
<p><cite>Lorem author</cite></p>
</blockquote>