<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/elrumordelaluz/pen/pBDJK?depth=everything&order=popularity&page=54&q=chat&show_forks=false" />
<link rel='stylesheet prefetch' href='https://elrumordelaluz.github.io/newbancomail/css/bm.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css'><link rel='stylesheet prefetch' href='https://elrumordelaluz.github.io/newbancomail/css/demo.css'>
<style class="cp-pen-styles">@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
i {
font-style: normal;
}
.btn-download:before, .custom-select:after {
content: '﹀';
}
.form-status:after {
content: 'X';
font-family: 'Arial';
}
.faq-question:after {
content: '?';
font-family: Arial;
}
.faq-answer label:before {
content: '+';
font-family: Arial;
}
.faq-answer input[type="checkbox"]:checked + label:before {
content: '-';
}
#mobile-alert {
display: none;
}
@media (max-width: 979px) {
#mobile-alert {
display: block;
}
}
</style></head><body>
<div class="demo-container">
<nav class="demo-nav">
<ul>
<li><a href="#intro" title="Intro"><i>In</i> Intro</a></li>
<li><a href="#p" title="Paragraphs"><i>P</i> Paragraphs</a></li>
<li><a href="#headings" title="Headings"><i>H</i> Headings</a></li>
<li><a href="#grids" title="Grids"><i>Gr</i> Grids</a></li>
<li><a href="#buttons" title="Buttons"><i>Btn</i> Buttons</a></li>
<li><a href="#forms" title="Forms"><i>Frm</i> Forms</a></li>
<li><a href="#posts" title="Posts stuff"><i>Pst</i> Posts stuff</a></li>
<li><a href="#tables" title="Tables"><i>Tbl</i> Tables</a></li>
<li><a href="#media" title="Media elems"><i>M</i> Media elems</a></li>
<li><a href="#slider" title="Photo slider"><i>Ph</i> Photo slider</a></li>
<li><a href="https://elrumordelaluz.github.io/newbancomail/svg.html" title="SVG Icons"><i>Svg</i> SVG Icons</a></li>
<li><a href="#misc" title="More stuff"><i>+</i> More stuff</a></li>
<li><a href="#colors" title="Colors variables"><i>Col</i> Colors vars</a></li>
<li class="active"><a href="#download" title="Download"><i>↧</i> Download</a></li>
</ul>
</nav>
<div class="demo-content">
<div class="wrapper">
<div class="fluid mtop20" id="intro">
<div class="grid8 offset2 center">
<i class="svg svg-bm svg-xxsmall"></i>
</div>
</div>
<div class="fluid">
<div class="grid8 offset2">
<h3 class="center mtop10">NewBancomail Pattern library<span>or something like this</span></h3>
<hr>
<p class="center"><a class="btn btn-small btn-green" href="https://github.com/elrumordelaluz/newbancomail"><i>⥅</i> Fork on Github</a></p>
</div>
</div>
<h2 class="center mtop100" id="p"><a href="#p">Paragraphs</a></h2>
<div class="fluid">
<div class="grid6">
<h4>Paragraph <span>normal</span></h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum aspernatur quidem, maiores, ducimus atque odit explicabo expedita dolorum dignissimos illum beatae mollitia recusandae, repellendus id perspiciatis ut, tempora in aperiam.</p>
</div>
<div class="grid6">
<pre class=" language-markup">
<code class="language-markup"><p>Lorem ipsum dolor sit amet...</p></code>
</pre>
</div>
</div> <!-- /p:normal -->
<div class="fluid">
<div class="grid6">
<h4>Paragraph <span>small</span></h4>
<hr>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum aspernatur quidem, maiores, ducimus atque odit explicabo expedita dolorum dignissimos illum beatae mollitia recusandae, repellendus id perspiciatis ut, tempora in aperiam.</p>
</div>
<div class="grid6">
<pre class=" language-markup">
<code class="language-markup"><p class="small">Lorem ipsum dolor...</p></code>
</pre>
</div>
</div> <!-- /p:small -->
<div class="fluid">
<div class="grid6">
<h4>Paragraph <span>read</span></h4>
<hr>
<div class="read">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum aspernatur quidem, maiores, ducimus atque odit explicabo expedita dolorum dignissimos illum beatae mollitia recusandae, repellendus id perspiciatis ut, tempora in aperiam.</p>
</div>
</div>
<div class="grid6">
<pre class=" language-markup">
<code class="language-markup"><div class="read">
<p>
Lorem ipsum dolor...
</p>
</div></code>
</pre>
</div>
</div> <!-- /p:read -->
<div class="fluid">
<div class="grid6" id="more-text">
<h4>More text <span>stuff</span></h4>
<hr>
<p>Lorem <strong>strong ipsum</strong> dolor sit amet, <span class="text-red">consectetur</span> adipisicing elit. Earum aspernatur quidem, maiores, <strong class="text-green">ducimus atque</strong> odit explicabo <span class="underlined">expedita</span> dolorum <span class="underlined">dignissimos</span> illum beatae mollitia recusandae, repellendus id perspiciatis ut, tempora in aperiam.</p>
<div class="read">
<p>Lorem ipsum dolor sit amet, <span class="underlined">consectetur adipisicing eliq</span>. Repellat minima quibusdam molestias cum <strong class="italic text-blue">laborum</strong> quis praesentium <small>iusto</small> quidem incidunt <a href="" onclick="return false;">earqm</a>.</p>
</div>
</div>
<div class="grid6">
<pre class=" language-markup">
<code class="language-markup"><p>
Lorem
<strong>strong ipsum</strong> dolor sit amet,
<span class="text-red">consectetur</span> adipisicing elit. Earum aspernatur quidem, maiores,
<strong class="text-green">ducimus atque</strong> odit explicabo
<span class="underlined">expedita</span> dolorum
<span class="underlined">dignissimos</span> illum beatae mollitia recusandae, repellendus id perspiciatis ut, tempora in aperiam.
</p>
<div class="read">
<p>
Lorem ipsum dolor sit amet,
<span class="underlined">consectetur adipisicing eliq</span>. Repellat minima quibusdam molestias cum
<strong class="italic text-blue">laborum</strong> quis praesentium
<small>iusto</small> quidem incidunt <a href="">earum</span>.
</p>
</div></code>
</pre>
</div>
</div> <!-- /p:read -->
<h2 class="center mtop100" id="headings"><a href="#headings">Headings</a></h2>
<div class="fluid">
<div class="grid6">
<h1>Heading h1<span>span</span></h1>
</div>
<div class="grid6">
<pre class=" language-markup">
<code class="language-markup"><h1>Heading h1<span>span</span></h1></code>
</pre>
</div>
</div> <!-- /h1 -->
<div class="fluid">
<div class="grid6">
<h2>Heading h2<span>span subtitle</span></h2>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><h2>Heading h2<span>span subtitle</span></h2></code>
</pre>
</div>
</div> <!-- /h2 -->
<div class="fluid">
<div class="grid6">
<h3>Heading h3<span>span subtitle</span></h3>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><h3>Heading h3<span>span subtitle</span></h3></code>
</pre>
</div>
</div> <!-- /h3 -->
<div class="fluid">
<div class="grid6">
<h4>Heading h4<span>span subtitle</span></h4>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><h4>Heading h4<span>span subtitle</span></h4></code>
</pre>
</div>
</div> <!-- /h4 -->
<h2 class="center mtop100" id="grids"><a href="#grids">Grids</a></h2>
<div class="alert alert-yellow" id="mobile-alert">Your window is less than 979px, try to enlarge to appreciate more grid</div>
<div class="fluid mtop20">
<div class="grid12">
<div class="alert-light-grey center"><p class="small">.grid12</p></div>
</div>
</div>
<div class="fluid">
<div class="grid6">
<div class="alert-light-grey center"><p class="small">.grid6</p></div>
</div>
<div class="grid6">
<div class="alert-light-grey center"><p class="small">.grid6</p></div>
</div>
</div>
<div class="fluid">
<div class="grid4">
<div class="alert-light-grey center"><p class="small">.grid4</p></div>
</div>
<div class="grid4">
<div class="alert-light-grey center"><p class="small">.grid4</p></div>
</div>
<div class="grid4">
<div class="alert-light-grey center"><p class="small">.grid4</p></div>
</div>
</div>
<div class="fluid">
<div class="grid3">
<div class="alert-light-grey center"><p class="small">.grid3</p></div>
</div>
<div class="grid3">
<div class="alert-light-grey center"><p class="small">.grid3</p></div>
</div>
<div class="grid3">
<div class="alert-light-grey center"><p class="small">.grid3</p></div>
</div>
<div class="grid3">
<div class="alert-light-grey center"><p class="small">.grid3</p></div>
</div>
</div>
<div class="fluid">
<div class="grid2">
<div class="alert-light-grey center"><p class="small">.grid2</p></div>
</div>
<div class="grid2">
<div class="alert-light-grey center"><p class="small">.grid2</p></div>
</div>
<div class="grid2">
<div class="alert-light-grey center"><p class="small">.grid2</p></div>
</div>
<div class="grid2">
<div class="alert-light-grey center"><p class="small">.grid2</p></div>
</div>
<div class="grid2">
<div class="alert-light-grey center"><p class="small">.grid2</p></div>
</div>
<div class="grid2">
<div class="alert-light-grey center"><p class="small">.grid2</p></div>
</div>
</div>
<div class="fluid">
<div class="grid1">
<div class="alert-light-grey center"><p class="small">.grid1</p></div>
</div>
<div class="grid1">
<div class="alert-light-grey center"><p class="small">.grid1</p></div>
</div>
<div class="grid1">
<div class="alert-light-grey center"><p class="small">.grid1</p></div>
</div>
<div class="grid1">
<div class="alert-light-grey center"><p class="small">.grid1</p></div>
</div>
<div class="grid1">
<div class="alert-light-grey center"><p class="small">.grid1</p></div>
</div>
<div class="grid1">
<div class="alert-light-grey center"><p class="small">.grid1</p></div>
</div>
<div class="grid1">
<div class="alert-light-grey center"><p class="small">.grid1</p></div>
</div>
<div class="grid1">
<div class="alert-light-grey center"><p class="small">.grid1</p></div>
</div>
<div class="grid1">
<div class="alert-light-grey center"><p class="small">.grid1</p></div>
</div>
<div class="grid1">
<div class="alert-light-grey center"><p class="small">.grid1</p></div>
</div>
<div class="grid1">
<div class="alert-light-grey center"><p class="small">.grid1</p></div>
</div>
<div class="grid1">
<div class="alert-light-grey center"><p class="small">.grid1</p></div>
</div>
</div>
<div class="fluid">
<div class="grid7">
<div class="alert-light-grey center"><p class="small">.grid7</p></div>
</div>
<div class="grid5">
<div class="alert-light-grey center"><p class="small">.grid5</p></div>
</div>
</div>
<div class="fluid">
<div class="grid2">
<div class="alert-light-grey center"><p class="small">.grid2</p></div>
</div>
<div class="grid6 offset4">
<div class="alert-light-grey center"><p class="small">.grid6 .offset4</p></div>
</div>
</div>
<div class="fluid">
<div class="grid2 offset2">
<div class="alert-light-grey center"><p class="small">.grid2 .offset2</p></div>
</div>
<div class="grid3 offset1">
<div class="alert-light-grey center"><p class="small">.grid3 .offset1</p></div>
</div>
<div class="grid3">
<div class="alert-light-grey center"><p class="small">.grid3</p></div>
</div>
</div>
<div class="fluid">
<div class="grid2 offset4">
<div class="alert-light-grey center"><p class="small">.grid2 .offset4</p></div>
</div>
<div class="grid2">
<div class="alert-light-grey center"><p class="small">.grid2</p></div>
</div>
</div>
<div class="fluid">
<div class="grid6 offset3">
<pre class=" language-markup"><code class="language-markup"><div class="fluid">
<div class="grid12">
</div>
</div>
<div class="fluid">
<div class="grid6">
</div>
<div class="grid6">
</div>
</div>
<div class="fluid">
<div class="grid2 offset2">
</div>
<div class="grid3 offset1">
</div>
<div class="grid3">
</div>
</div></code>
</pre>
</div>
</div>
<h2 class="center mtop50" id="buttons"><a href="#buttons">Buttons</a></h2>
<div class="fluid">
<div class="grid6">
<h4>Sizes buttons <span><code class="language-markup">.btn-size</code></span></h4>
<hr>
<button class="btn">Button</button>
<button class="btn btn-small">Small button</button>
<button class="btn btn-xsmall">XSmall button</button>
<button class="btn btn-mini">Mini button</button>
<button class="btn btn-small full">Full button</button>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><button class="btn">Button</button>
<button class="btn btn-small">Small button</button>
<button class="btn btn-xsmall">XSmall button</button>
<button class="btn btn-small full">Full button</button></code>
</pre>
</div>
</div> <!-- /btn-size -->
<div class="fluid mtop30">
<div class="grid6" id="btn-color">
<h4>Color buttons <span><code class="language-markup">.btn-color</code></span></h4>
<hr>
<button class="btn btn-small btn-blue">Blue button</button>
<button class="btn btn-small btn-orange">Orange button</button>
<button class="btn btn-small btn-green">Green button</button>
<button class="btn btn-small btn-skyblue">Skyblue button</button>
<button class="btn btn-small btn-yellow">Yellow button</button>
<button class="btn btn-small btn-red">Red button</button>
<button class="btn btn-small btn-nblue">Another blue button</button>
<button class="btn btn-small btn-dark-grey">Dark grey button</button>
<button class="btn btn-small btn-light-grey">Light grey button</button>
<button class="btn btn-small btn-middle-grey">Middle grey button</button>
<button class="btn btn-small btn-super-light">XtraLight button</button>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><button class="btn btn-small btn-blue">Blue button</button>
<button class="btn btn-small btn-orange">Orange button</button>
<button class="btn btn-small btn-green">Green button</button>
<button class="btn btn-small btn-skyblue">Skyblue button</button>
<button class="btn btn-small btn-yellow">Yellow button</button>
<button class="btn btn-small btn-red">Red button</button>
<button class="btn btn-small btn-nblue">N blue button</button>
<button class="btn btn-small btn-dark-grey">Dark grey button</button>
<button class="btn btn-small btn-light-grey">Light grey button</button>
<button class="btn btn-small btn-middle-grey">Middle grey button</button>
<button class="btn btn-small btn-xtralight">XtraLight button</button></code>
</pre>
</div>
</div> <!-- /btn-color -->
<div class="fluid mtop30">
<div class="grid6 center" id="icon-circle-color">
<h4 class="text-left">Icon circle buttons <span><code class="language-markup">.btn-icon-circle.color</code></span></h4>
<hr>
<button class="btn-icon-circle"><i>❤</i></button>
<button class="btn-icon-circle blue"><i>❤</i></button>
<button class="btn-icon-circle orange"><i>❤</i></button>
<button class="btn-icon-circle green"><i>❤</i></button>
<button class="btn-icon-circle skyblue"><i>❤</i></button>
<button class="btn-icon-circle red"><i>❤</i></button>
<button class="btn-icon-circle long-shadow skyblue"><i>❤</i></button>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><button class="btn-icon-circle"></i></button>
<button class="btn-icon-circle blue"></i></button>
<button class="btn-icon-circle orange"></i></button>
<button class="btn-icon-circle green"></i></button>
<button class="btn-icon-circle skyblue"></i></button>
<button class="btn-icon-circle red"></i></button>
<button class="btn-icon-circle long-shadow skyblue"></i></button></code>
</pre>
</div>
</div> <!-- /btn-icon-circle -->
<div class="fluid mtop30">
<div class="grid6 center">
<h4 class="text-left">Share buttons <span><code class="language-markup">.btn-share</code></span></h4>
<hr>
<div class="btn btn-light-grey btn-share">
Share
<div class="xtra-content">
<a href="https://twitter.com/intent/tweet?url=https://elrumordelaluz.github.io/newbancomail/&text=New BM Pattern Library&via=Codepen&related=yarrcat" class="btn btn-small btn-blue"><i> ❤ </i></a>
<a href="https://twitter.com/intent/tweet?url=https://elrumordelaluz.github.io/newbancomail/&text=New BM Pattern Library&via=Codepen&related=yarrcat" class="btn btn-small btn-skyblue"><i> ❤ </i></a>
<a href="https://twitter.com/intent/tweet?url=https://elrumordelaluz.github.io/newbancomail/&text=New BM Pattern Library&via=Codepen&related=yarrcat" class="btn btn-small btn-red"><i> ❤ </i></a>
<a href="https://twitter.com/intent/tweet?url=https://elrumordelaluz.github.io/newbancomail/&text=New BM Pattern Library&via=Codepen&related=yarrcat" class="btn btn-small btn-nblue"><i> ❤ </i></a>
</div>
</div>
<br>
<div class="btn btn-light-grey btn-small btn-share">
Share
<div class="xtra-content">
<a href="https://twitter.com/intent/tweet?url=https://elrumordelaluz.github.io/newbancomail/&text=New BM Pattern Library&via=Codepen&related=yarrcat" class="btn btn-small btn-blue"><i> ❤ </i></a>
<a href="https://twitter.com/intent/tweet?url=https://elrumordelaluz.github.io/newbancomail/&text=New BM Pattern Library&via=Codepen&related=yarrcat" class="btn btn-small btn-skyblue"><i> ❤ </i></a>
<a href="https://twitter.com/intent/tweet?url=https://elrumordelaluz.github.io/newbancomail/&text=New BM Pattern Library&via=Codepen&related=yarrcat" class="btn btn-small btn-red"><i> ❤ </i></a>
<a href="https://twitter.com/intent/tweet?url=https://elrumordelaluz.github.io/newbancomail/&text=New BM Pattern Library&via=Codepen&related=yarrcat" class="btn btn-small btn-nblue"><i> ❤ </i></a>
</div>
</div>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><div class="btn btn-light-grey btn-share">
Condividi
<div class="xtra-content">
<button class="btn btn-small btn-blue"><i class="icon-facebook-sign"></i></button>
<button class="btn btn-small btn-skyblue"><i class="icon-twitter"></i></button>
<button class="btn btn-small btn-red"><i class="icon-pinterest"></i></button>
<buttton class="btn btn-small btn-nblue"><i class="icon-linkedin-sign"></i></button>
</div>
</div></code>
</pre>
</div>
</div> <!-- /btn-share -->
<div class="fluid mtop30">
<div class="grid6 center">
<h4 class="text-left">Download buttons <span><code class="language-markup">.btn-download</code></span></h4>
<hr>
<div class="fluid ">
<div class="grid6 center">
<button class="btn btn-small btn-super-light full text-left btn-download">
<i class="svg svg-ebook-success svg-xxsmall f-left"></i>
<span class="btn-svg-text"><strong>Download button</strong> <br>also see :hover behavior</span>
</button>
</div>
<div class="grid6 center">
<button class="btn btn-small btn-super-light full text-left btn-download">
<i class="svg svg-podium svg-xxsmall f-left"></i>
<span class="btn-svg-text"><strong>Another download</strong> <br>button style</span>
</button>
</div>
</div>
<div class="fluid ">
<div class="grid12 center">
<button class="btn btn-small btn-light-grey text-left btn-download">
<i class="svg svg-nope svg-xxsmall f-left"></i>
</button>
<button class="btn btn-small btn-red text-left btn-download">
<i class="svg svg-diamond svg-xxsmall f-left"></i>
</button>
<button class="btn btn-small btn-skyblue text-left btn-download">
<i class="svg svg-payment-paypal svg-xxsmall f-left"></i>
</button>
<button class="btn btn-small btn-super-light text-left btn-download">
<i class="svg svg-flash svg-xxsmall f-left"></i>
</button>
</div>
</div>
<p class="small center mtop20">View <a href="svg.html">SVG Icons</a> for a full list of SVGs</p>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><button class="btn btn-small btn-xtralight full text-left btn-download">
<i class="svg svg-ebook-success svg-xxsmall f-left"></i>
<span class="btn-svg-text"><strong>Download button</strong> <br>also see :hover behavior</span>
</button>
<button class="btn btn-small btn-light text-left btn-download">
<i class="svg svg-nope svg-xxsmall f-left"></i>
</button></code>
</pre>
</div>
</div> <!-- /btn-download -->
<div class="fluid mtop30">
<div class="grid6 center">
<h4 class="text-left">Social buttons <span><code class="language-markup">.social</code></span></h4>
<hr>
<div class="social twitter">
<a href="https://twitter.com/elrumordelaluz">@elrumordelaluz</a>
</div>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><div class="social twitter">
<a href=""><i class="icon-twitter"></i> @elrumordelaluz</a>
</div></code>
</pre>
</div>
</div> <!-- /socials -->
<h2 class="center mtop30" id="forms"><a href="#forms">Forms</a></h2>
<div class="fluid">
<div class="grid6">
<h4>Simple form <span><code class="language-markup">.form</code></span></h4>
<hr>
<form class="form">
<input type="text" placeholder="Input text">
<input type="text" disabled placeholder="Disabled input">
<div class="cont">
<input type="text" placeholder="Input with button">
<a href="#" onclick="return false" class="btn-input text-red"><i>❤</i></a>
</div>
<textarea placeholder="Simple textarea"></textarea>
<input type="file" id="file1">
<label for="file1" class="uploader">Upload file</label>
<div class="custom-select">
<select>
<option>Select</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="custom-select">
<select name="select" disabled>
<option>Disabled select</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</form>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><form class="form">
<input type="text" placeholder="Input text">
<input type="text" disabled placeholder="Disabled input">
<div class="cont">
<input type="text" placeholder="Input with button">
<a class="btn-input text-red"><i class="icon-question-sign"></i></a>
</div>
<textarea placeholder="Simple textarea"></textarea>
<input type="file" id="file1">
<label for="file1" class="uploader">Upload file</label>
<div class="custom-select">
<select name="select";>
<option>Select</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</form></code>
</pre>
</div>
</div> <!-- /simple-form -->
<div class="fluid mtop30">
<div class="grid6" id="checkbox-radio">
<h4>Checkboxes & Radios <span><code class="language-markup">.custom-radio || .custom-checkbox</code></span></h4>
<hr>
<form class="form">
<div class="center">
<input type="radio" name="r" id="radio1" class="custom-radio">
<label for="radio1" class="transp">Radio transp 1</label>
<input type="radio" name="r" id="radio2" class="custom-radio">
<label for="radio2" class="transp">Radio transp 2</label>
<input type="radio" name="r" id="radio3" class="custom-radio" checked>
<label for="radio3" class="transp">Radio transp 3</label>
</div>
<div class="center bg-dark-grey ptop10 pbottom10 mtop20">
<input type="radio" name="r2" id="radio21" class="custom-radio" checked>
<label for="radio21" class="blue">Radio blue</label>
<input type="radio" name="r2" id="radio22" class="custom-radio">
<label for="radio22" class="orange">Radio orange</label>
<input type="radio" name="r2" id="radio23" class="custom-radio">
<label for="radio23" class="dark-grey">Dark grey radio</label>
</div>
<div class="center mtop20">
<input type="checkbox" id="cb" class="custom-checkbox ">
<label for="cb" class="transp">Checkbox squared</label>
<input type="checkbox" id="cb2" class="custom-checkbox check">
<label for="cb2" class="transp">Checkbox check</label>
</div>
<div class="center bg-dark-grey ptop10 pbottom10 mtop20">
<input type="checkbox" id="cb21" class="custom-checkbox" checked>
<label for="cb21" class="blue">Blue checkbox</label>
<input type="checkbox" id="cb22" class="custom-checkbox">
<label for="cb22" class="orange">Orange checkbox</label>
<input type="checkbox" id="cb23" class="custom-checkbox" checked>
<label for="cb23" class="dark-grey">Dark grey checkbox</label>
</div>
</form>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><!-- /radio transp-->
<input type="radio" name="r" id="radio1" class="custom-radio">
<label for="radio1" class="transp">Radio transp 1</label>
<!-- /radio color-->
<input type="radio" name="r2" id="radio21" class="custom-radio" checked>
<label for="radio21" class="blue">Radio blue</label>
<!-- /checkboxes transp-->
<input type="checkbox" id="cb" class="custom-checkbox ">
<label for="cb" class="transp">Checkbox squared</label>
<input type="checkbox" id="cb2" class="custom-checkbox check">
<label for="cb2" class="transp">Checkbox check</label>
<!-- /checkboxes color-->
<input type="checkbox" id="cb21" class="custom-checkbox" checked>
<label for="cb21" class="blue">Blue checkbox</label></code>
</pre>
</div>
</div> <!-- /checkboxes & radio -->
<div class="fluid mtop30">
<div class="grid6">
<h4>Labeled form <span><code class="language-markup">.labeled-form</code></span></h4>
<hr>
<form class="form labeled-form">
<div class="cont">
<input type="text" name="lf1" placeholder="Labeled input text" class="">
<label for="lf1">Input label</label>
</div>
<div class="cont">
<div class="custom-select">
<select name="labeled-select">
<option>Labeled select</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<label for="labeled-select">Select label</label>
</div>
</form>
<p class="small mtop20">Note: add <code class="language-markup"><label class="light"></code> or <code class="language-markup"><label class="dark"></code> to solve the triangle on different backgrounds</p>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><form class="form labeled-form">
<div class="cont">
<input type="text" name="lf1" placeholder="Labeled input text">
<label for="lf1">Input label</label>
</div>
</form></code>
</pre>
</div>
</div> <!-- /labeled-form -->
<div class="fluid mtop30">
<div class="grid6">
<h4>Labeled form <span><code class="language-markup">.labeled-form.labeled-right</code></span></h4>
<hr>
<form class="form labeled-form labeled-right">
<div class="cont">
<input type="text" name="lf1" placeholder="Labeled input text" class="">
<label for="lf1">Input label</label>
</div>
<div class="cont">
<div class="custom-select">
<select name="labeled-select">
<option>Labeled select</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<label for="labeled-select">Select label</label>
</div>
</form>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><form class="form labeled-form labeled-right">
<div class="cont">
<input type="text" name="lf1" placeholder="Labeled input text" class="">
<label for="lf1">Input label</label>
</div>
</form></code>
</pre>
</div>
</div> <!-- /labeled-right -->
<div class="fluid mtop30">
<div class="grid6">
<h4>Form status <span><code class="language-markup">.form-status</code></span></h4>
<hr>
<form class="form cont">
<input type="text" placeholder="Input text">
<div class="form-status success">
<div class="status-messages">
<p class="txt-status txt-success">Success response</p>
</div>
</div>
</form>
<form class="form cont mtop10">
<input type="text" placeholder="Input text">
<div class="form-status error">
<div class="status-messages">
<p class="txt-status txt-error">Error response</p>
</div>
</div>
</form>
<form class="form cont mtop10">
<input type="text" placeholder="Input text">
<div class="form-status pending">
<div class="status-messages">
<p class="txt-status txt-pending">Pending response</p>
</div>
</div>
</form>
<form class="form cont mtop10">
<input type="text" placeholder="Input text loaiding...">
<input type="text" placeholder="Input text loaiding...">
<input type="text" placeholder="Input text loaiding...">
<div class="form-status loading">
<div class="loader"></div>
</div>
</form>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><div class="form-status success">
<div class="status-messages">
<p class="txt-status txt-success">Success response</p>
</div>
</div>
<div class="form-status error">
<div class="status-messages">
<p class="txt-status txt-error">Error response</p>
</div>
</div>
<div class="form-status pending">
<div class="status-messages">
<p class="txt-status txt-pending">Pending response</p>
</div>
</div>
<div class="form-status loading">
<div class="loader">
</div></code>
</pre>
</div>
</div> <!-- /form-status -->
<div class="fluid mtop30">
<div class="grid6">
<h4>Form BIG <span><code class="language-markup">.form-big</code></span></h4>
<hr>
<form class="form form-big labeled-form">
<input type="text" placeholder="BIG Input">
<div class="cont">
<input type="text" id="lbf" placeholder="Labeled BIG Input">
<label for="lbf">Label BIG input</label>
</div>
<textarea placeholder="BIG textarea"></textarea>
<div class="custom-select">
<select>
<option>BIG select</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="center mtop20">
<input type="radio" name="rb" id="radiob1" class="custom-radio" checked>
<label for="radiob1" class="grey transp">BIG Radio 1</label>
<input type="radio" name="rb" id="radiob2" class="custom-radio">
<label for="radiob2" class="grey transp">BIG Radio 2</label>
</div>
<div class="center mtop20">
<input type="checkbox" id="cbb1" class="custom-checkbox">
<label for="cbb1" class="grey transp">BIG Checkbox squared</label>
<input type="checkbox" id="cbb2" class="custom-checkbox check" checked>
<label for="cbb2" class="grey transp">BIG Checkbox check</label>
</div>
</form>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><form class="form form-big">
<input type="text" placeholder="Input BIG">
<textarea placeholder="Textarea BIG"></textarea>
<!--
// Any form stuff
-->
</form></code>
</pre>
</div>
</div> <!-- /form-big -->
<div class="fluid mtop30">
<div class="grid6">
<h4>Input errors <span><code class="language-markup">.input-error</code></span></h4>
<hr>
<form class="form">
<input type="text" placeholder="Input error" class="input-error">
<input type="text" placeholder="Input warning" class="input-warning">
</form>
<form class="form form-big">
<div class="cont">
<input type="text" placeholder="Input error w/ desc" class="input-error">
<div class="error-desc">Custom error description</div>
</div>
<div class="cont">
<input type="text" placeholder="Input error w/ desc" class="input-error">
<div class="error-desc-dib">Another error description</div>
</div>
</form>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><input type="text" class="input-error">
<input type="text" class="input-WARNING">
<!-- Error descriptions -->
<div class="cont">
<input type="text" class="input-error">
<div class="error-desc">Custom error description</div>
</div>
<div class="cont">
<input type="text" class="input-error">
<div class="error-desc-dib">Another error description</div>
</div></code>
</pre>
</div>
</div> <!-- /input-error -->
<h2 class="center mtop100" id="posts"><a href="#posts">Posts stuff</a></h2>
<div class="fluid">
<div class="grid6">
<h4>Quotes <span><code class="language-markup">.quotes</code></span></h4>
<hr>
<div class="quotes">
<div class="quote">
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum nulla fugiat eos voluptate minima nostrum veniam non magnam, nobis possimus!</p>
<i>Lorem Ipsum (25:2014)</i>
</div>
</div>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><div class="quotes">
<div class="quote">
<p>Lorem ipsum dolor sit amet.</p>
<i>Firma</i>
</div>
</div></code>
</pre>
</div>
</div> <!-- /quotes -->
<div class="fluid mtop20">
<div class="grid6">
<h4>Mention <span><code class="language-markup">.mention</code></span></h4>
<hr>
<div class="mention f-right">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur explicabo facere iste non! Omnis ea blanditiis repellat placeat aspernatur, ratione debitis recusandae quos veniam optio, culpa error porro vel, atque.
</p>
<div class="mention f-left">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta tenetur, architecto fuga unde aut deleniti ullam odio, laudantium corporis exercitationem impedit. Nemo distinctio necessitatibus nobis assumenda, corporis consequatur ab nam.
</p>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><p>
Lorem ipsum dolor sit amet...
</p>
<div class="mention f-right">
<p>The mention</p>
</div>
<p>
Lorem ipsum dolor sit amet...
</p>
<div class="mention f-left">
<p>The mention</p>
</div></code>
</pre>
</div>
</div> <!-- /mention -->
<div class="fluid mtop20">
<div class="grid6">
<h4>Post <span><code class="language-markup">.post</code></span></h4>
<hr>
<div class="post">
<div class="post-image">
<img src="https://placehold.it/70x55" width="70" height="55">
</div>
<div class="post-content">
<h5 class="post-title">
Post Title
</h5>
<p class="small post-resume">
X maggio 2014 – ore xx.xx Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero velit autem, amet impedit unde perspiciatis voluptatum exercitationem illo consequatur quisquam dolores perferendis totam libero, explicabo commodi voluptatibus! In, quisquam necessitatibus... <a href="javascript:void(0)" class="more">Continua a leggere »</a></p>
<p class="post-meta small">Nome Autore<br>Publicato in data</p>
</div>
</div>
<div class="post">
<div class="post-image">
<img src="https://placehold.it/70x55" width="70" height="55">
</div>
<div class="post-content">
<h5 class="post-title">
<a href="javascript:void(0)">Post Title Lorem ipsum dolor sit amet, consectetur adipisicing.</a>
</h5>
</div>
</div>
<div class="more-posts">
<div class="small-post">
<a href="javascript:void(0)">Lorem ipsum dolor sit amet.</a>
</div>
<div class="small-post">
<a href="javascript:void(0)">Lorem ipsum dolor sit amet.</a>
</div>
</div>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><div class="post">
<div class="post-image">
<img src="http://" width="70" height="55">
</div>
<div class="post-content">
<h5 class="post-title">Post Title</h5>
<p class="small post-resume">Data – ora &Lorem ipsum dolor sit amet... <a href="" class="more">Continua a leggere »</a></p>
<p class="post-meta small">Nome Autore<br>Publicato in data</p>
</div>
</div>
<div class="post">
<div class="post-image">
<img src="http://" width="70" height="55">
</div>
<div class="post-content">
<h5 class="post-title">Post Title only</h5>
</div>
</div>
<div class="more-posts">
<div class="small-post">
<a href="">Lorem ipsum dolor sit amet.</a>
</div>
<div class="small-post">
<a href="">Lorem ipsum dolor sit amet.</a>
</div>
</div></code>
</pre>
</div>
</div> <!-- /post -->
<h2 class="center mtop100" id="tables"><a href="#tables">Tables</a></h2>
<div class="fluid">
<div class="grid6">
<h4>Default table <span><code class="language-markup">.table</code></span></h4>
<hr>
<table class="table">
<thead>
<tr>
<th>Code</th>
<th>Dove</th>
<th>Cosa</th>
</tr>
</thead>
<tbody>
<tr>
<td>37978</td>
<td>Francia</td>
<td>Agenzie immobiliari</td>
</tr>
<tr>
<td>37979</td>
<td>Italia</td>
<td>Latte di mucca</td>
</tr>
</tbody>
</table>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><table class="table">
<thead>
<!-- /headings content -->
</thead>
<tbody>
<!-- /rows content -->
</tbody>
</table></code>
</pre>
</div>
</div> <!-- /table -->
<div class="fluid">
<div class="grid6">
<h4>Table light<span><code class="language-markup">.table-light</code></span></h4>
<hr>
<table class="table table-light">
<thead>
<tr>
<th>Code</th>
<th>Dove</th>
<th>Cosa</th>
</tr>
</thead>
<tbody>
<tr>
<td>37978</td>
<td>Francia</td>
<td>Agenzie immobiliari</td>
</tr>
<tr>
<td>37979</td>
<td>Italia</td>
<td>Latte di mucca</td>
</tr>
</tbody>
</table>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><table class="table">
<thead>
<!-- /headings content -->
</thead>
<tbody>
<!-- /rows content -->
</tbody>
</table></code>
</pre>
</div>
</div> <!-- /table-light -->
<div class="fluid">
<div class="grid6">
<h4>Cancelled row <span><code class="language-markup">.cancelled</code></span></h4>
<hr>
<table class="table">
<thead>
<tr>
<th>Code</th>
<th>Dove</th>
<th>Cosa</th>
</tr>
</thead>
<tbody>
<tr class="cancelled">
<td>37978</td>
<td>Francia</td>
<td>Agenzie immobiliari</td>
</tr>
</tbody>
</table>
<hr>
<table class="table table-light">
<thead>
<tr>
<th>Code</th>
<th>Dove</th>
<th>Cosa</th>
</tr>
</thead>
<tbody>
<tr class="cancelled">
<td>37978</td>
<td>Francia</td>
<td>Agenzie immobiliari</td>
</tr>
</tbody>
</table>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><table class="table">
<thead>
<!-- /headings content -->
</thead>
<tbody>
<tr class="cancelled">
<!-- /row content -->
</tr>
</tbody>
</table></code>
</pre>
</div>
</div> <!-- /table row cancelled -->
<div class="fluid">
<div class="grid6">
<h4>Disabled row <span><code class="language-markup">.disabled</code></span></h4>
<hr>
<table class="table">
<thead>
<tr>
<th>Code</th>
<th>Dove</th>
<th>Cosa</th>
</tr>
</thead>
<tbody>
<tr class="disabled">
<td>37978</td>
<td>Francia</td>
<td>Agenzie immobiliari</td>
</tr>
</tbody>
</table>
<hr>
<table class="table table-light">
<thead>
<tr>
<th>Code</th>
<th>Dove</th>
<th>Cosa</th>
</tr>
</thead>
<tbody>
<tr class="disabled">
<td>37978</td>
<td>Francia</td>
<td>Agenzie immobiliari</td>
</tr>
</tbody>
</table>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><table class="table">
<thead>
<!-- /headings content -->
</thead>
<tbody>
<tr class="disabled">
<!-- /row content -->
</tr>
</tbody>
</table></code>
</pre>
</div>
</div> <!-- /table row disabled -->
<h2 class="center mtop100" id="media"><a href="#media">Media elems</a></h2>
<div class="fluid">
<div class="grid6" id="list">
<h4>List <span><code class="language-markup">.list</code></span></h4>
<hr>
<div class="list">
<div class="list-thumb"><i>☯</i></div>
<div class="list-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ab numquam repellat fuga veritatis.</p></div>
</div>
<div class="list blue">
<div class="list-thumb"><strong>1</strong></div>
<div class="list-body"><code class="language-markup">.list.blue</code><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ab numquam repellat fuga veritatis.</p></div>
</div>
<div class="list orange">
<div class="list-thumb"><strong>2</strong></div>
<div class="list-body">
<code class="language-markup">.list.orange</code>
<p>Lorem ipsum dolor sit amet, voluptatem est nesciunt possimus voluptas aliquam vero temporibus natus consequuntur nemo.</p></div>
</div>
<div class="list green">
<div class="list-thumb long-shadow"><i>★</i></div>
<div class="list-body"><code class="language-markup">.list.green</code> <code class="language-markup">.list-thumb.long-shadow</code><p>Lorem ipsum dolor sit amet, voluptatem est nesciunt possimus natus consequuntur nemo.</p></div>
</div>
</div>
<div class="grid6">
<pre class=" language-markup">
<code class="language-markup"><div class="list">
<div class="list-thumb"><i class="icon-home"></i></div>
<div class="list-body">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="list blue">
<div class="list-thumb"><strong>1</strong></div>
<div class="list-body">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="list orange">
<div class="list-thumb"><strong>2</strong></div>
<div class="list-body">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="list green">
<div class="list-thumb long-shadow"><i class="icon-github"></i></div>
<div class="list-body">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div></code>
</pre>
</div>
</div> <!-- /List -->
<div class="fluid">
<div class="grid6" id="ul">
<h4>Ul <span><code class="language-markup">.ul</code></span></h4>
<hr>
<ul class="ul">
<li>
<div class="ul-thumb">
<strong>1</strong>
</div>
<div class="ul-body">
<p>ul item 1</p>
</div>
</li>
<li>
<div class="ul-thumb">
<strong>2</strong>
</div>
<div class="ul-body">
<p>ul item 2</p>
</div>
</li>
</ul>
<ul class="ul blue">
<li>
<div class="ul-thumb">
<strong>1</strong>
</div>
<div class="ul-body">
<p>Blue item 1</p>
</div>
</li>
<li>
<div class="ul-thumb">
<strong>2</strong>
</div>
<div class="ul-body">
<p>Blue item 2</p>
</div>
</li>
</ul>
<ul class="ul green">
<li>
<div class="ul-thumb">
<strong>1</strong>
</div>
<div class="ul-body">
<p>Green item 1</p>
</div>
</li>
<li>
<div class="ul-thumb">
<strong>2</strong>
</div>
<div class="ul-body">
<p>Green item 2</p>
</div>
</li>
</ul>
<ul class="ul">
<li>
<div class="ul-thumb orange">
<strong>1</strong>
</div>
<div class="ul-body">
<p>ul item 1 (orange)</p>
</div>
</li>
<li>
<div class="ul-thumb blue">
<strong>2</strong>
</div>
<div class="ul-body">
<p>ul item 2 (blue)</p>
</div>
</li>
<li>
<div class="ul-thumb green">
<strong>3</strong>
</div>
<div class="ul-body">
<p>ul item 1 (green)</p>
</div>
</li>
</ul>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><ul class="ul">
<li>
<div class="ul-thumb">
<strong>1</strong>
</div>
<div class="ul-body">
<p>ul item 1</p>
</div>
</li>
<!-- /more li-->
</ul>
<ul class="ul blue">
<li>
<div class="ul-thumb">
<strong>1</strong>
</div>
<div class="ul-body">
<p>blue item 1</p>
</div>
</li>
<!-- /more li-->
</ul></code>
</pre>
</div>
</div> <!-- /Ul -->
<h2 class="center mtop100" id="slider"><a href="#slider">Photo slider</a></h2>
<div class="fluid">
<div class="grid12">
<div class="photo-slider-demo">
<div class="photo-slide">
<figure class="slide-image" id="slide-demo-1"></figure>
<div class="slide-text slide-text-left">
<h1 class="stext yellow">Lorem ipsum dolor.</h1><br>
<h3 class="stext middle-grey">Lorem ipsum dolor sit amet.</h3>
</div>
</div>
<div class="photo-slide">
<figure class="slide-image" id="slide-demo-2"></figure>
<div class="slide-text slide-text-right">
<h1 class="stext red">Lorem ipsum dolor.</h1><br>
<h4 class="stext dark-grey">Lorem ipsum dolor sit <a href="#" onclick="return false;">amet</a>.</h4>
</div>
</div>
<div class="photo-slide">
<figure class="slide-image" id="slide-demo-3"></figure>
<div class="slide-text slide-text-left">
<h1 class="stext light-grey">Lorem ipsum dolor.</h1><br>
<p class="stext amethyst">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, ad!</hp>
</div>
</div>
<div class="photo-slide">
<figure class="slide-image" id="slide-demo-4"></figure>
<div class="slide-text slide-text-right">
<h3 class="stext">Lorem ipsum </h3><br>
<p class="stext">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Lorem ipsum dolor sit amet.</p>
<button class="btn btn-green f-right stext transparent">Login</button>
</div>
</div>
</div> <!-- /photo-slider-demo -->
</div>
</div>
<div class="fluid">
<div class="grid12">
<pre class=" language-markup"><code class="language-markup"><!--
The class 'photo-slider-demo' is created through @mixin photo-slider.
By default you could use class="photo-slider"
But if you have more than one slider in your project you could declare one specific
-->
<div class="photo-slider-demo">
<div class="photo-slide">
<figure class="slide-image" id="slide-demo-1"></figure>
<div class="slide-text slide-text-left">
<h1 class="stext yellow">Lorem ipsum dolor.</h1><br>
<h3 class="stext middle-grey">Lorem ipsum dolor sit amet.</h3>
</div>
</div>
<div class="photo-slide">
<figure class="slide-image" id="slide-demo-2"></figure>
<div class="slide-text slide-text-right">
<h1 class="stext red">Lorem ipsum dolor.</h1><br>
<h4 class="stext light-grey">Lorem ipsum dolor sit <a href="#" onclick="return false;">amet</a>.</h4>
</div>
</div>
<div class="photo-slide">
<figure class="slide-image" id="slide-demo-3"></figure>
<div class="slide-text slide-text-left">
<h1 class="stext light-grey">Lorem ipsum dolor.</h1><br>
<p class="stext amethyst">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, ad!</hp>
</div>
</div>
<div class="photo-slide">
<figure class="slide-image" id="slide-demo-4"></figure>
<div class="slide-text slide-text-right">
<h3 class="stext">Lorem ipsum </h3><br>
<p class="stext">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Lorem ipsum dolor sit amet.</p>
<button class="btn btn-green f-right stext transparent">Login</button>
</div>
</div>
</div> <!-- /photo-slider-demo --></code>
</pre>
</div>
</div> <!-- /photo-slider -->
<h2 class="center mtop100" id="misc"><a href="#misc">Miscelaneous</a></h2>
<div class="fluid">
<div class="grid6" id="accordion">
<h4>Simple Accordion <span><code class="language-markup">.accordion</code></span></h4>
<hr>
<div class="accordion">
<div>
<input class="step-chk" id="ac-1" name="accordion-1" type="checkbox" checked>
<label for="ac-1" class="accordion-title">Accordion Tab 1</label>
<div class="ac-content">
<div class="fluid mtop10">
<div class="grid10 offset1">
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet dolores aliquid quam unde sequi omnis ut dignissimos quidem magni? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, nam!
</p>
</div>
</div>
</div> <!-- /ac-content -->
</div> <!-- /div::ACC 1 -->
<div>
<input class="step-chk" id="ac-2" name="accordion-1" type="checkbox">
<label for="ac-2" class="accordion-title orange">Accordion Tab Orange</label>
<div class="ac-content">
<div class="fluid mtop10">
<div class="grid10 offset1">
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet dolores aliquid quam unde sequi omnis ut dignissimos quidem magni? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, perferendis, sequi. Amet perferendis unde dolor nemo enim consequatur cupiditate eum.
</p>
</div>
</div>
</div> <!-- /ac-content -->
</div> <!-- /div::ACC 1 -->
<div>
<input class="step-chk" id="ac-3" name="accordion-1" type="checkbox">
<label for="ac-3" class="accordion-title blue">Accordion Tab Blue</label>
<div class="ac-content">
<div class="fluid mtop10">
<div class="grid10 offset1">
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet dolores aliquid quam unde sequi omnis ut dignissimos quidem magni? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore accusamus perspiciatis excepturi totam autem. Consectetur totam, sint, provident dolores laudantium, at nesciunt, a laborum asperiores consequuntur doloribus voluptatum ad odio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti sint totam tempora dolores blanditiis maiores sit, non dignissimos beatae mollitia.
</p>
</div>
</div>
</div> <!-- /ac-content -->
</div> <!-- /div::ACC 1 -->
</div>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><div class="accordion">
<div>
<input class="step-chk" id="ac-1" type="checkbox" checked>
<label for="ac-1" class="accordion-title">Accordion Tab 1</label>
<div class="ac-content ac-small">
<p class="tab-title">Accordion content here</p>
</div>
</div>
<div>
<input class="step-chk" id="ac-2" type="checkbox" checked>
<label for="ac-2" class="accordion-title">Accordion Tab 2</label>
<div class="ac-content ac-small">
<p class="tab-title">Accordion content here</p>
</div>
</div>
</div></code>
</pre>
</div>
</div> <!-- /accordion -->
<div class="fluid">
<div class="grid6">
<h4>Breadcrumb <span><code class="language-markup">.breadcrumb</code></span></h4>
<hr>
<ul class="breadcrumb">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Risorse</a></li>
<li>Guide</li>
</ul>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><ul class="breadcrumb">
<li><a href="">Home</a></li>
<li><a href="">Risorse</a></li>
<li>Guide</li>
</ul></code>
</pre>
</div>
</div> <!-- /Breadcrumbs -->
<div class="fluid">
<div class="grid6">
<h4>FAQ <span><code class="language-markup">.faq-question</code> <code class="language-markup">.faq-answer</code></span></h4>
<hr>
<div class="fluid">
<div class="grid6">
<div class="faq-question">
<p>Lorem ipsum dolor sit amet?</p>
</div>
</div>
<div class="grid6">
<div class="faq-answer">
<input type="checkbox" id="vm-1" name="vm-1">
<label for="vm-1"></label>
<div class="faq-answer-cont">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae, minus voluptas hic atque, ad voluptates temporibus laboriosam doloremque architecto error suscipit odio? Alias, architecto.</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><div class="fluid">
<div class="grid6">
<div class="faq-question">
<p>Lorem ipsum?</p>
</div>
</div>
<div class="grid6">
<div class="faq-answer">
<input type="checkbox" id="vm-1" name="vm-1">
<label for="vm-1"></label>
<div class="faq-answer-cont">
<p>Lorem ipsum dolor sit amet...</p>
</div> <!-- /faq-answer-cont -->
</div> <!-- /faq-answer -->
</div> <!-- /grid -->
</div> <!-- /fluid --></code>
</pre>
</div>
</div> <!-- /FAQ -->
<div class="fluid">
<div class="grid6" id="badge">
<h4>Badge <span><code class="language-markup">.badge</code></span></h4>
<hr>
<button class="btn btn-small btn-green"><i>€</i>Products <span class="badge">1</span></button>
<button class="btn btn-small btn-dark-grey"><i>@</i>Emails <span class="badge badge-green">25</span></button>
<button class="btn btn-small btn-light-grey">Forks <span class="badge badge-orange">70</span></button>
<button class="btn btn-small btn-light-grey"><i>❤</i>Likes <span class="badge badge-blue">88</span></button>
<button class="btn btn-small btn-light-grey">Followers <span class="badge badge-skyblue">304</span></button>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><button class="btn btn-small btn-green">
<i class="icon-shopping-cart"></i>Products
<span class="badge">1</span>
</button>
<button class="btn btn-small btn-dark-grey">
<i class="icon-envelope"></i>Emails
<span class="badge badge-green">1</span>
</button></code>
</pre>
</div>
</div> <!-- /Badge -->
<div class="fluid">
<div class="grid6" id="switch">
<h4>Switch <span><code class="language-markup">.sw</code></span></h4>
<hr>
<div class="center">
<input type="checkbox" class="sw" id="sw1">
<label class="switch" for="sw1"></label>
<input type="checkbox" class="sw" id="sw2" checked>
<label class="switch red" for="sw2"></label>
<input type="checkbox" class="sw" id="sw3" checked=>
<label class="switch yellow" for="sw3"></label>
<input type="checkbox" class="sw" id="sw4">
<label class="switch blue" for="sw4"></label>
<input type="checkbox" class="sw" id="sw5" checked>
<label class="switch amethyst" for="sw5"></label>
<input type="checkbox" class="sw" id="sw6" checked>
<label class="switch emerald" for="sw6"></label>
<input type="checkbox" class="sw" id="sw7" checked>
<label class="switch nblue" for="sw7"></label>
</div>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><input type="checkbox" class="sw" id="sw1" checked="">
<label class="switch" for="sw1"></label>
<input type="checkbox" class="sw" id="sw2" checked="">
<label class="switch red" for="sw2"></label></code>
</pre>
</div>
</div> <!-- /Switch -->
<div class="fluid">
<div class="grid6" id="alert">
<h4>Alert <span><code class="language-markup">.alert</code></span></h4>
<hr>
<div class="alert alert-red">.alert-red</div>
<br>
<div class="alert alert-yellow">.alert-yellow</div>
<br>
<div class="alert alert-green">.alert-green</div>
<br>
<div class="alert alert-amethyst">.alert-amethyst</div>
<br>
<div class="alert alert-orange">.alert-orange</div>
<br>
<div class="alert alert-blue">.alert-blue</div>
<br>
<div class="alert alert-skyblue">.alert-skyblue</div>
<br>
<div class="alert alert-dark-grey">
.alert-dark-grey with close icon
<span class="alert-remove"><i class="icon-remove"></i></span>
</div>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><div class="alert alert-error">.alert-red</div>
<div class="alert alert-red">.alert-yellow</div>
<div class="alert alert-green">.alert-green</div>
<div class="alert alert-amethyst">.alert-amethyst</div>
<div class="alert alert-orange">.alert-orange</div>
<div class="alert alert-blue">.alert-blue</div>
<div class="alert alert-skyblue">.alert-skyblue</div>
<div class="alert alert-success">
.alert-success with close icon
<span class="alert-remove"><i class="icon-remove"></i></span>
</div></code>
</pre>
</div>
</div> <!-- /Alert -->
<div class="fluid">
<div class="grid6">
<h4>Logo (mini) <span><code class="language-markup">.min-logo</code></span></h4>
<hr>
<div class="fluid">
<div class="grid12">
<code class="language-markup">mini-logo</code>
<div class="mini-logo"></div>
</div>
</div>
<div class="fluid mtop10">
<div class="grid12">
<code class="language-markup">.mini-logo.anim</code>
<div class="mini-logo anim"></div>
</div>
</div>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><div class="mini-logo"></div>
<div class="mini-logo anim"></div></code>
</pre>
</div>
</div> <!-- /Mini logo -->
<div class="fluid mtop30">
<div class="grid6" id="tooltip">
<h4>Tooltip <span><code class="language-markup">.ttip</code></span></h4>
<hr>
<p class="ttip" data-ttip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, amet.">
<strong>Simple <small><code class="language-markup"><p></code></small> sentence with tooltip</strong> lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, voluptatibus.
</p>
<div class="center">
<button class="btn btn-red ttip" data-ttip="If you need help just call"><i class="icon-question"></i> Help button</button>
<br>
<button class="btn btn-small btn-light-grey ttip small" data-ttip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, numquam!">Tooltip small</button>
<button class="btn btn-small btn-light-grey ttip medium" data-ttip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, numquam!">Tooltip medium</button>
<button class="btn btn-small btn-light-grey ttip large" data-ttip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, numquam!">Tooltip large</button>
<br>
<button class="btn btn-small btn-green ttip ttip-green" data-ttip="Lorem ipsum!">Green</button>
<button class="btn btn-small btn-red ttip ttip-red" data-ttip="Lorem ipsum!">Red</button>
<button class="btn btn-small btn-blue ttip ttip-blue" data-ttip="Lorem ipsum!">Blue</button>
<button class="btn btn-small btn-skyblue ttip ttip-skyblue" data-ttip="Lorem ipsum!">Skyblue</button>
<button class="btn btn-small btn-yellow ttip ttip-yellow" data-ttip="Lorem ipsum!">Yellow</button><br>
<button class="btn btn-small btn-light-grey ttip ttip-light-grey" data-ttip="Lorem ipsum!">Light grey</button>
<button class="btn btn-small btn-super-light ttip ttip-super-light" data-ttip="Lorem ipsum!">Super light</button>
</div>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><p class="ttip" data-ttip="Lorem ipsum….">
Lorem ipsum…
</p>
<button class="btn… ttip small" data-ttip="Lorem ipsum…">Tooltip small</button>
<button class="btn… ttip medium" data-ttip="Lorem ipsum…">Tooltip medium</button>
<button class="btn… ttip large" data-ttip="Lorem ipsum…">Tooltip large</button>
<button class="btn… ttip ttip-green" data-ttip="Lorem ipsum…">Tooltip large</button>
<button class="btn… ttip ttip-red" data-ttip="Lorem ipsum…">Tooltip large</button>
<button class="btn… ttip ttip-blue" data-ttip="Lorem ipsum…">Tooltip large</button>
</code>
</pre>
</div>
</div> <!-- /Tooltip -->
<div class="fluid mtop50">
<div class="grid6" id="loader">
<h4>Loader <span><code class="language-markup">.loader</code></span></h4>
<hr>
<br>
<div class="loader center"></div>
<br>
<hr>
<div class="center">
<div class="loader green"></div>
<div class="loader red"></div>
<div class="loader blue"></div>
<div class="loader skyblue"></div>
<div class="loader yellow"></div>
</div>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><div class="loader center"></div>
<div class="loader green"></div>
<div class="loader red"></div>
<div class="loader blue"></div>
<div class="loader skyblue"></div></code>
</pre>
</div>
</div> <!-- /Loader -->
<div class="fluid mtop50">
<div class="grid6" id="bubble">
<h4>Bubble <span><code class="language-markup">.bubble-color</code></span></h4>
<hr>
<div class="center">
<button class="btn btn-light-grey bubble-top">Bubble btn</button><br>
<button class="btn btn-yellow btn-small bubble-bottom bubble-yellow">Bubble-bottom</button>
<button class="btn btn-green btn-small bubble-top bubble-green">Bubble-top</button>
<button class="btn btn-red bubble-right bubble-red">Bubble-right</button><br>
<button class="btn btn-skyblue bubble-left bubble-skyblue">Bubble-left</button>
</div>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><button class="btn… bubble-top">lipsum</button>
<button class="btn… bubble-bottom bubble-yellow">lipsum</button>
<button class="btn… bubble-top bubble-green">lipsum</button>
<button class="btn… bubble-right bubble-red">lipsum</button>
<button class="btn… bubble-left bubble-skyblue">lipsum</button></code>
</pre>
</div>
</div> <!-- /Bubble -->
<div class="fluid mtop50">
<div class="grid6" id="hr">
<h4>HR <span><code class="language-markup">.color</code></span></h4>
<hr>
<br>
<hr class="red">
<hr class="blue">
<hr class="yellow">
<hr class="amethyst">
<hr class="green">
<hr class="light-grey">
<br>
<hr class="red bubble-top bubble-red">
<hr class="blue bubble-bottom bubble-blue">
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><hr class="red">
<hr class="blue">
<hr class="yellow">
<hr class="light">
<hr class="red bubble-top bubble-red">
<hr class="blue bubble-bottom bubble-blue"></code>
</pre>
</div>
</div> <!-- /HR -->
<div class="fluid mtop50">
<div class="grid6">
<h4>SVG <span><code class="language-markup">.svg</code></span></h4>
<hr>
<div class="center">
<div class="svg svg-mini svg-tools"></div>
<div class="svg svg-xxsmall svg-chat"></div>
<div class="svg svg-xsmall svg-phone"></div>
<div class="svg svg-small svg-ebook"></div>
</div>
<p class=" mtop20 small">there are also <code class="language-markup">.svg-medium</code>, <code class="language-markup">.svg-large</code> & <code class="language-markup">.svg-xlarge</code> but... too much</p>
<div class="center">
<a class="btn btn-small center btn-green" href="javascript:void(0)">full svg list</a>
</div>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><div class="svg svg-mini svg-tools"></div>
<div class="svg svg-xxsmall svg-chat"></div>
<div class="svg svg-xsmall svg-phone"></div>
<div class="svg svg-small svg-ebook"></div></code>
</pre>
</div>
</div> <!-- /SVG -->
<div class="fluid mtop50">
<div class="grid6">
<h4>Messages (inbox)<span><code class="language-markup">.messages</code></span></h4>
<hr>
<ul class="messages">
<li class="msg">
<div class="msg-controls">
<a href="#" class="msg-reply ttip dn" data-ttip="Reply"><i class="icon-reply"></i></a>
<a href="#" class="msg-delete ttip dn" data-ttip="Del" id="del-msg_175"><i class="icon-remove"></i></a>
</div>
<input type="checkbox" class="msg-subject" id="msg-1">
<label for="msg-1" class="msg-subject-read">
<span class="msg-header">
<span class="msg-from">From: <span>Lorem - ipsum</span><input type="hidden" value="support@bancomail.it" class="mittente"></span>
<span class="msg-date">on <span>23/mag/2014 10.54.33</span></span>
</span>
<span class="msg-sbjct">Lorem ipsum message</span>
</label>
<p class="msg-text small">
Hello world,<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptas, molestias ea doloribus debitis alias enim? Distinctio sunt nulla nobis consectetur ab vero ducimus exercitationem.<br>
<a href="">Hai bisgno di aiuto?</a>
</p>
</li>
<li class="msg msg-new">
<div class="msg-controls">
<a href="#" onclick="return false;" class="msg-reply ttip dn" data-ttip="Reply"><i class="icon-reply"></i></a>
<a href="#" onclick="return false;" class="msg-delete ttip dn" data-ttip="Del" id="del-msg_175"><i class="icon-remove"></i></a>
</div>
<input type="checkbox" class="msg-subject" id="msg-2">
<label for="msg-2" class="msg-subject-read">
<span class="msg-header">
<span class="msg-from">From: <span>Lorem - ipsum</span><input type="hidden" value="support@bancomail.it" class="mittente"></span>
<span class="msg-date">on <span>23/mag/2014 10.54.33</span></span>
</span>
<span class="msg-sbjct">Another message</span>
</label>
<p class="msg-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptas, molestias ea doloribus debitis alias enim? Distinctio sunt nulla nobis consectetur ab vero ducimus exercitationem.<i class="icon-github"></i>
</p>
</li>
</ul>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><ul class="messages">
<li class="msg">
<div class="msg-controls">
<a href="javascript:void(0)" class="msg-reply ttip dn" data-ttip="Risp."><i class="icon-reply"></i></a>
<a href="javascript:void(0)" class="msg-delete ttip dn" data-ttip="Elim." id="del-msg_175"><i class="icon-remove"></i></a>
</div>
<input type="checkbox" class="msg-subject" id="msg-1">
<label for="msg-1" class="msg-subject-read">
<span class="msg-header">
<span class="msg-from">From: <span>Lorem - ipsum</span><input type="hidden" value="support@bancomail.it" class="mittente"></span>
<span class="msg-date">on <span>23/mag/2014 10.54.33</span></span>
</span>
<span class="msg-sbjct">Lorem ipsum message</span>
</label>
<p class="msg-text small">
Hello world,<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia voluptas, molestias ea doloribus debitis alias enim? Distinctio sunt nulla nobis consectetur ab vero ducimus exercitationem.<br>
<a href="/supporto">Hai bisgno di aiuto?</a>
</p>
</li>
<li class="msg msg-new">...</li>
<li class="msg">...</li>
</ul>
</code>
</pre>
</div>
</div> <!-- /Messages-->
<div class="fluid">
<div class="grid6">
<h4>Products <span><code class="language-markup">.products</code></span></h4>
<hr>
<div class="products">
<div class="product center">
<i class="svg svg-xxsmall svg-ebook-love"></i>
<h3>Item 1</h3>
<p class="small">Lorem ipsum dolor sit amet</p>
<div class="product-info center">
<h4>Lorem</h4>
<p class="small">Lorem ipsum dolor sit amet</p>
<button class="btn btn-small btn-red">View</button>
</div> <!-- /product-info -->
</div> <!-- /product -->
<div class="product center">
<i class="svg svg-xxsmall svg-ebook-success"></i>
<h3>Item 2</h3>
<p class="small">Lorem ipsum dolor sit amet</p>
<div class="product-info center">
<h4>Lorem</h4>
<p class="small">Lorem ipsum dolor sit amet</p>
<button class="btn btn-small btn-green">View</button>
</div> <!-- /product-info -->
</div> <!-- /product -->
<div class="product center">
<i class="svg svg-xxsmall svg-ebook-vendere"></i>
<h3>Item 3</h3>
<p class="small">Lorem ipsum dolor sit amet</p>
<div class="product-info center">
<h4>Lorem</h4>
<p class="small">Lorem ipsum dolor sit amet</p>
<button class="btn btn-small btn-blue">View</button>
</div> <!-- /product-info -->
</div> <!-- /product -->
<div class="product center">
<i class="svg svg-xxsmall svg-ebook-natale"></i>
<h3>Item 4</h3>
<p class="small">Lorem ipsum dolor sit amet</p>
<div class="product-info center">
<h4>Lorem</h4>
<p class="small">Lorem ipsum dolor sit amet</p>
<button class="btn btn-small btn-skyblue">View</button>
</div> <!-- /product-info -->
</div> <!-- /product -->
</div> <!-- /products -->
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><div class="products">
<div class="product">
<i class="svg svg-xxsmall svg-ebook-love"></i>
<h3>Item 1</h3>
<p class="small">Lorem ipsum dolor sit amet</p>
<div class="product-info center">
<h4>Lorem</h4>
<p class="small">Lorem ipsum dolor sit amet</p>
<button class="btn btn-small btn-green">View</button>
</div> <!-- /product-info -->
</div> <!-- /product -->
<div class="product">
<i class="svg svg-xxsmall svg-ebook-natale"></i>
<h3>Item 1</h3>
<p class="small">Lorem ipsum dolor sit amet</p>
<div class="product-info center">
<h4>Lorem</h4>
<p class="small">Lorem ipsum dolor sit amet</p>
<button class="btn btn-small btn-green">View</button>
</div> <!-- /product-info -->
</div> <!-- /product -->
</div> <!-- /products --></code>
</pre>
</div>
</div> <!-- /Products -->
<div class="fluid">
<div class="grid6" id="items">
<h4>Items <span><code class="language-markup">.items</code></span></h4>
<hr>
<ul class="items">
<li>Lorem ipsum dolor</li>
<li>Sit amet</li>
<li class="green">Consectetur adipisicing</li>
<li>Rerum maxime itaque</li>
<li class="dark-grey">Qui libero</li>
</ul>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><ul class="items">
<li>Lorem ipsum dolor</li>
<li>Sit amet</li>
<li class="green">Consectetur adipisicing</li>
<li>Rerum maxime itaque</li>
<li>Qui libero</li>
</ul></code>
</pre>
</div>
</div> <!-- /Items -->
<div class="fluid">
<div class="grid6">
<h4>Table tabs <span><code class="language-markup">.table-tabs</code></span></h4>
<hr>
<ul class="table-tabs center">
<li class="table-tabs__item">Lorem ipsum dolor</li>
<li class="table-tabs__item">Sit amet</li>
<li class="table-tabs__item">Consectetur adipisicing</li>
<li class="table-tabs__item">Rerum maxime itaque</li>
</ul>
<hr>
<ul class="table-tabs center">
<li class="table-tabs__item">
<i class="svg svg-xxsmall svg-chat"></i>
</li>
<li class="table-tabs__item">
<i class="svg svg-xxsmall svg-ebook"></i>
</li>
<li class="table-tabs__item">
<i class="svg svg-xxsmall svg-lock-o"></i>
</li>
</ul>
<hr>
<ul class="table-tabs center">
<li class="table-tabs__item">
<button class="btn full btn-small btn-green">Button</button>
</li>
<li class="table-tabs__item">
<button class="btn full btn-small btn-red">Button</button>
</li>
<li class="table-tabs__item">
<button class="btn full btn-small btn-blue">Button</button>
</li>
<li class="table-tabs__item">
<button class="btn full btn-small btn-light-grey">Button</button>
</li>
<li class="table-tabs__item">
<button class="btn full btn-small btn-yellow">Button</button>
</li>
<li class="table-tabs__item">
<button class="btn full btn-small btn-orange">Button</button>
</li>
</ul>
</div>
<div class="grid6">
<pre class=" language-markup"><code class="language-markup"><!-- Make equal width elems -->
<ul class="table-tabs">
<li class="table-tabs__item"></li>
<li class="table-tabs__item"></li>
<li class="table-tabs__item"></li>
<li class="table-tabs__item"></li>
<li class="table-tabs__item"></li>
</ul></code>
</pre>
</div>
</div> <!-- /SVG -->
<h2 class="center mtop100" id="colors"><a href="#colors">Color variables</a></h2>
<div class="fluid">
<div class="grid8 offset2">
<p>This project borns with a set of colors to apply to the most of components (like buttons, alerts, loaders, switchs, checkboxes & radios, lists, etc).</p>
<p>Here are the initial list of colors:</p>
<div class="fluid">
<div class="grid4">
<p class="small">The greys</p>
<ul class="ul">
<li>
<div class="ul-thumb dark-grey"></div>
<div class="ul-body"><p class="small"><code> dark-grey </code></p></div>
</li>
<li>
<div class="ul-thumb middle-grey"></div>
<div class="ul-body"><p class="small"><code> middle-grey </code></p></div>
</li>
<li>
<div class="ul-thumb light-grey"></div>
<div class="ul-body"><p class="small"><code> light-grey </code></p></div>
</li>
<li>
<div class="ul-thumb super-light"></div>
<div class="ul-body"><p class="small"><code> super-light </code></p></div>
</li>
</ul>
</div>
<div class="grid4">
<p class="small">Company colors</p>
<ul class="ul">
<li>
<div class="ul-thumb blue"></div>
<div class="ul-body"><p class="small"><code> blue </code></p></div>
</li>
<li>
<div class="ul-thumb orange"></div>
<div class="ul-body"><p class="small"><code> orange </code></p></div>
</li>
<li>
<div class="ul-thumb green"></div>
<div class="ul-body"><p class="small"><code> green </code></p></div>
</li>
<li>
<div class="ul-thumb skyblue"></div>
<div class="ul-body"><p class="small"><code> skyblue </code></p></div>
</li>
</ul>
</div>
<div class="grid4">
<p class="small">More colors</p>
<ul class="ul">
<li>
<div class="ul-thumb red"></div>
<div class="ul-body"><p class="small"><code> red </code></p></div>
</li>
<li>
<div class="ul-thumb yellow"></div>
<div class="ul-body"><p class="small"><code> yellow </code></p></div>
</li>
<li>
<div class="ul-thumb emerald"></div>
<div class="ul-body"><p class="small"><code> emerald </code></p></div>
</li>
<li>
<div class="ul-thumb amethyst"></div>
<div class="ul-body"><p class="small"><code> amethyst </code></p></div>
</li>
<li>
<div class="ul-thumb nblue"></div>
<div class="ul-body"><p class="small"><code> nblue </code></p></div>
</li>
<li>
<div class="ul-thumb asphalt"></div>
<div class="ul-body"><p class="small"><code> asphalt </code></p></div>
</li>
</ul>
</div>
</div>
<h3>Usage</h3>
<p class="mtop10">You could apply this just adding a class to the base component<br> i.e. <small><code class="language-markup"><div class="ul-thumb asphalt"></div></code></small> or <small><code class="language-markup"><hr class="blue"></code></small></p>
<p>Note that in some cases (to avoid conflicts) it is necessary to add a prexif like <small><code class="language-markup"><div class="alert alert-skyblue">Skyblue alert</div></code></small> or <small><code class="language-markup"><button class="btn btn-blue">Blue button</button></code></small></p>
<h3 class="mtop20">New colors</h3>
<p>You could also add new colors to the <small><code>$colors</code></small> list in the <small><code>base/_colors.scss</code></small> file and automatically (after compiling) you have new classes to add with and without prefixes. ie. If I add a color item to the sass list like <small><code class="language-scss">"newRed" #fe2e2e;</code></small>, after compiling I'll have the ability to apply like <small><code class="language-markup"><button class="btn btn-newRed">newRed button</button></code></small> or <small><code class="language-markup"><div class="loader newRed"></div></code></small></p>
<h3 class="mtop20">Components colorizables</h3>
<p>
All these components and classes are the ability to change color adding/modifiying a class where 'color' it'll be replaced with specific color:
</p>
<div class="accordion">
<div>
<input class="step-chk" id="colors-1" type="checkbox">
<label for="colors-1" class="accordion-title light-grey center">Text</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1 center">
<pre class="language-markup"><code class="language-markup"><p class="text-red">some text red</p></code></pre>
<p class="text-red">some text red</p>
<hr>
<a href="#more-text">More on text styles</a>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-2" type="checkbox">
<label for="colors-2" class="accordion-title light-grey center">Background</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1 center">
<pre class="language-markup"><code class="language-markup"><div class="bg-yellow">
elem with bg yellow
</div></code></pre>
<div class="bg-yellow">elem with bg yellow</div>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-3" type="checkbox">
<label for="colors-3" class="accordion-title light-grey center">Buttons</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1 center">
<pre class="language-markup"><code class="language-markup"><a class="btn btn-green">Button green</a></code></pre>
<a class="btn btn-green">Button green</a>
<hr>
<a href="#btn-color">More on button colors</a>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-4" type="checkbox">
<label for="colors-4" class="accordion-title light-grey center">Button icon circle</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1 center">
<pre class="language-markup"><code class="language-markup"><a class="btn-icon-circle blue">@</a></code></pre>
<div class="btn-icon-circle blue">@</div>
<hr>
<a href="#icon-circle-color">More on icon circle button colors</a>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-5" type="checkbox">
<label for="colors-5" class="accordion-title light-grey center">Checkboxes & Radios</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1 center">
<pre class="language-markup"><code class="language-markup"><input type="radio" class="custom-radio">
<label for="" class="red">Radio red</label>
<input type="checkbox" class="custom-checkbox">
<label for="" class="amethyst">Checkbox amethyst</label></code></pre>
<input type="radio" class="custom-radio" id="cr" checked>
<label for="cr" class="red text-middle-grey">Radio red</label>
<input type="checkbox" class="custom-checkbox" id="cc" checked>
<label for="cc" class="amethyst text-middle-grey">Checkbox amethyst</label>
<hr>
<a href="#checkbox-radio">More on custom checkboxes & radio buttons</a>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-6" type="checkbox">
<label for="colors-6" class="accordion-title light-grey center">List</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1">
<pre class="language-markup"><code class="language-markup"><div class="list orange">
<div class="list-thumb">
<i class="icon-home"></i>
</div>
<div class="list-body">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div></code></pre>
<div class="list orange">
<div class="list-thumb"><i class="icon-home"></i></div>
<div class="list-body">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<hr>
<div class="center">
<a href="#list">More on lists</a>
</div>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-7" type="checkbox">
<label for="colors-7" class="accordion-title light-grey center">ul</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1">
<pre class="language-markup"><code class="language-markup"><ul class="ul blue">
<li>
<div class="ul-thumb">
<strong>1</strong>
</div>
<div class="ul-body">
<p>blue item 1</p>
</div>
</li>
<!-- /more li-->
</ul>
<ul class="ul">
<li>
<div class="ul-thumb red">
<strong>A</strong>
</div>
<div class="ul-body">
<p>ul thumb red</p>
</div>
</li>
</ul></code></pre>
<ul class="ul blue">
<li>
<div class="ul-thumb">
<strong>1</strong>
</div>
<div class="ul-body">
<p>blue ul item 1</p>
</div>
</li>
<li>
<div class="ul-thumb">
<strong>2</strong>
</div>
<div class="ul-body">
<p>blue ul item 2</p>
</div>
</li>
</ul>
<ul class="ul">
<li>
<div class="ul-thumb red">
<strong>A</strong>
</div>
<div class="ul-body">
<p>ul thumb red</p>
</div>
</li>
<li>
<div class="ul-thumb green">
<strong>B</strong>
</div>
<div class="ul-body">
<p>ul thumb green</p>
</div>
</li>
</ul>
<hr>
<div class="center">
<a href="#ul">More on ul</a>
</div>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-8" type="checkbox">
<label for="colors-8" class="accordion-title light-grey center">Photo sldier (text)</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1">
<pre class="language-markup"><code class="language-markup"><div class="photo-slider-demo">
<div class="photo-slide">
<figure class="slide-image" id="slide-demo-1"></figure>
<div class="slide-text slide-text-left">
<h1 class="stext yellow">Lorem ipsum dolor.</h1><br>
<h3 class="stext middle-grey">Lorem ipsum dolor sit amet.</h3>
</div>
</div>
</div></code></pre>
<hr>
<div class="center">
<a href="#slider">More on photo sldier</a>
</div>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-9" type="checkbox">
<label for="colors-9" class="accordion-title light-grey center">Accordion tab</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1">
<pre class="language-markup"><code class="language-markup"><div class="accordion">
<div>
<input class="step-chk" id="" type="checkbox">
<label for="" class="accordion-title orange">
Accordion Tab Orange
</label>
<div class="ac-content">
Lorem ipsum dolor sit amet.
</div>
</div>
</div></code></pre>
<div class="accordion">
<div>
<input class="step-chk" id="ac-color" name="accordion-1" type="checkbox">
<label for="ac-color" class="accordion-title orange">Accordion Tab Orange</label>
<div class="ac-content">
<div class="fluid mtop10">
<div class="grid10 offset1">
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet dolores aliquid quam unde sequi omnis ut dignissimos quidem magni? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, perferendis, sequi. Amet perferendis unde dolor nemo enim consequatur cupiditate eum.
</p>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="center">
<a href="#accordion">More on accordion</a>
</div>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-10" type="checkbox">
<label for="colors-10" class="accordion-title light-grey center">Badges</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1 center">
<pre class="language-markup"><code class="language-markup"><button class="btn btn-small btn-dark-grey">
<i class="icon-envelope"></i>Emails
<span class="badge badge-green">1</span>
</button></code></pre>
<button class="btn btn-small btn-dark-grey">
<i class="icon-envelope"></i>Emails
<span class="badge badge-green">1</span>
</button>
<hr>
<div class="center">
<a href="#badge">More on badge</a>
</div>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-11" type="checkbox">
<label for="colors-11" class="accordion-title light-grey center">Switches</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1 center">
<pre class="language-markup"><code class="language-markup"><input type="checkbox" class="sw" id="sw-color" checked="">
<label class="switch red" for="sw-color"></label></code></pre>
<input type="checkbox" class="sw" id="sw-color" checked="">
<label class="switch red" for="sw-color"></label>
<hr>
<div class="center">
<a href="#switch">More on switch</a>
</div>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-12" type="checkbox">
<label for="colors-12" class="accordion-title light-grey center">Alerts</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1 center">
<pre class="language-markup"><code class="language-markup"><div class="alert alert-amethyst">
.alert-amethyst
</div></code></pre>
<div class="alert alert-amethyst">.alert-amethyst</div>
<hr>
<div class="center">
<a href="#alert">More on alert</a>
</div>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-13" type="checkbox">
<label for="colors-13" class="accordion-title light-grey center">Tooltips</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1 center">
<pre class="language-markup"><code class="language-markup"><button class="btn btn-middle-grey btn-small ttip ttip-green" data-ttip="Tooltip green">
hover me
</button></code></pre>
<button class="btn btn-middle-grey btn-small ttip ttip-green" data-ttip="Tooltip green">hover me</button>
<hr>
<div class="center">
<a href="#tooltip">More on tooltip</a>
</div>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-14" type="checkbox">
<label for="colors-14" class="accordion-title light-grey center">Loader</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1 center">
<pre class="language-markup"><code class="language-markup"><div class="loader skyblue"></div></code></pre>
<div class="loader skyblue"></div>
<hr>
<div class="center">
<a href="#loader">More on loader</a>
</div>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-15" type="checkbox">
<label for="colors-15" class="accordion-title light-grey center">Bubble</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1 center">
<pre class="language-markup"><code class="language-markup"><button class="btn… bubble-top bubble-green">
Bubble green
</button></code></pre>
<button class="btn btn-green bubble-bottom bubble-green">Bubble green</button>
<hr>
<div class="center">
<a href="#bubble">More on bubble</a>
</div>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-16" type="checkbox">
<label for="colors-16" class="accordion-title light-grey center">HR</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1 center">
<pre class="language-markup"><code class="language-markup"><hr class="yellow"></code></pre>
<hr class="yellow">
<hr>
<div class="center">
<a href="#hr">More on HR</a>
</div>
</div>
</div>
</div>
</div>
<div>
<input class="step-chk" id="colors-17" type="checkbox">
<label for="colors-17" class="accordion-title light-grey center">Items</label>
<div class="ac-content">
<div class="fluid mtop10 mbottom10">
<div class="grid10 offset1 center">
<pre class="language-markup"><code class="language-markup"><ul class="items">
<li class="green">Lorem ipsum dolor</li>
<li class="yellow">Sit amet</li>
<li class="nblue">Qui libero</li>
</ul></code></pre>
<ul class="items">
<li class="green">Lorem ipsum dolor</li>
<li class="yellow">Sit amet</li>
<li class="nblue">Qui libero</li>
</ul>
<hr>
<div class="center">
<a href="#items">More on Items</a>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /comps colorizables accordion -->
<p class="mtop30">You could also "colorize" any other component just adding the <small><code class="language-scss">@mixin colorize()</code></small> under <code>base/_mixin.scss</code></p>
</div>
</div>
<div class="fluid mtop100" id="download">
<div class="grid12">
<p class="center">Hope you'll enjoy it, use it and improve it!</p>
<div class="fluid mtop10">
<div class="grid6">
<div class="center">
<a href="css/bm.css" class="btn btn-green bubble-bottom bubble-green">Download bm.css</a>
</div>
<p class="mtop20">Here you could download the compressed css file to use it in your project.</p>
<p>Include the script and enjoy it! <small><code class="language-markup"><link rel="stylesheet" href="css/bm.css"></code></small></p>
<hr>
<p class="small center">or download the <a href="css/bm.min.css">bm.mincss</a></p>
</div>
<div class="grid6">
<div class="center">
<a href="https://github.com/elrumordelaluz/newbancomail" class="btn btn-blue bubble-bottom bubble-blue">Download .scss project</a>
</div>
<p class="mtop20">Download or fork the project on <i class="icon-github"></i> github to customize the package based on your own needs. Edit the @mixins, change the $variables and so on...</p>
</div>
</div>
</div>
</div> <!-- /Download -->
<div class="fluid mtop100">
<div class="grid12">
</div>
</div>
</div> <!-- /wrapper -->
</div> <!-- /demo-content -->
</div> <!-- /demo-container -->
<footer class="footer">
<div class="footer-logo">
<div class="flogo">
</div>
</div> <!-- /footer-logo -->
<div class="wrapper">
<div class="fluid ">
<div class="grid3 mtop30">
<p class="small text-light-grey">Documentation made with <code>bm.css</code> library and <a href="http://prismjs.com/"><code>prismjs</code></a> by <a href="https://twitter.com/LeaVerou">@LeaVerou</a> for syntax highlighting.</p>
</div>
<div class="grid6 mtop30">
<p class="small text-light-grey">Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at</p>
<p class="small text-white"><a href="https://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a></p>
<p class="small text-light-grey">Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.</p>
</div>
<div class="grid3 mtop30">
<a href="https://github.com/elrumordelaluz/newbancomail" class="btn full btn-small btn-middle-grey">Fork on Github</a>
<p class="small center mtop20">
<a class="text-light-grey" href="https://twitter.com/elrumordelaluz">Follow @elrumordelaluz</a>
</p>
</div>
</div>
<div class="copy">
© Copyright 2014 Neosoft Srl - Bancomail
</div>
</div>
</footer>
<a href="#" class="back" style="display: block;" title="back to top">
<i>↑</i>
</a>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js'></script>
<script >// Project page: https://elrumordelaluz.github.io/newbancomail/
//# sourceURL=pen.js
</script>
</body></html>
