Merge pull request #2 from Dogfalo/grid

Grid
Dogfalo · Sep 23, 2014 · 5687626 · 5687626
2 parents 5151485 + d30d6a8
commit 5687626
Show file tree

Hide file tree

Showing 6 changed files with 522 additions and 44 deletions.
diff --git a/css/materialize.css b/css/materialize.css
@@ -2,79 +2,163 @@
   float: left; }
   @media only screen and (min-width: 0) {
     .row .col.small-1 {
-      width: 8.33333%; }
+      width: 8.33333%;
+      margin-left: 0; }
     .row .col.small-2 {
-      width: 16.66667%; }
+      width: 16.66667%;
+      margin-left: 0; }
     .row .col.small-3 {
-      width: 25%; }
+      width: 25%;
+      margin-left: 0; }
     .row .col.small-4 {
-      width: 33.33333%; }
+      width: 33.33333%;
+      margin-left: 0; }
     .row .col.small-5 {
-      width: 41.66667%; }
+      width: 41.66667%;
+      margin-left: 0; }
     .row .col.small-6 {
-      width: 50%; }
+      width: 50%;
+      margin-left: 0; }
     .row .col.small-7 {
-      width: 58.33333%; }
+      width: 58.33333%;
+      margin-left: 0; }
     .row .col.small-8 {
-      width: 66.66667%; }
+      width: 66.66667%;
+      margin-left: 0; }
     .row .col.small-9 {
-      width: 75%; }
+      width: 75%;
+      margin-left: 0; }
     .row .col.small-10 {
-      width: 83.33333%; }
+      width: 83.33333%;
+      margin-left: 0; }
     .row .col.small-11 {
-      width: 91.66667%; }
+      width: 91.66667%;
+      margin-left: 0; }
     .row .col.small-12 {
-      width: 100%; } }
+      width: 100%;
+      margin-left: 0; }
+    .row .col.small-offset-1 {
+      margin-left: 8.33333%; }
+    .row .col.small-offset-2 {
+      margin-left: 16.66667%; }
+    .row .col.small-offset-3 {
+      margin-left: 25%; }
+    .row .col.small-offset-4 {
+      margin-left: 33.33333%; }
+    .row .col.small-offset-5 {
+      margin-left: 41.66667%; }
+    .row .col.small-offset-6 {
+      margin-left: 50%; }
+    .row .col.small-offset-7 {
+      margin-left: 58.33333%; }
+    .row .col.small-offset-8 {
+      margin-left: 66.66667%; }
+    .row .col.small-offset-9 {
+      margin-left: 75%; }
+    .row .col.small-offset-10 {
+      margin-left: 83.33333%; }
+    .row .col.small-offset-11 {
+      margin-left: 91.66667%; }
+    .row .col.small-offset-12 {
+      margin-left: 100%; } }
   @media only screen and (min-width: 768px) {
     .row .col.medium-1 {
-      width: 8.33333%; }
+      width: 8.33333%;
+      margin-left: 0; }
     .row .col.medium-2 {
-      width: 16.66667%; }
+      width: 16.66667%;
+      margin-left: 0; }
     .row .col.medium-3 {
-      width: 25%; }
+      width: 25%;
+      margin-left: 0; }
     .row .col.medium-4 {
-      width: 33.33333%; }
+      width: 33.33333%;
+      margin-left: 0; }
     .row .col.medium-5 {
-      width: 41.66667%; }
+      width: 41.66667%;
+      margin-left: 0; }
     .row .col.medium-6 {
-      width: 50%; }
+      width: 50%;
+      margin-left: 0; }
     .row .col.medium-7 {
-      width: 58.33333%; }
+      width: 58.33333%;
+      margin-left: 0; }
     .row .col.medium-8 {
-      width: 66.66667%; }
+      width: 66.66667%;
+      margin-left: 0; }
     .row .col.medium-9 {
-      width: 75%; }
+      width: 75%;
+      margin-left: 0; }
     .row .col.medium-10 {
-      width: 83.33333%; }
+      width: 83.33333%;
+      margin-left: 0; }
     .row .col.medium-11 {
-      width: 91.66667%; }
+      width: 91.66667%;
+      margin-left: 0; }
     .row .col.medium-12 {
-      width: 100%; } }
+      width: 100%;
+      margin-left: 0; }
+    .row .col.medium-offset-1 {
+      margin-left: 8.33333%; }
+    .row .col.medium-offset-2 {
+      margin-left: 16.66667%; }
+    .row .col.medium-offset-3 {
+      margin-left: 25%; }
+    .row .col.medium-offset-4 {
+      margin-left: 33.33333%; }
+    .row .col.medium-offset-5 {
+      margin-left: 41.66667%; }
+    .row .col.medium-offset-6 {
+      margin-left: 50%; }
+    .row .col.medium-offset-7 {
+      margin-left: 58.33333%; }
+    .row .col.medium-offset-8 {
+      margin-left: 66.66667%; }
+    .row .col.medium-offset-9 {
+      margin-left: 75%; }
+    .row .col.medium-offset-10 {
+      margin-left: 83.33333%; }
+    .row .col.medium-offset-11 {
+      margin-left: 91.66667%; }
+    .row .col.medium-offset-12 {
+      margin-left: 100%; } }
   @media only screen and (min-width: 992px) {
     .row .col.large-1 {
-      width: 8.33333%; }
+      width: 8.33333%;
+      margin-left: 0; }
     .row .col.large-2 {
-      width: 16.66667%; }
+      width: 16.66667%;
+      margin-left: 0; }
     .row .col.large-3 {
-      width: 25%; }
+      width: 25%;
+      margin-left: 0; }
     .row .col.large-4 {
-      width: 33.33333%; }
+      width: 33.33333%;
+      margin-left: 0; }
     .row .col.large-5 {
-      width: 41.66667%; }
+      width: 41.66667%;
+      margin-left: 0; }
     .row .col.large-6 {
-      width: 50%; }
+      width: 50%;
+      margin-left: 0; }
     .row .col.large-7 {
-      width: 58.33333%; }
+      width: 58.33333%;
+      margin-left: 0; }
     .row .col.large-8 {
-      width: 66.66667%; }
+      width: 66.66667%;
+      margin-left: 0; }
     .row .col.large-9 {
-      width: 75%; }
+      width: 75%;
+      margin-left: 0; }
     .row .col.large-10 {
-      width: 83.33333%; }
+      width: 83.33333%;
+      margin-left: 0; }
     .row .col.large-11 {
-      width: 91.66667%; }
+      width: 91.66667%;
+      margin-left: 0; }
     .row .col.large-12 {
-      width: 100%; } }
+      width: 100%;
+      margin-left: 0; } }
 
 html {
   font-size: 14px; }

