github/pure
1
Fork 0
mirror of https://github.com/pure-css/pure synced 2025-01-10 17:26:23 +01:00
Code Releases Activity

Merge pull request #190 from ericf/grid-flexbox

Browse Source 
Use CSS3 Flexbox in Grids when possible
This commit is contained in:
Eric Ferraiuolo 2013-09-06 10:25:04 -07:00
commit 9d2bbccd83
4 changed files with 57 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
HISTORY.md
View File

@ -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 `<body>`.
* __[!]__ 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
`<body>`.
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

16
src/grids/css/grids-core.css
View File

@ -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 */
@ -23,6 +23,20 @@
* 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-` prefix 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.

16
src/grids/css/grids-r.css
View File

@ -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;
@ -22,6 +22,20 @@
* 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-` prefix 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.

17
src/grids/tests/manual/responsive.html
View File

@ -527,7 +527,7 @@
</div>
<h2>Nested Grid</h2>
<h2>Nested Grids</h2>
<div class="pure-g-r">
<div class="pure-u-1-2">
@ -603,5 +603,20 @@
</div>
</div>
</div>
<h2>Wrapping Grids</h2>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="content">Wrapping 1/2</div>
</div>
<div class="pure-u-1-2">
<div class="content">Wrapping 1/2</div>
</div>
<div class="pure-u-1-3">
<div class="content">Wrapping 1/3</div>
</div>
</div>
</body>
</html>