Merge branch 'grids-fonts'

Conflicts:
	HISTORY.md

HISTORY.md

@@ -20,12 +20,39 @@ NEXT
   have a separate `*width` value for oldIEs. This value is `0.005%` less than
   the standard `width` value. This fix does not affect modern browsers. ([#154][])
 
+
 * Added a `height: auto` rule to images within a `.pure-g-r` so that their aspect
   ratios are maintained when the page is resized. ([#172][]: @dchest)
 
+* (!) Added the following font stack to `.pure-g, .pure-g-r` in order to prevent
+  grids from breaking in various target environments:
+
+  ```css
+  font-family: "Bitstream Charter", Tinos, "Droid Sans", "DejaVu Sans",
+                Helvetica, Arial, sans-serif;
+  ```
+
+  This is a *breaking* change. If you are using any non-default font in your project,
+  you will need to modify your CSS and add a `font-family` to the grid unit classes:
+
+  ```css
+  .pure-g [class *= "pure-u"],
+  .pure-g-r [class *= "pure-u"] {
+
+    /* Add your font in here, whether it's a custom font or a normal font */
+    font-family: "Times New Roman", serif;
+
+  }
+  ```
+
+  Refer to the [Grids Documentation]() for more details on using non-default fonts with
+  Pure Grids. ([#41][] @dannyfritz, @pandeiro, and many others!)
+
+[#41]: https://github.com/yui/pure/issues/41
 [#143]: https://github.com/yui/pure/issues/143
 [#154]: https://github.com/yui/pure/issues/154
 [#170]: https://github.com/yui/pure/issues/170
+[Grids Documentation]: http://purecss.io/grids/
 
 
 0.2.1 (2013-07-17)

src/grids/css/grids-core.css

@@ -1,8 +1,33 @@
+/*csslint regex-selectors: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 Grid work on all known environments.
+
+    * "Bitstream Charter": Chromebook Pixel running Ubuntu 13.04.
+
+    * Tinos: Chromebook Pixel running Chrome OS. Tinos has to be defined
+    before `Helvetica, Arial` to get picked up by the browser, even though
+    Helvetica or Arial isn't available in that environment.
+
+    * "Droid Sans": Arch Linux with Chromium 29.x.
+
+    * "DejaVu Sans": A common font available on Ubuntu and other environments
+    that acts as a nice fallback
+
+    * Helvetica, Arial, sans-serif: Common font stack on OSX and Windows.
+
+    */
+    font-family: "Bitstream Charter", Tinos, "Droid Sans", "DejaVu Sans", Helvetica, Arial, sans-serif;
 }
 
 /* Opera as of 12 on Windows needs word-spacing.
@@ -23,3 +48,11 @@
     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;
+}

src/grids/css/grids-r.css

@@ -4,6 +4,29 @@
     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 Grid work on all known environments.
+
+    * "Bitstream Charter": Chromebook Pixel running Ubuntu 13.04.
+
+    * Tinos: Chromebook Pixel running Chrome OS. Tinos has to be defined
+    before `Helvetica, Arial` to get picked up by the browser, even though
+    Helvetica or Arial isn't available in that environment.
+
+    * "Droid Sans": Arch Linux with Chromium 29.x.
+
+    * "DejaVu Sans": A common font available on Ubuntu and other environments
+    that acts as a nice fallback
+
+    * Helvetica, Arial, sans-serif: Common font stack on OSX and Windows.
+
+    */
+    font-family: "Bitstream Charter", Tinos, "Droid Sans", "DejaVu Sans", Helvetica, Arial, sans-serif;
 }
 
 /* Opera as of 12 on Windows needs word-spacing.
@@ -15,6 +38,14 @@
     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;