grater.css.scss in grater-0.1.1

- old
+ new

@@ -1,10 +1,25 @@
-// Row
-section.grater {
+$grater-large-container-width: 640px;
+$grater-small-container-width: 300px;
+$grater-column-width: 300px;
+$grater-small-media-query: "all and (max-width: 660px)";
+
+// Grater container
+div.grater-container {
+  width: $grater-large-container-width;
+  margin: 0 auto;
+  
+  @media #{$grater-small-media-query} {
+    width: $grater-small-container-width;
+  }
+}
+
+// Grater row
+div.grater {
   // Columns
-  > section {
-    width: 300px;
+  > div {
+    width: $grater-column-width;
     margin: 0 0 2em;
 
     // First column
     &:first-child {
       float: left;
@@ -15,11 +30,11 @@
       float: right;
     }
   }
 
   // When the `reverse` class is added, the columns are switch
-  &.reverse > section {
+  &.reverse > div {
     &:first-child {
       float: right;
     }
 
     &:last-child {
@@ -39,13 +54,13 @@
   &:after {
     clear: both;
   }
 
   // Responsive
-  @media all and (max-width: 660px) {
+  @media #{$grater-small-media-query} {
     margin-bottom: 1em;
 
-    > section {
+    > div {
       float: none !important; // Shut up. I know, I know
       margin: 0 auto 2em;
     }
   }
 }