diff --git a/index.html b/index.html
@@ -3,10 +3,9 @@
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Materialize</title>
   <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
-  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
 </head>
 
 <body>
- Roboto  K
+
 </body>
-</html>
+</html>
diff --git a/sass/components/_global.scss b/sass/components/_global.scss
@@ -1,11 +1,12 @@
 @charset "UTF-8";
 
 // Media Query Ranges
-$small-screen: 768px;
+$small-screen: 480px;
+$medium-screen: 768px;
 $large-screen: 992px;
 
 $small-and-up: "only screen and (min-width : 0)";
-$medium-and-up: "only screen and (min-width : #{$small-screen})";
+$medium-and-up: "only screen and (min-width : #{$medium-screen})";
 $large-and-up: "only screen and (min-width : #{$large-screen})";
 
 

diff --git a/sass/components/_grid.scss b/sass/components/_grid.scss
@@ -8,7 +8,18 @@
       $i: 1;
       @while $i <= $num-cols {
         $perc: unquote((100 / ($num-cols / $i)) + "%");
-        &.small-#{$i} { width: $perc; }
+        &.small-#{$i} { 
+          width: $perc; 
+          margin-left: 0;
+        }
+        $i: $i + 1;
+      } 
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.small-offset-#{$i} { 
+          margin-left: $perc; 
+        }
         $i: $i + 1;
       } 
 
@@ -19,7 +30,18 @@
       $i: 1;
       @while $i <= $num-cols {
         $perc: unquote((100 / ($num-cols / $i)) + "%");
-        &.medium-#{$i} { width: $perc; }
+        &.medium-#{$i} { 
+          width: $perc; 
+          margin-left: 0;
+        }
+        $i: $i + 1;
+      } 
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.medium-offset-#{$i} { 
+          margin-left: $perc;
+        }
         $i: $i + 1;
       } 
 
@@ -30,7 +52,17 @@
       $i: 1;
       @while $i <= $num-cols {
         $perc: unquote((100 / ($num-cols / $i)) + "%");
-        &.large-#{$i} { width: $perc; }
+        &.large-#{$i} { 
+          width: $perc; 
+          margin-left: 0;
+        }
+        $i: $i + 1;
+      } 
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.large-offset-#{$i} { 
+          margin-left: $perc;
+        }
         $i: $i + 1;
       }