From 8623c984a275e7dadc89dccbdb773cbed93f3251 Mon Sep 17 00:00:00 2001 From: Matt Sweeney Date: Thu, 5 Sep 2013 13:52:42 -0700 Subject: [PATCH 1/5] Add flexbox support for webkit and IE. --- src/grids/css/grids-core.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/grids/css/grids-core.css b/src/grids/css/grids-core.css index a1cc10a..9c3ea29 100644 --- a/src/grids/css/grids-core.css +++ b/src/grids/css/grids-core.css @@ -23,6 +23,18 @@ * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows. */ font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; + + /* Use flexbox when possible to avoid letter-spacing side-effects. + NOTE: Firefox (as of 25) does not currently support flex-wrap, + so the -moz- version is omitted. + */ + + display: -webkit-flex; + -webkit-flex-flow: row wrap; + + /* IE10 uses display: flexbox */ + display: -ms-flexbox; + -ms-flex-flow: row wrap; } /* Opera as of 12 on Windows needs word-spacing. From 7cc69304f99059a58fe9797bf3b764f2d7997e91 Mon Sep 17 00:00:00 2001 From: Matt Sweeney Date: Thu, 5 Sep 2013 14:14:17 -0700 Subject: [PATCH 2/5] Add flexbox support for webkit and IE. --- src/grids/css/grids-r.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/grids/css/grids-r.css b/src/grids/css/grids-r.css index aa6723b..d7900e3 100644 --- a/src/grids/css/grids-r.css +++ b/src/grids/css/grids-r.css @@ -22,6 +22,18 @@ * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows. */ font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; + + /* Use flexbox when possible to avoid letter-spacing side-effects. + NOTE: Firefox (as of 25) does not currently support flex-wrap, + so the -moz- version is omitted. + */ + + display: -webkit-flex; + -webkit-flex-flow: row wrap; + + /* IE10 uses display: flexbox */ + display: -ms-flexbox; + -ms-flex-flow: row wrap; } /* Opera as of 12 on Windows needs word-spacing. From 50883fc2e21060b21ae5fe75b29e0b1736393a16 Mon Sep 17 00:00:00 2001 From: Eric Ferraiuolo Date: Thu, 5 Sep 2013 17:50:51 -0400 Subject: [PATCH 3/5] Add CSSLint flags to ignore linting flexbox rules --- src/grids/css/grids-core.css | 2 +- src/grids/css/grids-r.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/grids/css/grids-core.css b/src/grids/css/grids-core.css index 9c3ea29..c2e2778 100644 --- a/src/grids/css/grids-core.css +++ b/src/grids/css/grids-core.css @@ -1,4 +1,4 @@ -/*csslint regex-selectors:false*/ +/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/ .pure-g { letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ diff --git a/src/grids/css/grids-r.css b/src/grids/css/grids-r.css index d7900e3..a1d14c1 100644 --- a/src/grids/css/grids-r.css +++ b/src/grids/css/grids-r.css @@ -1,4 +1,4 @@ -/*csslint regex-selectors:false*/ +/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/ .pure-g-r { letter-spacing: -0.31em; From c5061a046fa78220e4d2adc096d161a2fb2302c8 Mon Sep 17 00:00:00 2001 From: Eric Ferraiuolo Date: Thu, 5 Sep 2013 17:51:13 -0400 Subject: [PATCH 4/5] Add Grids manual test for wrapping grids --- src/grids/tests/manual/responsive.html | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/grids/tests/manual/responsive.html b/src/grids/tests/manual/responsive.html index 7a4187b..56d2b79 100644 --- a/src/grids/tests/manual/responsive.html +++ b/src/grids/tests/manual/responsive.html @@ -527,7 +527,7 @@ -

Nested Grid

+

Nested Grids

@@ -603,5 +603,20 @@
+ + +

Wrapping Grids

+ +
+
+
Wrapping 1/2
+
+
+
Wrapping 1/2
+
+
+
Wrapping 1/3
+
+
From 7e0cdafddc73dd73ca0a78dce24497377c39eb30 Mon Sep 17 00:00:00 2001 From: Eric Ferraiuolo Date: Thu, 5 Sep 2013 18:14:01 -0400 Subject: [PATCH 5/5] Update HISTORY and code comments for Grids Flexbox --- HISTORY.md | 18 +++++++++++------- src/grids/css/grids-core.css | 8 +++++--- src/grids/css/grids-r.css | 8 +++++--- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index d958e83..c16d71e 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -45,13 +45,17 @@ NEXT ### Grids -* __[!]__ Improved Grids support with non-default fonts. This fixes issues with - custom fonts set either in a person's browser settings or by the developer - causing grids to break to a new line or overlap. The fix uses a specific font - stack on `.pure-g` and `.pure-g-r` classes to ensure the greatest OS/browser - compatibility. Now, by default grid units will now have - `font-family: sans-serif;` applied — this is the default font stack Pure's - Base module (Normalize.css) applies to the ``. +* __[!]__ Improved support for Grids across OS/browser combinations, and its + ability to withstand the use of non-default fonts when set by either the + person in their browser settings or by the developer using custom fonts. + + Grids now uses CSS3 Flexbox when possible to avoid the side-effects of setting + a negative `letter-spacing` — the fallback for older browsers. Grids also now + uses a specific font stack on `.pure-g` and `.pure-g-r` classes to ensure the + greatest OS/browser compatibility when non-default fonts are being used. By + default grid units will now have `font-family: sans-serif;` applied — this is + the default font stack Pure's Base module (Normalize.css) applies to the + ``. This is a **breaking change** if you are using any non-default fonts in your web project. Fortunately, it's quite easy to make sure your custom font stacks diff --git a/src/grids/css/grids-core.css b/src/grids/css/grids-core.css index c2e2778..d9362f4 100644 --- a/src/grids/css/grids-core.css +++ b/src/grids/css/grids-core.css @@ -24,9 +24,11 @@ */ font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; - /* Use flexbox when possible to avoid letter-spacing side-effects. - NOTE: Firefox (as of 25) does not currently support flex-wrap, - so the -moz- version is omitted. + /* + Use flexbox when possible to avoid `letter-spacing` side-effects. + + NOTE: Firefox (as of 25) does not currently support flex-wrap, so the + `-moz-` prefix version is omitted. */ display: -webkit-flex; diff --git a/src/grids/css/grids-r.css b/src/grids/css/grids-r.css index a1d14c1..b9ff062 100644 --- a/src/grids/css/grids-r.css +++ b/src/grids/css/grids-r.css @@ -23,9 +23,11 @@ */ font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; - /* Use flexbox when possible to avoid letter-spacing side-effects. - NOTE: Firefox (as of 25) does not currently support flex-wrap, - so the -moz- version is omitted. + /* + Use flexbox when possible to avoid `letter-spacing` side-effects. + + NOTE: Firefox (as of 25) does not currently support flex-wrap, so the + `-moz-` prefix version is omitted. */ display: -webkit-flex;