Merge pull request #9 from cssrecipes/feat.flexbox

Added: flexbox Grid

Author: MoOx

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 1.0.0 - 2015-05-30
+
+- added flexbox grid
+
 # 0.4.0 - 2014-11-08
 
 - update org prefix to `r`

README.md

@@ -8,10 +8,20 @@
 $ npm install cssrecipes-grid
 ```
 
+Default grid implementation is using inline-block+font-size 0 method:
+
 ```css
 @import "./node_modules/cssrecipes-grid/index.css";
 ```
 
+If you want, an alternative grid based on flexbox is available in cssrecipes-grid/flex.
+
+```css
+@import "./node_modules/cssrecipes-grid/flex.css";
+```
+
+Both rely on same classes, so generic documentation below should works both implementations"
+
 _Advice: you can use size utilities from [`cssrecipes-utils`](http://github.com/cssrecipes/utils) for convenience.  
 It includes `.r-(all|min|max)*` classes used in the examples below to define grid cells width._
 
@@ -42,7 +52,6 @@ First of all, you can override all these custom properties according to your nee
 ```css
 :root {
   --r-Grid-baseFontSize: 1rem;
-  --r-Grid-baseFontSizeFallback: 16px;
   --r-Grid-gutter: 1rem; /* used for .r-Grid--withGutter */
 }
 ```

flex.css

@@ -0,0 +1,13 @@
+@import "./lib/base.css";
+
+.r-Grid {
+  display: flex;
+}
+  .r-Grid-cell {
+    display: block;
+    font-size: var(--r-Grid-baseFontSize);
+  }
+
+    .r-Grid-cell--alignTop {margin-bottom: auto }
+    .r-Grid-cell--alignMiddle {margin-top: auto; margin-bottom: auto }
+    .r-Grid-cell--alignBottom {margin-top: auto }

index.css

@@ -1,26 +1,12 @@
-:root {
-  --r-Grid-baseFontSize: 1rem;
-  --r-Grid-baseFontSizeFallback: 16px;
-  --r-Grid-gutter: 1rem;
-}
+@import "./lib/base.css";
 
 .r-Grid {
   display: block;
   font-size: 0; /* whitespace control */
-  padding: 0;
-  margin: 0;
 }
-  /* Modifier --withGutter */
-  .r-Grid--withGutter { margin: 0 calc(-0.5 * var(--r-Grid-gutter)) }
-
-    .r-Grid--withGutter > .r-Grid-cell { padding: 0 calc(0.5 * var(--r-Grid-gutter)) }
-    
   .r-Grid-cell {
     display: inline-block;
     vertical-align: top;
-    font-size: var(--r-Grid-baseFontSize, var(--r-Grid-baseFontSizeFallback));
-    width: 100%;
-    padding: 0;
   }
 
 

lib/base.css

@@ -0,0 +1,19 @@
+:root {
+  --r-Grid-baseFontSize: 1rem;
+  --r-Grid-gutter: 1rem;
+}
+
+.r-Grid {
+  padding: 0;
+  margin: 0;
+}
+  /* Modifier --withGutter */
+  .r-Grid--withGutter { margin: 0 calc(-0.5 * var(--r-Grid-gutter)) }
+
+    .r-Grid--withGutter > .r-Grid-cell { padding: 0 calc(0.5 * var(--r-Grid-gutter)) }
+
+  .r-Grid-cell {
+    font-size: var(--r-Grid-baseFontSize);
+    width: 100%;
+    padding: 0;
+  }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssrecipes-grid",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "BEMish grid component",
   "keywords": [
     "browser",
@@ -27,14 +27,15 @@
     "CHANGELOG.md",
     "LICENSE",
     "lib",
-    "index.css"
+    "index.css",
+    "flex.css"
   ],
   "devDependencies": {
     "cssnext": "^0.4.0"
   },
   "scripts": {
     "setup": "npm install && mkdir -p build",
-    "preprocess": "cssnext index.css build/index.css",
+    "preprocess": "cssnext index.css build/index.css && cssnext flex.css build/flex.css",
     "build": "npm run setup && npm run preprocess",
     "preprocess-test": "cssnext test/test.css build/test.css",
     "build-test": "npm run setup && npm run preprocess-test",