Merge pull request #39 from simonsmith/master

Switch to flexbox for layout

Author: simonsmith

README.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://secure.travis-ci.org/suitcss/components-grid.png?branch=master)](http://travis-ci.org/suitcss/components-grid)
 
-A CSS grid component. The grid makes use of `inline-block` and `box-sizing` to
+A CSS grid component. The grid makes use of `flexbox` and `box-sizing` to
 provide features that float-based layouts cannot.
 
 N.B. This component relies on particular dimensions being applied to cells in
@@ -20,11 +20,12 @@ Read more about [SUIT CSS](https://github.com/suitcss/suit/).
 
 * Fluid layout.
 * Intelligent cell wrapping.
+* Evenly fit cell spacing
+* Equal height columns
 * Horizontal centering of cells.
 * Custom vertical alignment of cells (top, bottom, or middle).
 * Cell width is controlled independently of grid gutter.
 * Infinite nesting.
-* Built-in redundancy.
 
 ## Available classes
 
@@ -33,22 +34,35 @@ Read more about [SUIT CSS](https://github.com/suitcss/suit/).
 * `Grid--alignRight`: right-align all child `Grid-cell`
 * `Grid--alignMiddle`: middle-align all child `Grid-cell`
 * `Grid--alignBottom`: bottom-align all child `Grid-cell`
+* `Grid--fit`: evenly distribute space amongst all child `Grid-cell`
+* `Grid--equalHeight`: all child `Grid-cell` match height of the tallest
 * `Grid--withGutter`: adds a gutter between cells
 * `Grid-cell`: a child cell of `Grid` that wraps grid content
 * `Grid-cell--center`: center an individual `Grid-cell`
 
 ## Configurable variables
 
-* `--Grid-font-size`: the font-size to use within the Grid (defaults to 1rem).
 * `--Grid-gutter-size`: the width of the gutter applied by the `Grid--withGutter` modifier class.
 
 ## Use
 
 A simple grid is easy to create. A grid container can have any number of child
-cells.
+cells. When used with `Grid--fit` space is evenly distributed without need for
+sizing utilities.
 
 ```html
-<div class="Grid [Grid--alignCenter|Grid--alignRight|Grid--alignMiddle|Grid--alignBottom]">
+<div class="Grid Grid--fit Grid--withGutter">
+  <div class="Grid-cell"></div>
+  <div class="Grid-cell"></div>
+  <div class="Grid-cell"></div>
+  <div class="Grid-cell"></div>
+</div>
+```
+
+For more granular control over layout make use of modifiers and sizing utilities.
+
+```html
+<div class="Grid [Grid--alignCenter|Grid--alignRight|Grid--alignMiddle|Grid--alignBottom|Grid--fit|Grid--equalHeight]">
   <div class="Grid-cell u-size1of2 u-lg-size6of12"></div>
   <div class="Grid-cell u-size1of2 u-lg-size4of12"></div>
   <div class="Grid-cell u-size1of3 u-lg-size2of12"></div>
@@ -87,7 +101,7 @@ BAD:
 ```
 
 You can nest grids in any context, including one that uses dimension or offset
-utilities, but keep in mind that the the dimensions will be relative to the
+utilities, but keep in mind that the dimensions will be relative to the
 grid's width, and not the width of the whole application.
 
 ```html
@@ -114,18 +128,26 @@ To generate a build:
 npm run build
 ```
 
-To generate the testing build.
+To generate the testing build:
 
 ```
 npm run build-test
 ```
 
+To watch the files for making changes to test:
+
+```
+npm run watch
+```
+
 Basic visual tests are in `test/index.html`.
 
 ## Browser support
 
 * Google Chrome (latest)
 * Opera (latest)
-* Firefox 4+
-* Safari 5+
-* Internet Explorer 9+
+* Firefox 28+
+* Safari 6.1+
+* Internet Explorer 10+
+
+Refer to the [caniuse](http://caniuse.com/) page for [flexbox](http://caniuse.com/#feat=flexbox)

build.js

@@ -0,0 +1,22 @@
+const postcss = require('postcss');
+const bemLinter = require('postcss-bem-linter');
+const reporter = require('postcss-reporter');
+
+module.exports = {
+  use: [
+    "postcss-import",
+    "postcss-custom-properties",
+    "postcss-calc",
+    "postcss-custom-media",
+    "autoprefixer",
+    "postcss-reporter"
+  ],
+  "postcss-import": {
+    transform(css) {
+      return postcss([bemLinter, reporter]).process(css).css;
+    },
+    "postcss-reporter": {
+      clearMessages: true
+    }
+  }
+};

lib/grid.css

@@ -1,7 +1,6 @@
-/** @define Grid; use strict */
+/** @define Grid */
 
 :root {
-  --Grid-font-size: 1rem;
   --Grid-gutter-size: 20px;
 }
 
@@ -20,57 +19,69 @@
  *
  * 1. Account for browser defaults of elements that might be the root node of
  *    the component.
- * 2. Remove inter-cell whitespace that appears between `inline-block` child
- *    elements.
- * 3. Ensure consistent default alignment.
  */
 
 .Grid {
-  display: block; /* 1 */
-  font-size: 0; /* 2 */
+  display: flex; /* 1 */
+  box-sizing: border-box;
+  flex-flow: row wrap;
   margin: 0; /* 1 */
   padding: 0; /* 1 */
-  text-align: left; /* 3 */
 }
 
 /**
  * Modifier: center align all grid cells
  */
 
 .Grid--alignCenter {
-  text-align: center;
+  justify-content: center;
 }
 
 /**
  * Modifier: right align all grid cells
  */
 
 .Grid--alignRight {
-  text-align: right;
+  justify-content: flex-end;
 }
 
 /**
  * Modifier: middle-align grid cells
  */
 
-.Grid--alignMiddle > .Grid-cell {
-  vertical-align: middle;
+.Grid--alignMiddle {
+  align-items: center;
 }
 
 /**
  * Modifier: bottom-align grid cells
  */
 
-.Grid--alignBottom > .Grid-cell {
-  vertical-align: bottom;
+.Grid--alignBottom {
+  align-items: flex-end;
 }
 
 /**
- * Modifier: gutters
+ * Modifier: allow cells to equal distribute width
  *
- * NOTE: this can trigger a horizontal scrollbar if the component is as wide as
- * the viewport. Use padding on a container, or `overflow-x:hidden` to protect
- * against it.
+ * 1. Provide all values to avoid IE10 bug with shorthand flex - http://git.io/vllC7
+ *    Use `0%` to avoid bug in IE10/11 with unitless flex basis - http://git.io/vllWx
+ */
+
+.Grid--fit > .Grid-cell {
+  flex: 1 1 0%; /* 1 */
+}
+
+/**
+ * Modifier: all cells match height of tallest cell in a row
+ */
+
+.Grid--equalHeight > .Grid-cell {
+  display: flex;
+}
+
+/**
+ * Modifier: gutters
  */
 
 .Grid--withGutter {
@@ -86,24 +97,14 @@
 
 /**
  * No explicit width by default. Rely on combining `Grid-cell` with a dimension
- * utility or a component class that extends 'grid'.
+ * utility or a component class that extends 'Grid'.
  *
- * 1. Fundamentals of the non-float grid layout.
- * 2. Reset font size change made in `Grid`.
- * 3. Keeps content correctly aligned with the grid direction.
- * 4. Controls vertical positioning of units.
- * 5. Make cells full-width by default.
+ * 1. Set flex items to full width by default
  */
 
 .Grid-cell {
-  box-sizing: border-box;
-  display: inline-block; /* 1 */
-  font-size: var(--Grid-font-size); /* 2 */
-  margin: 0;
-  padding: 0;
-  text-align: left; /* 3 */
-  vertical-align: top; /* 4 */
-  width: 100%; /* 5 */
+  flex: 0 0 100%; /* 1 */
+  box-sizing: inherit;
 }
 
 /**
@@ -113,6 +114,5 @@
  */
 
 .Grid-cell--center {
-  display: block;
   margin: 0 auto;
 }

package.json

@@ -8,17 +8,26 @@
     "lib"
   ],
   "devDependencies": {
+    "autoprefixer": "^6.0.3",
+    "postcss": "^5.0.10",
+    "postcss-bem-linter": "^2.0.0",
+    "postcss-calc": "^5.0.0",
+    "postcss-cli": "^2.3.2",
+    "postcss-custom-media": "^5.0.0",
+    "postcss-custom-properties": "^5.0.0",
+    "postcss-import": "^7.1.0",
+    "postcss-reporter": "^1.3.0",
     "suitcss-components-test": "*",
-    "suitcss-preprocessor": "~0.4.0",
     "suitcss-utils-offset": "~0.5.0",
-    "suitcss-utils-size": "~0.7.0"
+    "suitcss-utils-size": "~0.8.0"
   },
   "scripts": {
     "build": "npm run setup && npm run preprocess",
     "build-test": "npm run setup && npm run preprocess-test",
-    "preprocess": "suitcss index.css build/build.css",
-    "preprocess-test": "suitcss test/test.css build/test.css",
-    "setup": "npm install && mkdir -p build"
+    "preprocess": "postcss -c build.js -o build/build.css index.css",
+    "preprocess-test": "postcss -c build.js -o build/test.css test/test.css",
+    "setup": "npm install && mkdir -p build",
+    "watch": "npm run preprocess-test -- -w"
   },
   "repository": {
     "type": "git",