Yahoo的CSS框架，Pure 0.5.0 发布

We've collected some useful feedback from the Pure 0.5.0 Release Candidate and are pleased to be shipping Pure 0.5.0 today.

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

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

Be sure to try out our brand new Get Started Page.

What's Changed

If you had a chance to test out the Pure 0.5.0 Release Candidate, then you already know what to expect in this release! If you didn't get a chance to check that out, then read on!

Mobile-first Grid System

The primary focus of this release was 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 CSS 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/grids-responsive-old-ie-min.css"> <![endif]--> <!--[if gt IE 8]><!-->     <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/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. It lets you customize and generate a set of Grids that is perfectly suited for your next project, all in the browser. More on that below!

The Grids documentation has more information about the new grid system. It received a lot of love prior to this release as well.

Removing .pure-g-r

With the addition of the new grid class names, .pure-g-r and its associated CSS Media Queries 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.

Get Started Faster

Whether you're trying Pure for the first time, or you've used it before, we hope that the Get Started page will help you get started with your next web project quicker. The new Get Started page lets you:

• Understand the basics of Pure Grids, which is a key building block for building responsive layouts.
• Customize Pure Grids to fit your web project, by modifying Media Queries, columns and class names.
• Make sure your responsive design works well in older browsers that don't support CSS Media Queries.
• Download an HTML and CSS Starter Kit to get started faster.
• Save your work and come back to it later, since all the changes that you make are reflected in the URL. It's also back-button friendly.

Share and Save

Here's an example of a 12-column responsive Pure Grid with custom classnames (.col-* instead of .pure-u-*) that we made, to show you how easy it is to customize and share Pure Grids.

The Get Started page works great on all modern browsers, including mobile browsers! We hope you like it, along with the rest of this Pure release. If you run into any issues, please file an issue on GitHub.

View 0.5.0 Changelog