diff --git a/HISTORY.md b/HISTORY.md index c91c038..65c22e6 100644 --- a/HISTORY.md +++ b/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) diff --git a/src/grids/css/grids-core.css b/src/grids/css/grids-core.css index 5b8cb8c..40ec012 100644 --- a/src/grids/css/grids-core.css +++ b/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; +} diff --git a/src/grids/css/grids-r.css b/src/grids/css/grids-r.css index 6294068..def75bf 100644 --- a/src/grids/css/grids-r.css +++ b/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;