library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-11-07 21:34:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Specify font stacks for grids and grid units

Browse Source 
By setting _specific_ font stacks grids, it can be assured that the
letter and word spacing will be applied correctly. The font stack for
grid units is then set back to `sans-serif`, which is also the default
font stack that Normalize.css applied to the `body`.

Closes #41
This commit is contained in:
Eric Ferraiuolo 2013-08-22 16:48:38 -04:00
parent 6f7e767a2c
commit 2bc0f29de3
2 changed files with 30 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/grids/css/grids-core.css
View File

@ -1,8 +1,16 @@
/*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.
*/
font-family: Helvetica, Arial, "DejaVu Sans", sans-serif;
}
/* Opera as of 12 on Windows needs word-spacing.
@ -23,3 +31,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;
}

14
src/grids/css/grids-r.css
View File

@ -4,6 +4,12 @@
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.
*/
font-family: Helvetica, Arial, "DejaVu Sans", sans-serif;
}
/* Opera as of 12 on Windows needs word-spacing.
@ -15,6 +21,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%;
}