Merge pull request #151 from picturepan2/feature/components v0.2.5

Feature/components

1 files changed, 25 insertions, 10 deletions

diff --git a/src/layout.less b/src/layout.less
index 05642aa..7ebfea2 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -6,16 +6,9 @@
   padding-right: @layout-gutter;
   width: 100%;
   &:extend(.clearfix all);
-}
-// Grid sizes
-@media screen and (min-width: (960px + 2 * @html-font-size * @layout-gutter)) {
-  .grid-960 {
-    width: 96rem + 2 * @layout-gutter;
-  }
-}
-@media screen and (min-width: (480px + 2 * @html-font-size * @layout-gutter)) {
-  .grid-480 {
-    width: 48rem + 2 * @layout-gutter;
+
+  &.grid-960 {
+    max-width: 96rem + 2 * @layout-gutter;
   }
 }
 
@@ -357,28 +350,50 @@
 }
 
 // Responsive breakpoint system
+.show-xs,
+.show-sm,
+.show-md,
+.show-lg,
+.show-xl {
+  display: none !important;
+}
 @media screen and (max-width: @size-xs) {
   .hide-xs {
     display: none !important;
   }
+  .show-xs {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-sm) {
   .hide-sm {
     display: none !important;
   }
+  .show-sm {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-md) {
   .hide-md {
     display: none !important;
   }
+  .show-md {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-lg) {
   .hide-lg {
     display: none !important;
   }
+  .show-lg {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-xl) {
   .hide-xl {
     display: none !important;
   }
+  .show-xl {
+    display: block !important;
+  }
 }