@drewbot/sass-flexbox-grid
Version:
A responsive sass grid library built with flexbox
164 lines (150 loc) • 6.19 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="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="documentation.html">Documentation</a>
</li>
<li>
<a href="classes.html">Classes</a>
</li>
<li>
<a href="variables.html">Variables</a>
</li>
<li>
<a href="mixins.html">Mixins</a>
</li>
</ul>
</div>
<div id="view-variables">
<header>
<div class="row center-xs content-block">
<div class="col-xs-12 col-md-8">
<h1>Variables</h1>
<p>
Customizable Sass variables allow you to create a grid and responsive framework to meet your needs.
</p>
</div>
</div>
</header>
<section id="gridVars"></section>
<section id="breakpointVars"></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>