+```
+
+For more granular control over layout make use of modifiers and sizing utilities.
+
+```html
+
@@ -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)
diff --git a/build.js b/build.js
new file mode 100644
index 0000000..6b1f895
--- /dev/null
+++ b/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
+ }
+ }
+};
diff --git a/lib/grid.css b/lib/grid.css
index d18a576..9ddf34b 100644
--- a/lib/grid.css
+++ b/lib/grid.css
@@ -1,7 +1,6 @@
-/** @define Grid; use strict */
+/** @define Grid */
:root {
- --Grid-font-size: 1rem;
--Grid-gutter-size: 20px;
}
@@ -20,17 +19,14 @@
*
* 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 */
}
/**
@@ -38,7 +34,7 @@
*/
.Grid--alignCenter {
- text-align: center;
+ justify-content: center;
}
/**
@@ -46,31 +42,46 @@
*/
.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;
}
diff --git a/package.json b/package.json
index a26c0bc..901332c 100644
--- a/package.json
+++ b/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",
diff --git a/test/index.html b/test/index.html
index 4981780..ec93719 100644
--- a/test/index.html
+++ b/test/index.html
@@ -10,6 +10,7 @@
border: 1px solid black;
margin-bottom: 10px;
min-height: 50px;
+ width: 100%;
}
.fixture-Box--doubleHeight {
@@ -131,6 +132,29 @@
supports nested grids