You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1247 lines
69 KiB
1247 lines
69 KiB
5 years ago
|
<!doctype html>
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
|
||
|
|
<title>reflex - a lightweight responsive flexbox grid with cross browser support, an inline-block fallback and no polyfills</title>
|
||
|
|
<meta name="description" content="reflex is a responsive flexbox grid with inline-block legacy support and no polyfills">
|
||
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
|
||
|
|
|
||
|
|
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
|
||
|
|
<link rel="stylesheet" href="css/docs.css">
|
||
|
|
|
||
|
|
<script src="js/respond.min.js"></script>
|
||
|
|
<script src="js/html5shiv.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="body-inset">
|
||
|
|
<header class="content-grid" role="banner">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-xs-8">
|
||
|
|
<h1>Reflex grid</h1>
|
||
|
|
<p>A lightweight responsive flexbox grid with cross browser support, an inline-block fallback and no polyfills</p>
|
||
|
|
<p class="alert">These are the docs for version 1 which I have maintained as a reference for people still using it. The last release under version 1 was <a href="https://github.com/leejordan/reflex/tree/1.5.0">1.5.0</a>. However, <a href="https://github.com/leejordan/reflex">version 2</a> is more reliable and robust so I recommend using that instead.</p>
|
||
|
|
</div>
|
||
|
|
<nav role="navigation" class="grid__col-xs-4">
|
||
|
|
<a href="css/reflex.css" target="_blank" class="btn btn-download">css</a>
|
||
|
|
<a href="demo.html" class="btn btn-external">demo</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="content-grid">
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<h2 id="what-is-reflex">What is reflex? <a href="#what-is-reflex">#</a></h2>
|
||
|
|
<p>Reflex gives you the ability to easily take advantage of flexbox for laying out a grid while having a reliable inline-block fallback for older browsers.</p>
|
||
|
|
<p>At the time of writing, <a href="http://caniuse.com/#search=flex" target="_blank">global flexbox support is at 94.1%</a> (excluding browsers with outdated or partial support) so I propose that it's time to start taking advantage of flexbox and accept that the inline-block fallback won't support everything.</p>
|
||
|
|
<p>Where flexbox isn't supported, your basic grid structure will remain intact and most of the layout classes still work. Try this page out in a non-flexbox browser to see for yourself!</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<h2 id="reflex-benefits">Why use reflex? <a href="#reflex-benefits">#</a></h2>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li>It's lightweight - 12KB in it's minified form and <strong>1.8KB gzipped</strong></li>
|
||
|
|
<li>Where flexbox is supported, <strong>grid cells are all the same height by default</strong></li>
|
||
|
|
<li>Reflex grid cells <strong>never push each other out of the way</strong> (as with floated grids)</li>
|
||
|
|
<li>Supports semantic elements e.g. you can use <code>ul</code> as a grid</li>
|
||
|
|
<li>Supports nested grids</li>
|
||
|
|
<li>Good cross browser support</li>
|
||
|
|
<li>Built in both <a href="http://sass-lang.com/" target="_blank">Sass/SCSS</a> and <a href="http://lesscss.org/" target="_blank">LESS</a></li>
|
||
|
|
<li>Built using <a href="http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/" target="_blank">BEM syntax</a>
|
||
|
|
<li>Easily customizable and extendable</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<h2 id="intended-use">Intended use <a href="#intended-use">#</a></h2>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li>Creating complex nested grids which take advantage of flexbox layout properties</li>
|
||
|
|
<li>Generating a reliable grid with dynamic content e.g. a list of products</li>
|
||
|
|
<li>An addition or replacement to your current css framework</li>
|
||
|
|
<li>A set of vendor-prefixed Sass or LESS mixins ready to be incorporated into an existing framework</li>
|
||
|
|
<li>A set of vendor-prefixed helper classes to get your flexbox solution off the ground faster</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="grid-introduction">Reflex grid introduction <a href="#grid-introduction">#</a></h2>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<pre><div class="grid">
|
||
|
|
<div class="grid__col-6">
|
||
|
|
<content>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-6">
|
||
|
|
<content>
|
||
|
|
</div>
|
||
|
|
</div></pre>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-6 example-col">
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-6 example-col">
|
||
|
|
Vivamus nulla leo, dignissim nec tempor vel, consequat ac dolor. Nunc dignissim in ante sed dapibus. Aenean sit amet aliquet dolor, at auctor erat.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<p>
|
||
|
|
With reference to <a href="http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/" target="_blank">BEM syntax</a>, this is the anamtomy of a reflex grid:
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<h3>.grid</h3>
|
||
|
|
<p>example: <code>grid</code></p>
|
||
|
|
<p>
|
||
|
|
This is the top level element and is similar to a <code>row</code> in bootstrap. It sets the following properties:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li><code>display: flex</code></li>
|
||
|
|
<li><code>flex-wrap: wrap</code></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<h3>.grid__element</h3>
|
||
|
|
<p>example: <code>grid__col-xs-6</code></p>
|
||
|
|
<p>
|
||
|
|
This is a child element of <code>.grid</code> and is similar to a <code>col-x</code> in bootstrap. It sets the following properties:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li><code>display: flex</code></li>
|
||
|
|
<li><code>flex-direction: column</code></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<h3>.grid--modifier</h3>
|
||
|
|
<p>example: <code>grid--align-end</code></p>
|
||
|
|
<p>
|
||
|
|
Modifier classes can be applied to both the <code>grid</code> and <code>grid__element</code>. Further examples include:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li><code>grid--no-wrap</code></li>
|
||
|
|
<li><code>grid--align-end</code></li>
|
||
|
|
<li><code>grid--justify-center</code></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="browser-support">Browser support <a href="#browser-support">#</a></h2>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-5">
|
||
|
|
<p>Reflex falls back to an inline-block grid for browsers that do not support flexbox. Reflex uses some css hacks to help the inline-block grid work on older browsers. It's important to note that some of the features of flexbox do not have an equivalent in the inline-block fallback so not everything will work in the fallback, but <strong>your grid will remain intact.</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-7">
|
||
|
|
<p class="alert">If you want to use the grid with breakpoints in ie8 and below you will need to use <a href="https://github.com/scottjehl/Respond" target="_blank">respond.js</a> which enables media query support in those browsers via JavaScript and <a href="https://github.com/afarkas/html5shiv" target="_blank">html5Shiv</a> if you wish to use html5 elements such as <code>section</code></p>
|
||
|
|
|
||
|
|
<p class="alert">It is possible for this framework to support ie6. You can make a tiny change to enable support but it greatly increases the filesize of the css. Look in <a href="https://github.com/leejordan/reflex/blob/master/scss/reflex/_mixins.scss#L20">_mixins.scss (Sass)</a> or <a href="https://github.com/leejordan/reflex/blob/master/less/reflex/mixins.less#L19">mixins.less (LESS)</a> for the commented line.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="semantic-markup">Semantic markup <a href="#semantic-markup">#</a></h2>
|
||
|
|
<p>You don't have to use <code>div</code> for your grid and ideally you should use the most semantically appropriate markup for your use case with no visible difference.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<h3 id="using-divs">Divs <a href="#using-divs">#</a></h3>
|
||
|
|
|
||
|
|
<pre><div class="grid">
|
||
|
|
<div class="grid__col-6">
|
||
|
|
<content>
|
||
|
|
</div>
|
||
|
|
</div></pre>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<h3 id="using-list">Unordered list <a href="#using-list">#</a></h3>
|
||
|
|
|
||
|
|
<pre><ul class="grid">
|
||
|
|
<li class="grid__col-6">
|
||
|
|
<content>
|
||
|
|
</li>
|
||
|
|
</ul></pre>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<h3 id="using-html5">Html5 elements <a href="#using-html5">#</a></h3>
|
||
|
|
|
||
|
|
<pre><section class="grid">
|
||
|
|
<article class="grid__col-6">
|
||
|
|
<content>
|
||
|
|
</article>
|
||
|
|
</section></pre>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="breakpoints">Numbered columns <a href="#breakpoints">#</a></h2>
|
||
|
|
<p>By default reflex is a 12 column grid but this can be easily changed. Regardless of how many columns you need, you will likely require extra control over the breakpoints at which your grid columns revert to 100% width. To do this you will need to use these modifier classes which determine grid columns at various viewport sizes. A grid built using numbered columns in this way will remain fully intact in the inline-block fallback.</p>
|
||
|
|
|
||
|
|
<p>The reflex grid breakpoints can be easily re-defined but are set to these values by default:</p>
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Class prefix</th>
|
||
|
|
<td>grid__col-</td>
|
||
|
|
<td>grid__col-xs-</td>
|
||
|
|
<td>grid__col-sm-</td>
|
||
|
|
<td>grid__col-md-</td>
|
||
|
|
<td>grid__col-lg-</td>
|
||
|
|
<td>grid__col-xlg-</td>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<th>Collapses at</th>
|
||
|
|
<td>does not collapse</td>
|
||
|
|
<td>< 480px</td>
|
||
|
|
<td>< 768px</td>
|
||
|
|
<td>< 992px</td>
|
||
|
|
<td>< 1200px</td>
|
||
|
|
<td>< 1600px</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content-grid">
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="auto-grid">Auto columns <a href="#auto">#</a></h2>
|
||
|
|
<p>You can add any number of auto sizing <code>grid__col-auto</code> columns to a <code>grid</code> and therefore avoid using numbered columns. You can also use the regular breakpoints to determine when your columns revert to 100% width. A grid built using auto columns will not remain fully intact in the inline-block fallback and will not work properly in ie10 due to it's limited flexbox support but if this is a concern, you could use JavaScript for that.</p>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-auto example-col">
|
||
|
|
grid__col-auto
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-auto example-col">
|
||
|
|
grid__col-auto
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-sm-auto example-col">
|
||
|
|
grid__col-sm-auto
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-auto example-col">
|
||
|
|
grid__col-sm-auto
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-md-auto example-col">
|
||
|
|
grid__col-md-auto
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="flexbox-introduction">Flexbox direction and axis <a href="#flexbox-introduction">#</a></h2>
|
||
|
|
<p>
|
||
|
|
To understand how this grid works, you'll need to first understand how flexbox works, especially in relation to the cross axis and main axis. There's a pretty good <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">introduction to flexbox here</a> but here's a quick demo of the main points: flex direction, main axis, and cross axis.
|
||
|
|
</p>
|
||
|
|
<div class="grid" style="margin-bottom: 1em;">
|
||
|
|
<div class="grid__col-sm-6 grid--direction-row grid--align-center grid--justify-space-between example-col">
|
||
|
|
<h3>row</h3>
|
||
|
|
<p>
|
||
|
|
↔ main axis
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
↕ cross axis
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6 grid--align-center example-col">
|
||
|
|
<h3>column</h3>
|
||
|
|
<p>
|
||
|
|
↕ main axis
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
↔ cross axis
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p>
|
||
|
|
By default any <code>grid</code> element is set to <code>flex-direction: row</code> and the main axis therefore follows the horizontal direction.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
By default any <code>grid__col-x</code> element is set to <code>flex-direction: column</code> and the main axis therefore follows the vertical direction.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
This will become important when you are using the modifier classes which typically act upon either the main or cross axis</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content-grid">
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="grid-modifiers">Grid modifiers <a href="#grid-modifiers">#</a></h2>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="grid-wrap">Grid wrapping <a href="#grid-wrap">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-8">
|
||
|
|
<p>By default, the <code>flex-wrap</code> property of a <code>display: flex</code> element is set to <code>nowrap</code> but because this is a grid framework we generally need our grid to wrap so we explcitly set <code>flex-wrap: wrap</code> on our <code>grid</code> element</p>
|
||
|
|
<p><code>grid__col-x</code> elements do not wrap by default, but you can make them do so by using the modifier <code>grid--wrap</code>.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<p class="alert">In the inline-block fallback your grid columns will always wrap when they add up to 100% width (12 column by default).</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<div class="grid example-section">
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--no-wrap">.grid--no-wrap <a href="#grid--no-wrap">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> sets <code>flex-wrap: nowrap</code> and gives you this:</p>
|
||
|
|
|
||
|
|
<div class="grid grid--no-wrap">
|
||
|
|
<div class="grid__col-6 example-col">
|
||
|
|
<p>these</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-6 example-col">
|
||
|
|
<p>columns</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-10 example-col">
|
||
|
|
<p>do not collapse</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--wrap-reverse">.grid--wrap-reverse <a href="#grid--wrap-reverse">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> sets <code>flex-wrap: wrap-reverse</code> and gives you a grid that wraps in reverse:</p>
|
||
|
|
|
||
|
|
<div class="grid grid--wrap-reverse example-grid">
|
||
|
|
<div class="grid__col-6 example-col">
|
||
|
|
<p>I am first in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-6 example-col">
|
||
|
|
<p>I am second in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-10 example-col">
|
||
|
|
<p>I am third in the markup</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="cross-axis-alignment">Cross axis modifiers <a href="#cross-axis-alignment">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<p>These modifiers can be added to your <code>grid</code> element but also to the <code>grid__col-x</code> elements inside the grid.</p>
|
||
|
|
|
||
|
|
<div class="grid example-section">
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="equal-height-columns">Equal height columns by default <a href="#equal-height-columns">#</a></h4>
|
||
|
|
<p>In browsers that support flexbox we have equal height columns by default because the default value of <code>align-items</code> is <code>stretch</code></p>
|
||
|
|
|
||
|
|
<div class="grid example-grid">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Over after behold was living together tree is very sixth let bring fish. Forth behold they're fly deep.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Be can't winged good for also saying first.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--align-start">.grid--align-start <a href="#grid--align-start">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>align-items: flex-start</code> and gives you this:</p>
|
||
|
|
|
||
|
|
<div class="grid grid--align-start example-grid">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Over after behold was living together tree is very sixth let bring fish. Forth behold they're fly deep.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Be can't winged good for also saying first.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--align-end">.grid--align-end <a href="#grid--align-end">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>align-items: flex-end</code></p>
|
||
|
|
|
||
|
|
<div class="grid grid--align-end example-grid">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Over after behold was living together tree is very sixth let bring fish. Forth behold they're fly deep.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Be can't winged good for also saying first.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--align-center">.grid--align-center <a href="#grid--align-center">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>align-items: center</code></p>
|
||
|
|
|
||
|
|
<div class="grid grid--align-center example-grid">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Over after behold was living together tree is very sixth let bring fish. Forth behold they're fly deep.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Be can't winged good for also saying first.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-12">
|
||
|
|
<h4 id="grid--align-baseline">.grid--align-baseline <a href="#grid--align-baseline">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>align-items: baseline</code>.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<p>By default, different text elements in adjacent columns will be aligned by their size and margin:</p>
|
||
|
|
<div class="grid example-grid">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<h2>Heading 2</h2>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<h3>Heading 3</h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Paragraph</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<p>With <code>grid--align-baseline</code> applied to the <code>grid</code> element the text lines up:</p>
|
||
|
|
<div class="grid grid--align-baseline example-grid">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<h2>Heading 2</h2>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<h3>Heading 3</h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Paragraph</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="cross-axis-align-override">Cross axis override modifiers <a href="#cross-axis-align-override">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<p>You can override the cross axis alignment of a single <code>grid__col-x</code> element by using these modifers.</p>
|
||
|
|
|
||
|
|
<div class="grid example-section">
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--align-self-stretch">.grid--align-self-stretch <a href="#grid--align-self-stretch">#</a></h4>
|
||
|
|
<p>When applied to <code>grid__col-x</code> sets <code>align-self: stretch</code></p>
|
||
|
|
|
||
|
|
<div class="grid grid--align-start example-grid">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule that bring fly gathered there is place good.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 grid--align-self-stretch example-col">
|
||
|
|
<p>stretch</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule that bring fly gathered there is place good Created rule image night firmament.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--align-self-start">.grid--align-self-start <a href="#grid--align-self-start">#</a></h4>
|
||
|
|
<p>When applied to <code>grid__col-x</code> sets <code>align-self: flex-start</code></p>
|
||
|
|
|
||
|
|
<div class="grid example-grid">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule that bring fly gathered there is place good.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 grid--align-self-start example-col">
|
||
|
|
<p>start</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule that bring fly gathered there is place good Created rule image night firmament.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--align-self-end">.grid--align-self-end <a href="#grid--align-self-end">#</a></h4>
|
||
|
|
<p>When applied to <code>grid__col-x</code> sets <code>align-self: flex-end</code></p>
|
||
|
|
|
||
|
|
<div class="grid example-grid">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule that bring fly gathered there is place good.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 grid--align-self-end example-col">
|
||
|
|
<p>end</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule that bring fly gathered there is place good Created rule image night firmament.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--align-self-center">.grid--align-self-center <a href="#grid--align-self-center">#</a></h4>
|
||
|
|
<p>When applied to <code>grid__col-x</code> sets <code>align-self: center</code></p>
|
||
|
|
|
||
|
|
<div class="grid example-grid">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule that bring fly gathered there is place good.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 grid--align-self-center example-col">
|
||
|
|
<p>center</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule that bring fly gathered there is place good Created rule image night firmament.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="cross-axis-position">Cross axis positioning <a href="#cross-axis-position">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<p>These modifers set the value of <code>align-content</code> which determine the position of your grid elements when there is extra space available in the cross-axis (usually because you've set a height on the grid that is larger than the contents). These modifiers can be added to your <code>grid</code> element but also to the <code>grid__col-x</code> elements inside the grid.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<p class="alert">This modifier has no effect when there is only one line of <code>grid__col-x</code> elements in the grid so cannot be used when <code>grid--no-wrap</code> is present on the grid or when you only have a single row of columns</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<div class="grid example-section">
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--align-content-default">Stretch by default <a href="#grid--align-content-default">#</a></h4>
|
||
|
|
<p>In browsers that support flexbox we have equal height columns that stretch to fill the available space by default because the default value of <code>align-content</code> is <code>stretch</code></p>
|
||
|
|
<div class="grid example-grid-height-lg">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Great blessed</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Years night</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Firmament you</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>To lights</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Place good </p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--align-content-start">.grid--align-content-start <a href="#grid--align-content-start">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>align-content: flex-start</code></p>
|
||
|
|
<div class="grid grid--align-content-start example-grid-height-lg">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Great blessed</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Years night</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Firmament you</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>To lights</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Place good </p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--align-content-end">.grid--align-content-end <a href="#grid--align-content-end">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>align-content: flex-end</code></p>
|
||
|
|
<div class="grid grid--align-content-end example-grid-height-lg">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Great blessed</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Years night</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Firmament you</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>To lights</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Place good </p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--align-content-center">.grid--align-content-center <a href="#grid--align-content-center">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>align-content: center</code></p>
|
||
|
|
<div class="grid grid--align-content-center example-grid-height-lg">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Great blessed</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Years night</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Firmament you</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>To lights</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Place good </p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--align-content-space-between">.grid--align-content-space-between <a href="#grid--align-content-space-between">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>align-content: space-between</code></p>
|
||
|
|
<div class="grid grid--align-content-space-between example-grid-height-lg">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Great blessed</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Years night</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Firmament you</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>To lights</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Place good </p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--align-content-space-around">.grid--align-content-space-around <a href="#grid--align-content-space-around">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>align-content: space-around</code></p>
|
||
|
|
<div class="grid grid--align-content-space-around example-grid-height-lg">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Great blessed</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Years night</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Firmament you</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>To lights</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Place good </p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="main-axis-alignment">Main axis alignment <a href="#main-axis-alignment">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<p>These modifers set the value of <code>justify-content</code> which determine the position of your grid elements when there is extra space available in the main-axis (usually because your columns do not make up the full width of a grid). These modifiers can be added to your <code>grid</code> element but also to the <code>grid__col-x</code> elements inside the grid.</p>
|
||
|
|
|
||
|
|
<div class="grid example-section">
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="default-main-axis">Left aligned by default <a href="#default-main-axis">#</a></h4>
|
||
|
|
<p>Grid elements are aligned to the left by default because the default value of <code>justify-content</code> is <code>flex-start</code></p>
|
||
|
|
|
||
|
|
<div class="grid example-grid-height-lg">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Be can't winged good for also saying first. Shall, fourth Greater cattle.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--justify-end">.grid--justify-end <a href="#grid--justify-end">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>justify-content: flex-end</code>
|
||
|
|
|
||
|
|
<div class="grid grid--justify-end example-grid-height-lg">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Be can't winged good for also saying first. Shall, fourth Greater cattle.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--justify-center">.grid--justify-center <a href="#grid--justify-center">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>justify-content: center</code></p>
|
||
|
|
|
||
|
|
<div class="grid grid--justify-center example-grid-height-lg">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Be can't winged good for also saying first. Shall, fourth Greater cattle.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--justify-space-between">.grid--justify-space-between <a href="#grid--justify-space-between">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>justify-content: space-between</code></p>
|
||
|
|
|
||
|
|
<div class="grid grid--justify-space-between example-grid-height-lg">
|
||
|
|
<div class="grid__col-3 example-col">
|
||
|
|
<p>First appear years night there the in them rule.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Be can't winged good for also saying first. Shall, fourth Greater cattle.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-3 example-col">
|
||
|
|
<p>First appear years night there the in them rule.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Be can't winged good for also saying first. Shall, fourth Greater cattle.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h4 id="grid--justify-space-around">.grid--justify-space-around <a href="#grid--justify-space-around">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>justify-content: space-around</code></p>
|
||
|
|
|
||
|
|
<div class="grid grid--justify-space-around example-grid-height-lg">
|
||
|
|
<div class="grid__col-3 example-col">
|
||
|
|
<p>First appear years night there the in them rule.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Be can't winged good for also saying first. Shall, fourth Greater cattle.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-3 example-col">
|
||
|
|
<p>First appear years night there the in them rule.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>First appear years night there the in them rule.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>Be can't winged good for also saying first. Shall, fourth Greater cattle.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="flex-direction">Flex direction <a href="#flex-direction">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<p>These modifers set the value of <code>flex-direction</code>. These modifiers can be added to your <code>grid</code> element but also to the <code>grid__col-x</code> elements inside the grid.</p>
|
||
|
|
|
||
|
|
<div class="grid example-section">
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="rows-by-default">Rows by default <a href="#rows-by-default">#</a></h4>
|
||
|
|
<p><code>grid</code> elements are in rows by default because the default value of <code>flex-direction</code> is <code>row</code>. <code>grid__col-x</code> elements are columns by default but can be set to behave as rows by using <code>grid--direction-row</code></p>
|
||
|
|
|
||
|
|
<div class="grid example-grid">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>I am <strong>first</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>I am <strong>second</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>I am <strong>third</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>I am <strong>fourth</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>I am <strong>fifth</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--direction-row-reverse">.grid--direction-row-reverse <a href="#grid--direction-row-reverse">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>flex-direction: row-reverse</code></p>
|
||
|
|
|
||
|
|
<div class="grid grid--direction-row-reverse example-grid">
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>I am <strong>first</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>I am <strong>second</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>I am <strong>third</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>I am <strong>fourth</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 example-col">
|
||
|
|
<p>I am <strong>fifth</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--direction-column">.grid--direction-column <a href="#grid--direction-column">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>flex-direction: column</code></p>
|
||
|
|
|
||
|
|
<div class="grid grid--direction-column example-grid">
|
||
|
|
<div class="grid__col-9 example-col">
|
||
|
|
<p>I am <strong>first</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-10 example-col">
|
||
|
|
<p>I am <strong>second</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-7 example-col">
|
||
|
|
<p>I am <strong>third</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h4 id="grid--direction-column-reverse">.grid--direction-column-reverse <a href="#grid--direction-column-reverse">#</a></h4>
|
||
|
|
<p>When applied to <code>grid</code> or <code>grid__col-x</code> sets <code>flex-direction: column-reverse</code></p>
|
||
|
|
|
||
|
|
<div class="grid grid--direction-column-reverse example-grid">
|
||
|
|
<div class="grid__col-9 example-col">
|
||
|
|
<p>I am <strong>first</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-10 example-col">
|
||
|
|
<p>I am <strong>second</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-7 example-col">
|
||
|
|
<p>I am <strong>third</strong> in the markup</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="ordering">Ordering grid elements <a href="#ordering">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-xs-6">
|
||
|
|
<p>These helper classes allow you to easily set <code>order</code> to your grid elements. This is useful because it allows you to have your markup in the correct semantic order for accessiblity purposes but in a different order visually.</p>
|
||
|
|
|
||
|
|
<p>By default there are 12 ordering helpers to match the default 12 columns. Changing the number of columns by editing the variable will also produce a matching number of order helper classes</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-xs-6">
|
||
|
|
<section class="grid example-section">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="order">.grid--order-<em><n></em> <a href="#order">#</a></h3>
|
||
|
|
<p>When applied to <code>grid__col-x</code> sets <code>order: n</code></p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-4 grid--order-2 example-col">
|
||
|
|
<p>I am <strong>first</strong> in the markup but ordered second</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 grid--order-3 example-col">
|
||
|
|
<p>I am <strong>second</strong> in the markup but ordered third</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 grid--order-1 example-col">
|
||
|
|
<p>I am <strong>third</strong> in the markup but ordered first</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="ordering">Responsive ordering <a href="#ordering">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-xs-6">
|
||
|
|
<p>There are responsive ordering classes that correspond to both the number of columns and the <a href="#breakpoints">breakpoints</a> so you can choose to change the order of <code>grid__col-x</code> elements only above certain viewport sizes.</p>
|
||
|
|
<p>For example: <code>.grid--order-2-md</code></p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-xs-6">
|
||
|
|
<section class="grid example-section">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="order">.grid--order-<em><n></em>-<em><breakpoint></em> <a href="#order">#</a></h3>
|
||
|
|
<p>When applied to <code>grid__col-x</code> sets <code>order: n</code> when viewport size is above the selected breakpoint.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid__col-4 grid--order-2-md example-col">
|
||
|
|
<p>I am <strong>first</strong> in the markup but ordered second when viewport size is above 992px</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 grid--order-3-md example-col">
|
||
|
|
<p>I am <strong>second</strong> in the markup but ordered third when viewport size is above 992px</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-4 grid--order-1-md example-col">
|
||
|
|
<p>I am <strong>third</strong> in the markup but ordered first when viewport size is above 992px</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="advanced-grid-layout">Advanced grid layout <a href="#advanced-grid-layout">#</a></h2>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="grid-cell">.grid__cell <a href="#grid-cell">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<div class="grid example-section">
|
||
|
|
<div class="grid__col-sm-7">
|
||
|
|
<p>
|
||
|
|
There are some nuances with flexbox that may make your life difficult if you're not expecting them. There is a wealth of information available on this subject in the <a href="http://www.w3.org/TR/css-flexbox-1/#flex-items" target="_blank">flexbox working draft</a>.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
This is part of flexbox, and is entirely expected. However, flexbox layout is not always appropriate so it's possible to add a <code>grid__cell</code> child element to your <code>grid__col-x</code> columns which defines an area of your column as <code>display: block</code> allowing you to lay out the contents of your grid elements like you would normally.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-5">
|
||
|
|
<div class="alert">
|
||
|
|
<h3>Flexbox differences</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Margins on adjacent elements do not collapse</li>
|
||
|
|
<li>Margins set to <code>auto</code> absorb extra space and can be used for alignment</li>
|
||
|
|
<li><code>float</code>, <code>clear</code> and <code>vertical-align</code> have no effect on a flex item</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h3>Column content by default</h3>
|
||
|
|
<pre><div class="grid">
|
||
|
|
<div class="grid__col-6">
|
||
|
|
<content>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-6">
|
||
|
|
<content>
|
||
|
|
</div>
|
||
|
|
</div></pre>
|
||
|
|
<br>
|
||
|
|
<p class="pull-right example-content">
|
||
|
|
float: right
|
||
|
|
</p>
|
||
|
|
<p class="pull-left example-content">
|
||
|
|
float: left
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p class="example-content" style="clear: both; margin: 1em 0;">
|
||
|
|
The top and bottom margins on these paragraphs do not collapse together as you would expect
|
||
|
|
</p>
|
||
|
|
<p class="example-content" style="margin: 1em 0;">
|
||
|
|
The top and bottom margins on these paragraphs do not collapse together as you would expect
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-6">
|
||
|
|
<h3>Column content using .grid__cell</h3>
|
||
|
|
<pre><div class="grid">
|
||
|
|
<div class="grid__col-6">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<content>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-6">
|
||
|
|
<div class="grid__cell">
|
||
|
|
<content>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div></pre>
|
||
|
|
<br>
|
||
|
|
<div class="grid__cell">
|
||
|
|
<p class="pull-right example-content">
|
||
|
|
float: right
|
||
|
|
</p>
|
||
|
|
<p class="pull-left example-content">
|
||
|
|
float: left
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p class="example-content" style="clear: both; margin: 1em 0;">
|
||
|
|
The top and bottom margins on these paragraphs collapse together as you would expect
|
||
|
|
</p>
|
||
|
|
<p class="example-content" style="margin: 1em 0;">
|
||
|
|
The top and bottom margins on these paragraphs collapse together as you would expect
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="grid-cell-img">.grid__cell-img <a href="#grid-cell-img">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-xs-12 grid__col-sm-4">
|
||
|
|
<p>
|
||
|
|
If you're using a <code>grid__cell</code> as above, you can simply use your regular responsive image solution such as the <a href="https://github.com/twbs/bootstrap/blob/3487898a6af8c1d5b12f7b040d30e71b19e34923/less/mixins/image.less#L9" target="_blank">solution used in bootstrap</a>.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
If you're not using a <code>grid__cell</code>, flex images need to be handled differently to make them responsive and you should use <code>grid__cell-img</code>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-xs-6 grid__col-sm-4">
|
||
|
|
<img class="grid__cell-img" src="http://lorempixel.com/400/200/fashion/1/">
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-xs-6 grid__col-sm-4">
|
||
|
|
<pre><div class="grid">
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<img class="grid__cell-img" src="">
|
||
|
|
</div>
|
||
|
|
</div></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="grid-cell-footer">.grid__cell-footer <a href="#grid-cell-footer">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<p>It's possible to set up a footer section in a <code>grid__col-x</code> element that is always aligned to the bottom by using <code>grid__cell-footer</code>. This footer element is set up as a flex box so all the usual grid modifers work on it.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-8">
|
||
|
|
<ul class="grid example-section">
|
||
|
|
<li class="grid__col-6">
|
||
|
|
<p>Consectetur adipiscing elit, sed do eiusmod.</p>
|
||
|
|
<div class="grid__cell-footer example-col-flat-1">
|
||
|
|
<p>grid__cell-footer</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6">
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.</p>
|
||
|
|
<div class="grid__cell-footer example-col-flat-1">
|
||
|
|
<p>grid__cell-footer</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="grid-bleed">.grid--bleed <a href="#grid-bleed">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<p>
|
||
|
|
By default, <code>grid__col-x</code> elements have padding to space the grid out. It's possible to override this in all <code>grid__col-x</code> child elements in a grid by applying the modifer <code>grid--bleed</code> to your <code>grid</code> element.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-8">
|
||
|
|
<ul class="grid grid--bleed example-section">
|
||
|
|
<li class="grid__col-6">
|
||
|
|
<p>Consectetur adipiscing elit, sed do eiusmod.</p>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6">
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="grid-col-bleed">.grid__col--bleed <a href="#grid-col-bleed">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<p>
|
||
|
|
You can override the padding on individual <code>grid__col-x</code> elements by using <code>grid__col--bleed</code>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-8">
|
||
|
|
<ul class="grid example-section">
|
||
|
|
<li class="grid__col-6">
|
||
|
|
<p>Default</p>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col--bleed">
|
||
|
|
<p><code>grid__col--bleed</code> applied</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="grid-col-bleed-x">.grid__col--bleed-x <a href="#grid-col-bleed-x">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<p>
|
||
|
|
You can override the left and right padding on individual <code>grid__col-x</code> elements by using <code>grid__col--bleed-x</code>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-8">
|
||
|
|
<ul class="grid example-section">
|
||
|
|
<li class="grid__col-6">
|
||
|
|
<p>Default</p>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col--bleed-x">
|
||
|
|
<p><code>grid__col--bleed-x</code> applied</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="grid-col-bleed-y">.grid__col--bleed-y <a href="#grid-col-bleed-y">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<p>
|
||
|
|
You can override the top and bottom padding on individual <code>grid__col-x</code> elements by using <code>grid__col--bleed-y</code>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-8">
|
||
|
|
<ul class="grid example-section">
|
||
|
|
<li class="grid__col-6 ">
|
||
|
|
<p>Default</p>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid__col--bleed-y">
|
||
|
|
<p><code>grid__col--bleed-y</code> applied</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="grid-col-bg">.grid__col--bg <a href="#grid-col-bg">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<p>
|
||
|
|
You can add a background image to <code>grid__col-x</code> elements by using <code>grid__col--bg</code>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-8">
|
||
|
|
<ul class="grid example-section">
|
||
|
|
<li class="grid__col-6 grid__col--bg" style="background-image:url(http://lorempixel.com/400/400/fashion/1/);">
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-6 grid--align-self-center">
|
||
|
|
<p>You can add a background image to <code>grid__col-x</code> elements by using <code>grid__col--bg</code>.</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h3 id="grid-cell-padding">.grid__cell--padding-x <a href="#grid-cell-padding">#</a></h3>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-4">
|
||
|
|
<p>
|
||
|
|
You can apply padding to individual <code>grid__cell</code> elements by using <code>grid__cell--padding-x</code>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-sm-8">
|
||
|
|
<ul class="grid example-section">
|
||
|
|
<li class="grid__col-4">
|
||
|
|
<div class="grid__cell grid__cell--padding-sm example-col">
|
||
|
|
<p>padding-sm</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-4">
|
||
|
|
<div class="grid__cell grid__cell--padding-md example-col">
|
||
|
|
<p>padding-md</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="grid__col-4">
|
||
|
|
<div class="grid__cell grid__cell--padding-lg example-col">
|
||
|
|
<p>padding-lg</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="visibility-helpers">Visibility helpers <a href="#visibility-helpers">#</a></h2>
|
||
|
|
<p>You can use some generic visibility helpers that can be applied to any element, not just grid elements. resize the viewport to see them in action. The breakpoints can be changed if you're building the css via less or sass/SCSS.</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<div class="grid example-section">
|
||
|
|
<div class="grid__col-auto hidden-xxs example-col">
|
||
|
|
.hidden-xxs
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-auto hidden-xs example-col">
|
||
|
|
.hidden-xs
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-auto hidden-sm example-col">
|
||
|
|
.hidden-sm
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-auto hidden-md example-col">
|
||
|
|
.hidden-md
|
||
|
|
</div>
|
||
|
|
<div class="grid__col-auto hidden-lg example-col">
|
||
|
|
.hidden-lg
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="examples">Examples <a href="#examples">#</a></h2>
|
||
|
|
<p>There are a handful of examples to show you what is possible with minimal effort on the <a href="demo.html">demo page</a></p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="grid">
|
||
|
|
<div class="grid__col-12">
|
||
|
|
<h2 id="acknowledgements">Acknowledgements <a href="#acknowledgements">#</a></h2>
|
||
|
|
<p>I would like to acknowledge the following resources which all helped in some way while I was building this:</p>
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://getbootstrap.com/" target="_blank">bootstrap</a> for some of the calculations and mixins</li>
|
||
|
|
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">css-tricks</a> for their flexbox introduction</li>
|
||
|
|
<li><a href="http://caniuse.com/" target="_blank">caniuse</a> for browser coverage statistics</li>
|
||
|
|
<li><a href="http://lorempixel.com" target="_blank">lorempixel.com</a> for placeholder images</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|