fix gutter

MoOx · MoOx · commit 3060f16c80a3 · 2014-10-30T09:13:04.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.3.1 - 2014-10-30
+
+- fix gutter value
+
 # 0.3.0 - 2014-10-30
 
 - Add `cssr-Grid--withGutter` class for grid with gutter
diff --git a/README.md b/README.md
@@ -40,10 +40,10 @@ $ npm install cssrecipes-utils cssrecipes-grid
 First of all, you can override all these custom properties according to your needs (here are default values):
 
 ```css
-:root {
+:roo{
   --cssr-Grid-baseFontSize: 1rem;
   --cssr-Grid-baseFontSizeFallback: 16px;
-  --cssr-Grid-gutter: 0;
+  --cssr-Grid-gutter: 1rem; /* used for .cssr-Grid--withGutter */
 }
 ```
 
diff --git a/index.css b/index.css
@@ -1,7 +1,7 @@
 :root {
   --cssr-Grid-baseFontSize: 1rem;
   --cssr-Grid-baseFontSizeFallback: 16px;
-  --cssr-Grid-gutter: 0;
+  --cssr-Grid-gutter: 1rem;
 }
 
 .cssr-Grid {
@@ -14,15 +14,16 @@
   .cssr-Grid--withGutter { margin: 0 calc(-0.5 * var(--cssr-Grid-gutter)) }
 
     .cssr-Grid--withGutter > .cssr-Grid-cell { padding: 0 calc(0.5 * var(--cssr-Grid-gutter)) }
-
+    
   .cssr-Grid-cell {
     display: inline-block;
     vertical-align: top;
     font-size: var(--cssr-Grid-baseFontSize, var(--cssr-Grid-baseFontSizeFallback));
     width: 100%;
-    padding: 0 var(--cssr-Grid-gutter);
+    padding: 0;
   }
 
+
     .cssr-Grid-cell--alignTop {vertical-align: top }
     .cssr-Grid-cell--alignMiddle {vertical-align: middle }
     .cssr-Grid-cell--alignBottom {vertical-align: bottom }
diff --git a/test/index.html b/test/index.html
@@ -7,15 +7,27 @@
   <body>
     <div class="cssr-Grid">
       <div class="cssr-Grid-cell">
-        Grid-cell
+        <div class="test">Grid-cell</div>
       </div>
     </div>
     <div class="cssr-Grid">
       <div class="cssr-Grid-cell" style="width: 50%;">
-        Grid-cell
+        <div class="test">Grid-cell</div>
       </div>
       <div class="cssr-Grid-cell" style="width: 50%;">
-        Grid-cell
+        <div class="test">Grid-cell</div>
+      </div>
+    </div>
+
+    <div class="cssr-Grid cssr-Grid--withGutter">
+      <div class="cssr-Grid-cell" style="width: 33.3333%;">
+        <div class="test">Grid-cell with gutter</div>
+      </div>
+      <div class="cssr-Grid-cell" style="width: 33.3333%;">
+        <div class="test">Grid-cell with gutter</div>
+      </div>
+      <div class="cssr-Grid-cell" style="width: 33.3333%;">
+        <div class="test">Grid-cell with gutter</div>
       </div>
     </div>
   </body>
diff --git a/test/test.css b/test/test.css
@@ -11,7 +11,7 @@ html {
 }
 
 
-.cssr-Grid-cell {
+.test {
   border: 1px solid red;
   background: #f0f0f0;
 }

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ html {`
`11`	`11`	`}`
`12`	`12`
`13`	`13`
`14`		`-.cssr-Grid-cell {`
	`14`	`+.test {`
`15`	`15`	`border: 1px solid red;`
`16`	`16`	`background: #f0f0f0;`
`17`	`17`	`}`