Merge branch 'grids-fonts'

Conflicts:
	HISTORY.md
This commit is contained in:
Eric Ferraiuolo 2013-08-27 11:29:44 -04:00
commit 039b8f12f2
3 changed files with 91 additions and 0 deletions

View File

@ -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)

View File

@ -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;
}

View File

@ -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;