Congegni/barebones
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updated tests

Browse source
This commit is contained in:
Mike Francis 2015-04-02 10:44:43 +01:00
parent 77438665f7
commit b182e639aa
3 changed files with 124 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

90
tests/grid.php
View file

@ -17,67 +17,79 @@ get_header();
<div class="container">
<section class="section">
<h2 class="section__title">Columns</h2>
<h1 class="section__title">Grid System</h1>
<p>Taken from <a href="https://github.com/pdcreis/simple-grid">Simple Grid by Pedro Reis</a>.</p>
<div class="row">
<div class="col col--lg-12 col--md-2 col--sm-2 col--xs-12"><span>12</span></div>
<div class="col col--lg-12 col--md-2 col--sm-2 col--xs-12"><div class="col-inner">12</div></div>
</div>
<div class="row">
<div class="col col--lg-6 col--md-6 col--sm-6 col--xs-12"><span>6</span></div>
<div class="col col--lg-6 col--md-6 col--sm-6 col--xs-12"><span>6</span></div>
<div class="col col--lg-6 col--md-6 col--sm-6 col--xs-12"><div class="col-inner">6</div></div>
<div class="col col--lg-6 col--md-6 col--sm-6 col--xs-12"><div class="col-inner">6</div></div>
</div>
<div class="row">
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><span>4</span></div>
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><span>4</span></div>
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><span>4</span></div>
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><div class="col-inner">4</div></div>
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><div class="col-inner">4</div></div>
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><div class="col-inner">4</div></div>
</div>
<div class="row">
<div class="col col--lg-3 col--md-3 col--sm-3 col--xs-12"><span>3</span></div>
<div class="col col--lg-3 col--md-3 col--sm-3 col--xs-12"><span>3</span></div>
<div class="col col--lg-3 col--md-3 col--sm-3 col--xs-12"><span>3</span></div>
<div class="col col--lg-3 col--md-3 col--sm-3 col--xs-12"><span>3</span></div>
<div class="col col--lg-3 col--md-3 col--sm-3 col--xs-12"><div class="col-inner">3</div></div>
<div class="col col--lg-3 col--md-3 col--sm-3 col--xs-12"><div class="col-inner">3</div></div>
<div class="col col--lg-3 col--md-3 col--sm-3 col--xs-12"><div class="col-inner">3</div></div>
<div class="col col--lg-3 col--md-3 col--sm-3 col--xs-12"><div class="col-inner">3</div></div>
</div>
<div class="row">
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><span>2</span></div>
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><span>2</span></div>
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><span>2</span></div>
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><span>2</span></div>
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><span>2</span></div>
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><span>2</span></div>
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><div class="col-inner">2</div></div>
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><div class="col-inner">2</div></div>
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><div class="col-inner">2</div></div>
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><div class="col-inner">2</div></div>
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><div class="col-inner">2</div></div>
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><div class="col-inner">2</div></div>
</div>
<div class="row">
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><div class="col-inner">1</div></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><div class="col-inner">1</div></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><div class="col-inner">1</div></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><div class="col-inner">1</div></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><div class="col-inner">1</div></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><div class="col-inner">1</div></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><div class="col-inner">1</div></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><div class="col-inner">1</div></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><div class="col-inner">1</div></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><div class="col-inner">1</div></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><div class="col-inner">1</div></div>
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><div class="col-inner">1</div></div>
</div>
</section>
<section class="section">
<h2 class="section__title">Nesting</h2>
<h2>Nesting</h2>
<div class="row">
<div class="col col--lg-5 col--md-5 col--sm-5 col--xs-12"><img src="//placehold.it/800x600" alt=""></div>
<div class="col col--lg-5 col--md-5 col--sm-5 col--xs-12"><div class="col-inner">parent</div></div>
<div class="col col--lg-7 col--md-7 col--sm-7 col--xs-12">
<span>parent</span>
<div class="row">
<div class="col col--lg-6 col--md-6 col--sm-6 col--xs-12"><span>child</span></div>
<div class="col col--lg-6 col--md-6 col--sm-6 col--xs-12"><span>child</span></div>
<div class="col-inner">
parent
<div class="row">
<div class="col col--lg-6 col--md-6 col--sm-6 col--xs-12"><div class="col-inner">child</div></div>
<div class="col col--lg-6 col--md-6 col--sm-6 col--xs-12"><div class="col-inner">child</div></div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<h2 class="section__title">Gutterless</h2>
<h2>Gutterless</h2>
<div class="row row--gutterless">
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><span>4</span></div>
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><span>4</span></div>
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><span>4</span></div>
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><div class="col-inner">4</div></div>
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><div class="col-inner">4</div></div>
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><div class="col-inner">4</div></div>
</div>
</section>
<section class="section">
<h2>Responsive</h2>
<div class="row">
<div class="col col--lg-3 col--md-6 col--sm-3 col--xs-12"><div class="col-inner">4</div></div>
<div class="col col--lg-3 col--md-6 col--sm-3 col--xs-12"><div class="col-inner">4</div></div>
<div class="col col--lg-3 col--md-6 col--sm-2 col--xs-6"><div class="col-inner">4</div></div>
<div class="col col--lg-3 col--md-6 col--sm-4 col--xs-6"><div class="col-inner">4</div></div>
</div>
</section>
</div>