library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2025-01-13 02:04:23 +00:00
Code Issues Actions Packages Projects Releases Wiki 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 ### Grids
* __[!]__ Improved Grids support with non-default fonts. This fixes issues with * __[!]__ Improved support for Grids across OS/browser combinations, and its
custom fonts set either in a person's browser settings or by the developer ability to withstand the use of non-default fonts when set by either the
causing grids to break to a new line or overlap. The fix uses a specific font person in their browser settings or by the developer using custom fonts.
stack on `.pure-g` and `.pure-g-r` classes to ensure the greatest OS/browser
compatibility. Now, by default grid units will now have Grids now uses CSS3 Flexbox when possible to avoid the side-effects of setting
`font-family: sans-serif;` applied — this is the default font stack Pure's a negative `letter-spacing` — the fallback for older browsers. Grids also now
Base module (Normalize.css) applies to the `<body>`. 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 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 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 { .pure-g {
letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ 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. * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
*/ */
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; 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. /* 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 { .pure-g-r {
letter-spacing: -0.31em; letter-spacing: -0.31em;
@ -22,6 +22,20 @@
* Helvetica, Arial, sans-serif: Common font stack on OS X and Windows. * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
*/ */
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; 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. /* Opera as of 12 on Windows needs word-spacing.

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

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