Updated tests
This commit is contained in:
Mike Francis
parent
77438665f7
commit
b182e639aa
|
|
@ -1,5 +1,17 @@
|
|||
/**
|
||||
* Generic
|
||||
*/
|
||||
|
||||
body {
|
||||
padding: 4rem 0;
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.header, .footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section {
|
||||
|
|
@ -8,14 +20,40 @@ body {
|
|||
|
||||
.section__title {
|
||||
border-bottom: solid 1px #eee;
|
||||
font-weight: bold;
|
||||
padding-bottom: 1.5rem;
|
||||
font-size: 2em;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.col span {
|
||||
background-color: #eee;
|
||||
|
||||
/**
|
||||
* Grid
|
||||
*/
|
||||
|
||||
.col-inner {
|
||||
background-color: whitesmoke;
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
padding: 24px;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.col-inner .col-inner {
|
||||
background-color: blue;
|
||||
color: white;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.row--gutterless .col:nth-child(2) .col-inner {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsive
|
||||
*/
|
||||
|
||||
[class*="hidden"],
|
||||
[class*="visible"] {
|
||||
background-color: whitesmoke;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
@ -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="col-inner">
|
||||
parent
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Template name: Test - Responsive
|
||||
*/
|
||||
|
||||
function moar_styles() {
|
||||
wp_enqueue_style( 'tests', get_template_directory_uri() . '/tests/css/tests.css' );
|
||||
wp_enqueue_style( 'icons', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', null, '4.3.0' );
|
||||
}
|
||||
|
||||
add_action( 'wp_enqueue_scripts', 'moar_styles' );
|
||||
|
||||
get_header();
|
||||
|
||||
?>
|
||||
|
||||
<div class="container">
|
||||
<section class="section">
|
||||
<h2 class="section__title">Responsive</h2>
|
||||
<div class="visible-lg hidden-md hidden-sm hidden-xs">Visible on large breakpoint or greater</div>
|
||||
<div class="hidden-lg visible-md hidden-sm hidden-xs">Visible between medium and large breakpoint</div>
|
||||
<div class="hidden-lg hidden-md visible-sm hidden-xs">Visible between small and medium breakpoint</div>
|
||||
<div class="hidden-lg hidden-md hidden-sm visible-xs">Visible on small breakpoint or less</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
Loading…
Reference in New Issue