bower_components/neat/contrib/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Have fun ❤︎</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="welcome-message" role="banner">
<div class="container">
<h1 class="welcome-message-title">
Hey there! Thanks for contributing to
<a href="http://neat.bourbon.io">Neat</a>.
</h1>
<p>
The purpose of this page is to help contributors view and test
changes to Neat.
</p>
</div>
</header>
<main role="main">
<h3>Basic</h3>
<section class="page-section zero">
<code>@include outer-container;</code>
<div class="page-section-inner zero-alpha">
<code>@include span-columns(6);</code>
</div>
<div class="page-section-inner zero-beta">
<code>@include span-columns(6);</code>
</div>
</section>
<h3>Multiple rows</h3>
<section class="page-section first">
<code>@include outer-container;</code>
<div class="page-section-inner first-alpha">
<code>(1)</code>
</div>
<div class="page-section-inner first-beta">
<code>
@include span-columns(11);<br>
@include omega();
</code>
</div>
<div class="page-section-inner first-gamma">
<code>
@include span-columns(2);
</code>
</div>
<div class="page-section-inner first-delta">
<code>
@include span-columns(10);<br>
@include omega();
</code>
</div>
<div class="page-section-inner first-epsilon">
<code>
@include span-columns(3);
</code>
</div>
<div class="page-section-inner first-zeta">
<code>
@include span-columns(9);<br>
@include omega();
</code>
</div>
<div class="page-section-inner first-eta">
<code>
@include span-columns(4);
</code>
</div>
<div class="page-section-inner first-theta">
<code>
@include span-columns(8);<br>
@include omega();
</code>
</div>
<div class="page-section-inner first-iota">
<code>
@include span-columns(5);
</code>
</div>
<div class="page-section-inner first-kappa">
<code>
@include span-columns(7);<br>
@include omega();
</code>
</div>
<div class="page-section-inner first-lambda">
<code>
@include span-columns(6);
</code>
</div>
<div class="page-section-inner first-mu">
<code>
@include span-columns(6);<br>
@include omega();
</code>
</div>
</section>
<h3>Nesting columns</h3>
<section class="page-section second">
<code>@include outer-container;</code>
<div class="page-section-inner second-alpha">
<code>@include span-columns(4);</code>
</div>
<div class="page-section-inner second-beta">
<code class="block">@include span-columns(8);</code>
<aside class="second-beta-alpha">
<code>@include span-columns(4 of 8);</code>
</aside>
<article class="second-beta-beta">
<code>@include span-columns(4 of 8);</code>
</article>
</div>
</section>
<h3>Table grid</h3>
<section class="page-section third">
<code>@include outer-container;</code>
<div class="page-section-inner third-dummy">
<code>
@include fill-parent();<br>
@include row(table);
</code>
</div>
<div class="page-section-inner third-alpha">
<aside class="third-alpha-alpha">
<code>
@include span-columns(4);<br>
@include pad();
</code>
</aside>
<article class="third-alpha-beta">
<code>
@include span-columns(8);<br>
@include reset-display;
</code>
</article>
</div>
</section>
<h3>Shifting columns</h3>
<section class="page-section fourth">
<code>@include outer-container;</code>
<div class="page-section-inner fourth-alpha">
<code>
@include span-columns(6);<br>
@include shift(3);
</code>
</div>
</section>
<h3>Automatic rows</h3>
<div class="code">
<code>@include outer-container;</code>
</div>
<section class="page-section fifth">
<div class="box">
<pre>
.box {
@include span-columns(3);
@include omega(4n);
}
</pre>
</div>
<div class="fifth-box page-section-inner">
<code>.box</code>
</div>
<div class="fifth-box page-section-inner">
<code>.box</code>
</div>
<div class="fifth-box page-section-inner">
<code>.box</code>
</div>
<div class="fifth-box page-section-inner">
<code>.box</code>
</div>
<div class="fifth-box page-section-inner">
<code>.box</code>
</div>
<div class="fifth-box page-section-inner">
<code>.box</code>
</div>
<div class="fifth-box page-section-inner">
<code>.box</code>
</div>
<div class="fifth-box page-section-inner">
<code>.box</code>
</div>
<div class="fifth-box page-section-inner">
<code>.box</code>
</div>
<div class="fifth-box page-section-inner">
<code>.box</code>
</div>
<div class="fifth-box page-section-inner">
<code>.box</code>
</div>
</section>
<h3>Media Queries</h3>
<section class="page-section sixth">
<pre>
@include outer-container;
$mobile: new-breakpoint(max-width 500px 4);
</pre>
<div class="page-section-inner sixth-alpha">
<pre>
@include span-columns(4);
@include media($mobile) {
@include span-columns(3);
}
</pre>
</div>
<div class="page-section-inner sixth-beta">
<pre>
@include span-columns(8);
@include media($mobile) {
@include span-columns(3);
}
</pre>
</div>
</section>
</main>
</body>
</html>