grids.css in purecss-0.3.0

- old
+ new

@@ -1,16 +1,50 @@
 /*!
-Pure v0.2.2-pre
+Pure v0.3.1-pre
 Copyright 2013 Yahoo! Inc. All rights reserved.
 Licensed under the BSD License.
 https://github.com/yui/pure/blob/master/LICENSE.md
 */
+/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
+
 .pure-g {
     letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
     *letter-spacing: normal; /* reset IE < 8 */
     *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
     text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
+
+    /*
+    Sets the font stack to fonts known to work properly with the above letter
+    and word spacings. See: https://github.com/yui/pure/issues/41/
+
+    The following font stack makes Pure Grids work on all known environments.
+
+    * FreeSans: Ships with many Linux distros, including Ubuntu
+
+    * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
+      Arial to get picked up by the browser, even though neither is available
+      in Chrome OS.
+
+    * Droid Sans: Ships with all versions of Android.
+
+    * 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.
    The ".opera-only" selector is used to prevent actual prefocus styling
    and is not required in markup.
@@ -28,10 +62,18 @@
     word-spacing: normal;
     vertical-align: top;
     text-rendering: auto;
 }
 
+/*
+Resets the font family back to the OS/browser's default sans-serif font,
+this the same font stack that Normalize.css sets for the `body`.
+*/
+.pure-g [class *= "pure-u"] {
+    font-family: sans-serif;
+}
+
 .pure-u-1,
 .pure-u-1-2,
 .pure-u-1-3,
 .pure-u-2-3,
 .pure-u-1-4,
@@ -71,122 +113,181 @@
     width: 100%;
 }
 
 .pure-u-1-2 {
     width: 50%;
+    *width: 49.969%;
 }
 
 .pure-u-1-3 {
-    width: 33.33333%;
+    width: 33.3333%;
+    *width: 33.3023%;
 }
 
 .pure-u-2-3 {
-    width: 66.66666%;
+    width: 66.6667%;
+    *width: 66.6357%;
 }
 
 .pure-u-1-4 {
     width: 25%;
+    *width: 24.969%;
 }
 
 .pure-u-3-4 {
     width: 75%;
+    *width: 74.969%;
 }
 
 .pure-u-1-5 {
     width: 20%;
+    *width: 19.969%;
 }
 
 .pure-u-2-5 {
     width: 40%;
+    *width: 39.969%;
 }
 
 .pure-u-3-5 {
     width: 60%;
+    *width: 59.969%;
 }
 
 .pure-u-4-5 {
     width: 80%;
+    *width: 79.969%;
 }
 
 .pure-u-1-6 {
-    width: 16.666%;
+    width: 16.6667%;
+    *width: 16.6357%;
 }
 
 .pure-u-5-6 {
-    width: 83.33%;
+    width: 83.3333%;
+    *width: 83.3023%;
 }
 
 .pure-u-1-8 {
     width: 12.5%;
+    *width: 12.469%;
 }
 
 .pure-u-3-8 {
     width: 37.5%;
+    *width: 37.469%;
 }
 
 .pure-u-5-8 {
     width: 62.5%;
+    *width: 62.469%;
 }
 
 .pure-u-7-8 {
     width: 87.5%;
+    *width: 87.469%;
 }
 
 .pure-u-1-12 {
     width: 8.3333%;
+    *width: 8.3023%;
 }
 
 .pure-u-5-12 {
-    width: 41.6666%;
+    width: 41.6667%;
+    *width: 41.6357%;
 }
 
 .pure-u-7-12 {
     width: 58.3333%;
+    *width: 58.3023%;
 }
 
 .pure-u-11-12 {
-    width: 91.6666%;
+    width: 91.6667%;
+    *width: 91.6357%;
 }
 
 .pure-u-1-24 {
-    width: 4.1666%;
+    width: 4.1667%;
+    *width: 4.1357%;
 }
 
 .pure-u-5-24 {
     width: 20.8333%;
+    *width: 20.8023%;
 }
 
 .pure-u-7-24 {
-    width: 29.1666%;
+    width: 29.1667%;
+    *width: 29.1357%;
 }
 
 .pure-u-11-24 {
     width: 45.8333%;
+    *width: 45.8023%;
 }
 
 .pure-u-13-24 {
-    width: 54.1666%;
+    width: 54.1667%;
+    *width: 54.1357%;
 }
 
 .pure-u-17-24 {
     width: 70.8333%;
+    *width: 70.8023%;
 }
 
 .pure-u-19-24 {
-    width: 79.1666%;
+    width: 79.1667%;
+    *width: 79.1357%;
 }
 
 .pure-u-23-24 {
     width: 95.8333%;
+    *width: 95.8023%;
 }
 
-/*csslint regex-selectors:false, unqualified-attributes:false*/
+/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
 
 .pure-g-r {
     letter-spacing: -0.31em;
     *letter-spacing: normal;
     *word-spacing: -0.43em;
+
+    /*
+    Sets the font stack to fonts known to work properly with the above letter
+    and word spacings. See: https://github.com/yui/pure/issues/41/
+
+    The following font stack makes Pure Grids work on all known environments.
+
+    * FreeSans: Ships with many Linux distros, including Ubuntu
+
+    * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
+      Arial to get picked up by the browser, even though neither is available
+      in Chrome OS.
+
+    * Droid Sans: Ships with all versions of Android.
+
+    * 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.
    The ".opera-only" selector is used to prevent actual prefocus styling
    and is not required in markup.
@@ -194,11 +295,20 @@
 .opera-only :-o-prefocus,
 .pure-g-r {
     word-spacing: -0.43em;
 }
 
+/*
+Resets the font family back to the OS/browser's default sans-serif font,
+this the same font stack that Normalize.css sets for the `body`.
+*/
+.pure-g-r [class *= "pure-u"] {
+    font-family: sans-serif;
+}
+
 .pure-g-r img {
     max-width: 100%;
+    height: auto;
 }
 
 @media (min-width: 980px) {
     .pure-visible-phone {
         display: none;