From b182e639aa6fd98b2b67d0d504c988ab18e68c20 Mon Sep 17 00:00:00 2001
From: Mike Francis <mike@benchmark.co.uk>
Date: Thu, 2 Apr 2015 10:44:43 +0100
Subject: [PATCH] Updated tests

---
 tests/css/tests.css  | 52 +++++++++++++++++++++----
 tests/grid.php       | 90 +++++++++++++++++++++++++-------------------
 tests/responsive.php | 28 ++++++++++++++
 3 files changed, 124 insertions(+), 46 deletions(-)
 create mode 100644 tests/responsive.php

diff --git a/tests/css/tests.css b/tests/css/tests.css
index 0070867..eb57a89 100644
--- a/tests/css/tests.css
+++ b/tests/css/tests.css
@@ -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;
 }
\ No newline at end of file
diff --git a/tests/grid.php b/tests/grid.php
index e0befe0..3c3db3d 100644
--- a/tests/grid.php
+++ b/tests/grid.php
@@ -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>
diff --git a/tests/responsive.php b/tests/responsive.php
new file mode 100644
index 0000000..33e2aa8
--- /dev/null
+++ b/tests/responsive.php
@@ -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(); ?>
\ No newline at end of file