flexboxgrid

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Flexbox Grid</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>   </style> <script> function loadCSS( href, before, media, callback ){ "use strict"; var ss = window.document.createElement( "link" ); var ref = before || window.document.getElementsByTagName( "script" )[ 0 ]; var sheets = window.document.styleSheets; ss.rel = "stylesheet"; ss.href = href; ss.media = "only x"; ref.parentNode.insertBefore( ss, ref ); ss.onloadcssdefined = function( cb ){ var defined; for( var i = 0; i < sheets.length; i++ ){ if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){ defined = true; } } if( defined ){ cb(); } else { setTimeout(function() { ss.onloadcssdefined( cb ); }); } }; ss.onloadcssdefined(function() { ss.media = media || "all"; }); return ss; } loadCSS( "//kristoferjoseph.com/font/bold.css" ); </script> <noscript><link href="//kristoferjoseph.com/font/bold.css" rel="stylesheet"></noscript> </head> <body class="layout"> <div class="page js-page"> <header class="hero"> <div class="row center-xs"> <h1 class="hero-headline">Flexbox Grid</h1> </div> <div class="row center-xs"> <p class="hero-copy">A grid system based on the <a href="http://caniuse.com/#search=flexbox"><code class="inline-anchor">flex</code></a> display property.</p> </div> <div class="row center-xs"> <a class="button invisible-xs visible-md" href="https://github.com/kristoferjoseph/flexboxgrid/archive/v6.3.1.zip">Download</a> <a class="button" href="https://github.com/kristoferjoseph/flexboxgrid">Github</a> </div> </header> <div class="wrap container-fluid"> <a name="responsive"></a> <section class="page-section"> <h2>Responsive</h2> <p>Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.</p> <div class="row"> <div class="col-xs-12 col-sm-3 col-md-2 col-lg-1"> <div class="box-row"></div> </div> <div class="col-xs-6 col-sm-6 col-md-8 col-lg-10"> <div class="box-row"></div> </div> <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-3 col-md-2 col-lg-1"> <div class="box-row"></div> </div> <div class="col-xs-12 col-sm-9 col-md-10 col-lg-11"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-10 col-sm-6 col-md-8 col-lg-10"> <div class="box-row"></div> </div> <div class="col-xs-2 col-sm-6 col-md-4 col-lg-2"> <div class="box-row"></div> </div> </div> <pre><code><div class="row"> <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4"> <div class="box">Responsive</div> </div> </div></code></pre> </section> <a name="fluid"></a> <section class="page-section"> <br> <h2>Fluid</h2> <p>Percent based widths allow fluid resizing of columns and rows.</p> <div class="row"> <div class="col-xs-12"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-1"> <div class="box-row"></div> </div> <div class="col-xs-11"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-2"> <div class="box-row"></div> </div> <div class="col-xs-10"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-3"> <div class="box-row"></div> </div> <div class="col-xs-9"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-4"> <div class="box-row"></div> </div> <div class="col-xs-8"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-5"> <div class="box-row"></div> </div> <div class="col-xs-7"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-6"> <div class="box-row"></div> </div> <div class="col-xs-6"> <div class="box-row"></div> </div> </div> <pre><code>.col-xs-6 { flex-basis: 50%; }</code></pre> </section> <a name="syntax"></a> <section class="page-section"> <h2>Simple Syntax</h2> <p>All you need to remember is row, column, content.</p> <pre><code><div class="row"> <div class="col-xs-12"> <div class="box">12</div> </div> </div></code></pre> </section> <a name="offsets"></a> <section class="page-section"> <h2>Offsets</h2> <p>Offset a column</p> <div class="row"> <div class="col-xs-offset-11 col-xs-1"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-offset-10 col-xs-2"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-offset-9 col-xs-3"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-offset-8 col-xs-4"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-offset-7 col-xs-5"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-offset-6 col-xs-6"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-offset-5 col-xs-7"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-offset-4 col-xs-8"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-offset-3 col-xs-9"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-offset-2 col-xs-10"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs-offset-1 col-xs-11"> <div class="box-row"></div> </div> </div> <pre><code><div class="row"> <div class="col-xs-offset-3 col-xs-9"> <div class="box">offset</div> </div> </div></code></pre> </section> <a name="auto"></a> <section class="page-section"> <h2>Auto Width</h2> <p>Add any number of auto sizing columns to a row. Let the grid figure it out.</p> <div class="row"> <div class="col-xs"> <div class="box-row"></div> </div> <div class="col-xs"> <div class="box-row"></div> </div> </div> <div class="row"> <div class="col-xs"> <div class="box-row"></div> </div> <div class="col-xs"> <div class="box-row"></div> </div> <div class="col-xs"> <div class="box-row"></div> </div> </div> <pre><code><div class="row"> <div class="col-xs"> <div class="box">auto</div> </div> </div></code></pre> </section> <a name="nested"></a> <section class="page-section"> <h2>Nested Grids</h2> <p>Nest grids inside grids inside grids.</p> <div class="row"> <div class="col-xs-7"> <div class="box box-container"> <div class="row"> <div class="col-xs-9"> <div class="box-first box-container"> <div class="row"> <div class="col-xs-4"> <div class="box-nested"></div> </div> <div class="col-xs-8"> <div class="box-nested"></div> </div> </div> </div> </div> <div class="col-xs-3"> <div class="box-first box-container"> <div class="row"> <div class="col-xs"> <div class="box-nested"></div> </div> </div> </div> </div> </div> </div> </div> <div class="col-xs-5"> <div class="box box-container"> <div class="row"> <div class="col-xs-12"> <div class="box-first box-container"> <div class="row"> <div class="col-xs-6"> <div class="box-nested"></div> </div> <div class="col-xs-6"> <div class="box-nested"></div> </div> </div> </div> </div> </div> </div> </div> </div> <pre><code><div class="row"> <div class="col-xs"> <div class="box"> <div class="row"> <div class="col-xs"> <div class="box">auto</div> </div> </div> </div> </div> </div></code></pre> </section> <a name="alignment"></a> <section class="page-section"> <h2>Alignment</h2> <p>Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column</p> <h3><code>.start-</code></h3> <div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row start-xs"> <div class="col-xs-6"> <div class="box-nested"></div> </div> </div> </div> </div> </div> <pre><code><div class="row start-xs"> <div class="col-xs-6"> <div class="box"> start </div> </div> </div> </code></pre> <h3><code>.center-</code></h3> <div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row center-xs"> <div class="col-xs-6"> <div class="box-nested"></div> </div> </div> </div> </div> </div> <pre><code><div class="row center-xs"> <div class="col-xs-6"> <div class="box"> start </div> </div> </div> </code></pre> <h3><code>.end-</code></h3> <div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row end-xs"> <div class="col-xs-6"> <div class="box-nested"></div> </div> </div> </div> </div> </div> <pre><code><div class="row end-xs"> <div class="col-xs-6"> <div class="box"> end </div> </div> </div> </code></pre> <p>Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes. </p> <div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row center-xs end-sm start-lg"> <div class="col-xs-6"> <div class="box-nested"></div> </div> </div> </div> </div> </div>Example <pre><code><div class="row center-xs end-sm start-lg"> <div class="col-xs-6"> <div class="box"> All together now </div> </div> </div> </code></pre> <h3><code>.top-</code></h3> <div class="row top-xs"> <div class="col-xs-6"> <div class="box-large"></div> </div> <div class="col-xs-6"> <div class="box"></div> </div> </div> <pre><code><div class="row top-xs"> <div class="col-xs-6"> <div class="box"> top </div> </div> </div> </code></pre> <h3><code>.middle-</code></h3> <div class="row middle-xs"> <div class="col-xs-6"> <div class="box-large"></div> </div> <div class="col-xs-6"> <div class="box"></div> </div> </div> <pre><code><div class="row middle-xs"> <div class="col-xs-6"> <div class="box"> center </div> </div> </div> </code></pre> <h3><code>.bottom-</code></h3> <div class="row bottom-xs"> <div class="col-xs-6"> <div class="box-large"></div> </div> <div class="col-xs-6"> <div class="box"></div> </div> </div> <pre><code><div class="row bottom-xs"> <div class="col-xs-6"> <div class="box"> bottom </div> </div> </div> </code></pre> </section> <a name="distribution"></a> <section class="page-section"> <h2>Distribution</h2> <p>Add classes to distribute the contents of a row or column.</p> <h3><code>.around-</code></h3> <div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row around-xs"> <div class="col-xs-2"> <div class="box-nested"></div> </div> <div class="col-xs-2"> <div class="box-nested"></div> </div> <div class="col-xs-2"> <div class="box-nested"></div> </div> </div> </div> </div> </div> <pre><code><div class="row around-xs"> <div class="col-xs-2"> <div class="box"> around </div> </div> <div class="col-xs-2"> <div class="box"> around </div> </div> <div class="col-xs-2"> <div class="box"> around </div> </div> </div> </code></pre> <h3><code>.between-</code></h3> <div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row between-xs"> <div class="col-xs-2"> <div class="box-nested"></div> </div> <div class="col-xs-2"> <div class="box-nested"></div> </div> <div class="col-xs-2"> <div class="box-nested"></div> </div> </div> </div> </div> </div> <pre><code><div class="row between-xs"> <div class="col-xs-2"> <div class="box"> between </div> </div> <div class="col-xs-2"> <div class="box"> between </div> </div> <div class="col-xs-2"> <div class="box"> between </div> </div> </div> </code></pre> </section> <a name="reordering"></a> <section class="page-section"> <h2>Reordering</h2> <p>Add classes to reorder columns.</p> <h3><code>.first-</code></h3> <div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row"> <div class="col-xs-2"> <div class="box-first">1</div> </div> <div class="col-xs-2"> <div class="box-first">2</div> </div> <div class="col-xs-2"> <div class="box-first">3</div> </div> <div class="col-xs-2"> <div class="box-first">4</div> </div> <div class="col-xs-2"> <div class="box-first">5</div> </div> <div class="col-xs-2 first-xs"> <div class="box-nested">6</div> </div> </div> </div> </div> </div> <pre><code><div class="row"> <div class="col-xs-2"> <div class="box"> 1 </div> </div> <div class="col-xs-2"> <div class="box"> 2 </div> </div> <div class="col-xs-2 first-xs"> <div class="box"> 3 </div> </div> </div> </code></pre> <h3><code>.last-</code></h3> <div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row"> <div class="col-xs-2 last-xs"> <div class="box-nested">1</div> </div> <div class="col-xs-2"> <div class="box-first">2</div> </div> <div class="col-xs-2"> <div class="box-first">3</div> </div> <div class="col-xs-2"> <div class="box-first">4</div> </div> <div class="col-xs-2"> <div class="box-first">5</div> </div> <div class="col-xs-2"> <div class="box-first">6</div> </div> </div> </div> </div> </div> <pre><code><div class="row"> <div class="col-xs-2 last-xs"> <div class="box"> 1 </div> </div> <div class="col-xs-2"> <div class="box"> 2 </div> </div> <div class="col-xs-2"> <div class="box"> 3 </div> </div> </div> </code></pre> </section> <a name="reversing"></a> <section class="page-section"> <h2>Reversing</h2> <h3><code>.reverse</code></h3> <div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row reverse"> <div class="col-xs-2"> <div class="box-nested">1</div> </div> <div class="col-xs-2"> <div class="box-nested">2</div> </div> <div class="col-xs-2"> <div class="box-nested">3</div> </div> <div class="col-xs-2"> <div class="box-nested">4</div> </div> <div class="col-xs-2"> <div class="box-nested">5</div> </div> <div class="col-xs-2"> <div class="box-nested">6</div> </div> </div> </div> </div> </div> <pre><code><div class="row reverse"> <div class="col-xs-2"> <div class="box"> 1 </div> </div> <div class="col-xs-2"> <div class="box"> 2 </div> </div> <div class="col-xs-2"> <div class="box"> 3 </div> </div> </div> </code></pre> </section> <footer class="page-footer"> <div class="row"> <div class="col-xs start"> <a class="tag" href="http://twitter.com/dam"> @dam ♡s you </a> </div> <div class="col-xs end"> <a class="link-top" href="#top">⇪ back to top</a> </div> </div> </footer> </div> </div> <script> (function() { document.addEventListener('DOMContentLoaded', function(e) { var code = document.createElement('script'); code.src = 'js/index.js'; var script = document.getElementsByTagName('script')[0]; script.parentNode.insertBefore(code, script); }); }()); </script> </body> </html>