Skip to content

Pure 0.3.0 — A Flexbox-based Grid
Compare
Choose a tag to compare
@tilomitra tilomitra released this 09 Sep 22:14
v0.3.0
104a10c

Say hello to Pure 0.3.0, the latest and greatest version of Pure!

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">

Improved Grids Support

The focus of this release was to improve 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. We've been working with the developers in Pure's community to address issues with Grids — notably:

  • In old IE, grid units sometimes flowed to a new line. (#154)
  • For people who have customized their browser fonts, or developers using custom fonts with Pure Grids, grid units sometimes flowed to a new line (#41)

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. More on this below.

Using Grids with Non-Default Fonts

A lot of folks have run into an issue with grids and custom fonts not working well together. We gave this issue a lot of thought, and while it was important to fix it, we didn't want a fix that makes Pure Grids harder to use for people who aren't using custom fonts.

Pure 0.3.0 contains a breaking API change to the way that grids work. If you are using any non-default font in your project (anything apart from sans-serif), you will need to modify your project's CSS and add the following in:

body,
.pure-g [class *= "pure-u"],
.pure-g-r [class *= "pure-u"] {
    /* Set you're content font stack here, for example: */
    font-family: Georgia, Times, "Times New Roman", serif;
}

We recommend you add the .pure-g [class *= "pure-u"] and .pure-g-r [class *= "pure-u"] selectors to wherever you've defined your custom content or body font stack.

The benefit of making this change is that Pure grids should now work everywhere. Apart from our usual supported environments, the community helped us by literally testing this on multiple browsers on Ubuntu, Arch Linux, and Chrome OS. We want to make sure that Grids doesn't break your web project's UI, regardless of what OS/browser people are using.

We have more information regarding using fonts with Pure Grids directly on the Pure website, so head on over and give it a quick read.

Other Changes

  • Pure now requires the Base module (which is Normalize.css) to be on the page. Pure has essentially always required the styles provided by Normalize.css via the Base module, and this now makes it a firm requirement. The pure-min.css and pure-nr-min.css rollup files already include the Base module.
  • Removed forms-core.css. This was a copy of Normalize.css' form related styles. Now that Pure requires the Base module (which is Normalize.css) to be on the page, the Forms Core submodule is no longer needed.
  • We added back :focus styles to [readonly] input elements.
  • Added a height: auto rule to images within a .pure-g-r so that their aspect ratios are maintained when the page is resized.

View 0.3.0 Changelog

As always, if you have questions about this release, ask us on the Pure Blog. Keep submitting bugs and pull requests so we can build and improve Pure together!

Assets 3
Loading