adds more comprehensive centering classes

diff --git a/scss/components/_alignment.scss b/scss/components/_alignment.scss
index 01ac680946105042bf7d0592d1b54a4b2ae66bf3..b1ba75557ade7ff256b1a80af41c9282cfd975fb 100755 (executable)
--- a/scss/components/_alignment.scss
+++ b/scss/components/_alignment.scss
@@ -44,6 +44,7 @@ span.text-right {
 span.text-center {
   display: block;
   width: 100%;
+  text-align: center;
 }
 
 img.float-left {
@@ -56,13 +57,16 @@ img.float-right {
   text-align: right;
 }
 
-img.float-center, img.text-center {
+img.float-center, 
+img.text-center {
   margin: 0 auto;
   float: none;
   text-align: center;
 }
 
-table.float-center {
+table.float-center,
+td.float-center,
+th.float-center {
   margin: 0 auto;
   float: none;
   text-align: center;

diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss
index ecb0fe4bff9b4579368c943b35c46419853dc28d..d0637249a3c48a7a2d05aaf5b50c50708fe841ea 100755 (executable)
--- a/scss/components/_media-query.scss
+++ b/scss/components/_media-query.scss
@@ -105,16 +105,6 @@
     padding-right: $text-padding !important;
   }
 
-  table.body .hide-for-small,
-  table.body .show-for-desktop {
-    display: none !important;
-  }
-
-  table.body .show-for-small,
-  table.body .hide-for-desktop {
-    display: inherit !important;
-  }
-
   //menu
   table.menu {
     td,

diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
index 09400bf07ed78c2b2d0c18e1fd3239f62f4c5dcb..e6e208ce97a755dc7c928a53f68ba76e777ef142 100644 (file)
--- a/scss/components/_visibility.scss
+++ b/scss/components/_visibility.scss
@@ -6,22 +6,33 @@
 /// @group visibility
 ////
 
-.hide-for-large {
-  display: none;
+table.body .hide-for-large {
+  display: none !important;
   width:0;
   mso-hide:all;
   overflow:hidden;
 
   @media only screen and (max-width: #{$global-breakpoint}) {
-    display: block;
+    display: inherit !important;
   }
 }
 
-.show-for-large {
+table.body .row.hide-for-large,
+table.body .row.hide-for-large {
   @media only screen and (max-width: #{$global-breakpoint}) {
-    display: none;
+    display: table !important;
+    width: 100%;
+  }
+}
+
+table.body .show-for-large {
+  @media only screen and (max-width: #{$global-breakpoint}) {
+    display: none !important;
     width:0;
     mso-hide:all;
     overflow:hidden;
   }
 }
+
+
+

diff --git a/testing/src/assets/scss/app.scss b/testing/src/assets/scss/app.scss
index 532d047dcfafa92a0398d5e4c577d3b2b59416c6..cc83c983158495ac49ec89854f98b059e10e43e6 100644 (file)
--- a/testing/src/assets/scss/app.scss
+++ b/testing/src/assets/scss/app.scss
@@ -12,10 +12,6 @@
     text-align: center;
   }
 
-  .up-3 td {
-    width: 45% !important;
-  }
-
   table.menu.small-vertical {
     td,
     th,
@@ -77,13 +73,6 @@
   }
 }
 
-// testing styles
-
-.block-grid p {
-  background: dodgerblue;
-  text-align: center;
-}
-
 
 // building block
 
@@ -116,11 +105,3 @@
 }
 
 
-  .columns {
-    border: 1px solid red;
-
-    p {
-      background: green;
-    }
-  }
-

diff --git a/testing/src/pages/visibility.html b/testing/src/pages/visibility.html
index 48ba8e9c666ee53a6ddec21f71870389017b0ecb..8a7c5b076ffd2c9744256972fa4530f94363a936 100644 (file)
--- a/testing/src/pages/visibility.html
+++ b/testing/src/pages/visibility.html
@@ -1,72 +1,87 @@
-<row>
-  <columns small="12" large="12">
-    <h4 class="text-center">furry friends</h4>
-  </columns>
-</row>
+<container>
 
-<row>
-  <columns small="6" large="4">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4" class="hide-for-small">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-</row>
+  <row>
+    <columns small="12" large="12">
+      <h4 class="text-center">furry friends</h4>
+    </columns>
+  </row>
 
-<row>
-  <columns small="6" large="4">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4" class="hide-for-small">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-</row>
+  <row>
+    <columns small="6" large="4">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">name</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="4">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">name</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="4" class="show-for-large">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">show large</p>
+      <p class="text-center">age</p>
+    </columns>
+  </row>
 
-<row>
-  <columns small="6" large="4">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4" class="hide-for-small">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-</row>
+  <row>
+    <columns small="6" large="4">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">name</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="4">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">name</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="4" class="show-for-large">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">show large</p>
+      <p class="text-center">age</p>
+    </columns>
+  </row>
 
-<row>
-  <columns small="6" large="4" class="show-for-small">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-  <columns small="6" large="4" class="show-for-small">
-    <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
-    <p class="text-center">name</p>
-    <p class="text-center">age</p>
-  </columns>
-</row>
\ No newline at end of file
+  <row>
+    <columns small="6" large="4">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">name</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="4">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">name</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="4" class="show-for-large">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">show large</p>
+      <p class="text-center">age</p>
+    </columns>
+  </row>
+
+  <row class="hide-for-large">
+    <columns small="6" large="6">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">show small</p>
+      <p class="text-center">age</p>
+    </columns>
+    <columns small="6" large="6">
+      <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+      <p class="text-center">show small</p>
+      <p class="text-center">age</p>
+    </columns>
+  </row>
+
+  <row class="callout">
+    <columns small="6" large="4">
+      <p class="hide-for-large">Show for small</p>
+      <p class="show-for-large">Show for large</p>
+    </columns>
+    <columns small="6" large="4">
+      <button class="hide-for-large" href="">show small</button>
+      <button class="show-for-large" href="">show large</button>
+    </columns>
+  </row>
+
+</container>
\ No newline at end of file