@drewbot/sass-flexbox-grid
Version:
A responsive sass grid library built with flexbox
353 lines (320 loc) • 12.7 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sass Flexbox Grid</title>
<script src="https://use.fontawesome.com/e00da74127.js"></script>
<link rel="apple-touch-icon" sizes="57x57" href="/images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Place favicon.ico in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="/bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav>
<div class="row between-xs content-block">
<div>
<a href="/">
<i class="fa fa-home" aria-hidden="true"></i>
</a>
</div>
<div>
<a href="https://github.com/drewbot/sass-flexbox-grid/raw/master/public/sass-flexbox.zip">
<button><i class="fa fa-download" aria-hidden="true"></i><span class="hide-xs-only"> Download</span></button>
</a>
</div>
<div>
<a href="views/documentation.html">
<button><i class="fa fa-book" aria-hidden="true"></i><span class="hide-xs-only"> Documentation</span></button>
</a>
</div>
<div>
<a href="https://github.com/drewbot/sass-flexbox-grid">
<button><i class="fa fa-github" aria-hidden="true"></i><span class="hide-xs-only"> Github</span></button>
</a>
</div>
<div id="menuOpen">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</nav>
<div id="menu">
<i id="menuClose" class="fa fa-window-close-o close" aria-hidden="true"></i>
<ul>
<li>
<a href="/">Overview</a>
</li>
<li>
<a href="views/documentation.html">Documentation</a>
</li>
<li>
<a href="views/classes.html">Classes</a>
</li>
<li>
<a href="views/variables.html">Variables</a>
</li>
<li>
<a href="views/mixins.html">Mixins</a>
</li>
</ul>
</div>
<div id="view-home" class="">
<header>
<div class="row center-xs content-block">
<div class="col-xs-12 col-md-8">
<h1>Sass Flexbox Grid</h1>
<p>
A responsive grid system based on <a href="http://flexboxgrid.com/">Flexbox Grid</a> and the flex property, re-written in Sass, edited and expanded upon.
</p>
<ul class="features-list">
<li>Visibility classes,</li>
<li>Additional 'XL' breakpoint,</li>
<li>Sass variables and mixins,</li>
<li>Customizable grid</li>
</ul>
</div>
</div>
</header>
<section id="responsive">
<div class="row example">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1"></div>
<div class="col-xs-6 col-sm-6 col-md-8 col-lg-10"></div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1"></div>
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1"></div>
<div class="col-xs-12 col-sm-9 col-md-10 col-lg-11"></div>
<div class="col-xs-10 col-sm-6 col-md-8 col-lg-10"></div>
<div class="col-xs-2 col-sm-6 col-md-4 col-lg-2"></div>
</div>
</section>
<section id="offsets">
<div class="row example">
<div class="col-xs-offset-10 col-xs-2"></div>
<div class="col-xs-offset-8 col-xs-4"></div>
<div class="col-xs-offset-6 col-xs-6"></div>
<div class="col-xs-offset-4 col-xs-8"></div>
<div class="col-xs-offset-2 col-xs-10"></div>
<div class="col-xs-12"></div>
</div>
</section>
<section id="autoWidth">
<div class="row example">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row example">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</section>
<section id="alignment">
<div class="row start-xs example">
<div class="col-xs-6">
<h4>.start-xs</h4>
</div>
</div>
<div class="row center-xs example">
<div class="col-xs-6">
<h4>.center-xs</h4>
</div>
</div>
<div class="row end-xs example">
<div class="col-xs-6">
<h4>.end-xs</h4>
</div>
</div>
<div class="row center-xs end-sm start-md example">
<div class="col-xs-8">
<h4>.center-xs, .end-sm, .start-md</h4>
</div>
</div>
<div class="row example">
<div class="col-xs" style="height: 100px;">
<div class="row top-xs">
<div class="col-xs"><h4>.top-xs</h4></div>
</div>
</div>
</div>
<div class="row example">
<div class="col-xs" style="height: 100px;">
<div class="row middle-xs">
<div class="col-xs"><h4>.middle-xs</h4></div>
</div>
</div>
</div>
<div class="row example">
<div class="col-xs" style="height: 100px;">
<div class="row bottom-xs">
<div class="col-xs"><h4>.bottom-xs</h4></div>
</div>
</div>
</div>
</section>
<section id="distribution">
<div class="row example">
<div class="col-xs-12">
<div class="row around-xs">
<div class="col-xs-2"><h4>.around-xs</h4></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
</div>
</div>
</div>
<div class="row example">
<div class="col-xs-12">
<div class="row between-xs">
<div class="col-xs-2"><h4>.between-xs</h4></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
</div>
</div>
</div>
</section>
<section id="reorder">
<div class="row example">
<div class="col-xs-2"><h4>1</h4></div>
<div class="col-xs-2"><h4>2</h4></div>
<div class="col-xs-2 first-xs"><h4>3 (.first-xs)</h4></div>
<div class="col-xs-2"><h4>4</h4></div>
<div class="col-xs-2"><h4>5</h4></div>
<div class="col-xs-2"><h4>6</h4></div>
</div>
<div class="row example">
<div class="col-xs-2"><h4>1</h4></div>
<div class="col-xs-2"><h4>2</h4></div>
<div class="col-xs-2 last-xs"><h4>3 (.last-xs)</h4></div>
<div class="col-xs-2"><h4>4</h4></div>
<div class="col-xs-2"><h4>5</h4></div>
<div class="col-xs-2"><h4>6</h4></div>
</div>
</section>
<section id="reverse">
<div class="row reverse example">
<div class="col-xs"><h4>1</h4></div>
<div class="col-xs"><h4>2</h4></div>
<div class="col-xs"><h4>3</h4></div>
</div>
</section>
<section id="eqHeight">
<div class="row example hide-xs-only">
<div class="col"><p>They never said winning was easy.</p></div>
<div class="col"><p>Another one. It’s on you how you want to live your life. Everyone has a choice. I pick my choice, squeaky clean. They don’t want us to eat. The first of the month is coming, we have to get money, we have no choice. Some people can’t handle success, I can. </p></div>
<div class="col"><p>The key to more success is to get a massage once a week, very important, major key, cloth talk.</p></div>
</div>
</section>
<section id="nested">
<div class="row example">
<div class="col-xs">
<div class="row">
<div class="col-xs"></div>
<div class="col-xs"></div>
</div>
</div>
<div class="col-xs">
<div class="row">
<div class="col-xs"></div>
<div class="col-xs"></div>
<div class="col-xs"></div>
<div class="col-xs"></div>
</div>
</div>
<div class="col-xs">
<div class="row">
<div class="col-xs"></div>
<div class="col-xs"></div>
<div class="col-xs"></div>
</div>
</div>
</div>
</section>
<section id="visibility">
<div class="row example">
<div class="col hide-md"><h4>.hide-md</h4></div>
<div class="col hide-xs show-md"><h4>.hide-xs, .show-md</h4></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col hide-sm-only"><h4>.hide-sm-only</h4></div>
</div>
</section>
<section id="variables">
</section>
<section id="mixins">
</section>
</div>
<footer id="footerSection">
<div class="row content-block">
<ul>
<li>
<aside id="siteOwner"></aside>
</li>
</ul>
</div>
</footer>
<script id="feature-detail" type="text/x-handlebars-template">
<div>
<div class="row center-xs content-block">
<div class="col-xs-12 col-md-8">
<h2>{{ title }}</h2>
<p>
{{ description }}
{{#if hasLink}}
<a href="{{ href }}">{{ linkContent }}</a>
{{/if}}
</p>
</div>
</div>
<div class="row content-block">
<div class="col-xs-12 col-md-offset-2 col-md-8 code-block" id="{{ codeBlockId }}"></div>
</div>
</div>
</script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/marked/lib/marked.js"></script>
<script src="/bower_components/handlebars/handlebars.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<script src="/scripts/bundle.js"></script>
<!-- endbuild -->
</body>
</html>