Pure 0.5.0-rc-1 - A Mobile-First Responsive Grid

Today, we're releasing Pure 0.5.0-rc-1, our first release candidate leading up to the Pure 0.5.0 release. Pure 0.5.0 brings a mobile-first responsive grid system to the library, and we're very excited to share it with you.

You can get it off the CDN with the following <link> tag:

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

We encourage everyone to try out this release candidate, and to file any issues that they encounter, so we can fix them before releasing Pure 0.5.0.

Mobile-first Grid System

The primary focus of this release is to improve Pure Grids. Pure's grid system is now mobile-first, and lets you declaratively create highly responsive layouts. This is best demonstrated with an example.

You can create a layout that takes up a single column on small screens, 2 columns on med-sized screens, and 4 columns on large screens:

<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>

Since these mobile-first grids prescribe certain media queries, they aren't part of Pure's core. Instead, they can be pulled in by adding the following <link> tag on your page:

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-min.css">
<!--<![endif]-->

If you want to customize the mobile-first grid by adding your own media query breakpoints or class names, you can take a look at our brand new Get Started Page. Take a look at the Grids documentation for more information about the new grid system.

Removing .pure-g-r

With the addition of the new grid class names, .pure-g-r and its associated media query were no longer needed, so we removed it from the library. If you were using .pure-g-r, it's easy to migrate to the new grid system:

Before

<div class="pure-g-r">
  <div class="pure-u-1-2">...</div>
  <div class="pure-u-1-2">...</div>
</div>

Now

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-2">...</div>
  <div class="pure-u-1 pure-u-md-1-2">...</div>
</div>

Fluid Images

Images that are used with a responsive grid system need to scale with the grid. Just add the new .pure-img class to your <img> elements to make them scale proportionally.

Site Updates

Our site also received a lot of love for this release, specifically the new Get Started Page.

It's the easiest way to get started with Pure. You can customize a grid for your next project and download a .zip file that contains all the HTML and CSS assets that you need. Check it out and let us know what you think!

Thanks for trying out the release candidate. If all goes well, we should have Pure 0.5.0 up very shortly!

---

View 0.5.0-rc-1 Changelog