[!] Improved support for Grids across OS/browser combinations, and its
ability to withstand the use of non-default fonts when set by either the
person in their browser settings or by the developer using custom fonts.
Grids now uses CSS3 Flexbox when possible to avoid the side-effects of setting
a negative letter-spacing — the fallback for older browsers. Grids also now
uses a specific font stack on .pure-g and .pure-g-r classes to ensure the
greatest OS/browser compatibility when non-default fonts are being used. By
default grid units will now have font-family: sans-serif; applied — this is
the default font stack Pure's Base module (Normalize.css) applies to the
<body>.
This is a breaking change if you are using any non-default fonts in your
web project. Fortunately, it's quite easy to make sure your custom font stacks
apply to content within Pure Girds. Instead of applying your custom font to
only the <body> element, apply it to the grid units as well:
body,
.pure-g [class *= "pure-u"],
.pure-g-r [class *= "pure-u"] {
/* Set you're content font stack here: */
font-family: Georgia, Times, "Times New Roman", serif;
}
Refer to the Grids Documentation for more details on using
non-default fonts with Pure Grids.
(#41, #162, #166, #189: @adapterik @dannyfritz, @pandeiro)