add responsive breakpoint system code

1 files changed, 37 insertions, 4 deletions

diff --git a/src/layout.less b/src/layout.less
index b101ca0..ccdd609 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -8,10 +8,17 @@
   &:extend(.clearfix all);
 }
 @media screen and (min-width: 961px) {
-  .container {
-    &.grid-960 {
-      width: 96rem;
-    }
+  .grid-960 {
+    width: 96rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+@media screen and (min-width: 481px) {
+  .grid-480 {
+    width: 48rem;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
@@ -82,3 +89,29 @@
   }
 }
 
+// Responsive breakpoint system
+@media screen and (max-width: 480px) {
+  .hide-xs {
+    display: none !important;
+  }
+}
+@media screen and (max-width: 600px) {
+  .hide-sm {
+    display: none !important;
+  }
+}
+@media screen and (max-width: 840px) {
+  .hide-md {
+    display: none !important;
+  }
+}
+@media screen and (max-width: 960px) {
+  .hide-lg {
+    display: none !important;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .hide-xl {
+    display: none !important;
+  }
+}
\ No newline at end of file