This is a major version bump that has the following changes:

• Removed the font-family hack from Grids (#1074)
• IE is no longer supported and all code and documentation references have been removed
• The browserslist configuration has been updated to "> 1%" browser usage. You can use the browserslist tool to see which browsers this now covers.

Migration

This major version should not include too many breaking changes for your app, but please check the following:

• Since the list of supported browsers has now changed, please check that your site is still functioning in any browsers that you continue to support.
• Verify your grids are still functioning correctly with the font-family hack still removed. This should not affect you as it was a hack for older browsers.

• feat: added media queries for 2.5K and 4K screens (#1065)

• feat: support xxl (1920px) media query https://github.com/pure-css/pure/pull/965

• chore: update to cssmin@4

• fix #824: cursor style for disabled menu link

• chore: update license path

• fix: update browser list for all environments

• refactor: Remove button CSS for IE 6-8

• refactor: remove usage of deprecated webkit-overflow-scrolling https://github.com/pure-css/pure/commit/da4bf6b46ae4d9419d07e17ac7ce79c518e45847

This is a major version bump that has the following changes:

• Reduced overall size of Pure to 3.6kb (gzipped/min)
• Updated Normalize to v8.
• Removed bower
• Removed old IE 8 hacks
• Removed deprecated pure-help-inline form class

Migration

This major version should not include too many breaking changes for your app, but please check the following:

• Normalize Upgraded from v3 to v8. Many things have changed, be sure to verify your site properly.
• Normalize removed the default font-family, but we have added to the base.css for consistency and due to the fact that the grids system leverages the font-family for letter-spacing.

New Browser support

• Chrome
• Edge
• Firefox
• Internet Explorer 10+
• Safari 8+
• Opera

Deprecated support for < IE 10

• Fix "selected" menu item labels in nested menus (#708)
• Fix bug in pure-button active state's border color. (#729)
• Fix horizontal scrollbars not appearing in IE11 and Chrome (#740)
• Fix pure-table-bordered issues (#718)

The community has battle-tested Pure and provided valuable feedback. We are now at a place where we can guarantee backwards compatibility through all subsequent 1.x releases.

We hope you have found Pure to be useful and unobtrusive.. To provide feedback, please comment on this GitHub issue, or file a new issue to have it tracked as a separate thread.

• Added proper module API for node users [#619]

Buttons

• Added Button Groups to Pure [#621]

Menus

• Reset style for horizontal dropdown separator [#620]

• Migrate to PostCSS for browser prefixes [#617]
• Remove duplicate Firefox inner focus border [#457]
• Fix grid inside table in IE 10/11 [#504]
• Fix CSSLint issues [#609]
• Upgraded grunt dependencies to 1.x [#609]

Nothing of substance has changed between the release of 0.6.0-rc-1 and this release, 0.6.0 proper. Most of the changes made in response to the release candidate were small edits to the Pure website, not changes to the Pure CSS library itself. Feedback has been very positive.

Synopsis

This release incorporates numerous small bug fixes and PRs. Its big new feature is a rewrite of Menus. Menus are now less opinionated and easier to customize. We hope this makes the Menu construct more practical.

A caution regarding "upgrading"

This 0.x release of Pure is not guaranteed to be 100% backwards compatible with previous releases; Menus in particular have changed a great deal. So while it's great to start a new project with Pure 0.6.0, you should be cautious about upgrading Pure on a site that's already finely tuned and quality-checked.

Testing

You can consume this Release Candidate (v0.6.0-rc-1) the same way you usually consume Pure, whether you pull it off the CDN or install it via NPM or Bower. Just reference the new version in your urls with this rc version. For example:

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

If you're interested in playing with the code, the pure-site repo has instructions for running the site locally in conjunction with a local copy of Pure. Or, you can visit the staging server to view the (revised website) [http://stage.purecss.io] working in concert with the new release.

About the Pure website

Pure has an accompanying website. While not bundled with Pure itself (it's in a separate repo), it is an important source of documentation and examples. You'll want to refer to it when checking out the new version of Pure, but since this is a pre-release, we're only publishing the website changes to our staging server, http://stage.purecss.io. There will be a slight delay between the time the Pure release hits GitHub and when the updating staging server goes live. Check the version number for Pure on the pure-site to be sure you're seeing the right version.

Changes to look out for

Base

Pure now uses Normalize 3.0.2. Note that support for IE7 and below has been dropped.

Grids

Grids have not changed.

Buttons

Buttons have not changed much, but watch out for sizing issues. .pure-button now uses box-sizing: border-box so that whether you use an anchor tag or a button tag, they render consistently.

Forms

Forms has no major changes to the classes or markup structure, but does have some changes that could affect forms built using Pure 0.5.0. You'll need to do a little QA to be sure everything's OK, as some padding and alignment properties have been tweaked.

Menus

There's an all-new Menu construct. The markup is different, the classnames are different, and a new example script to enable drop-downs will be included on the Pure website. There are also new examples illustrating how to achieve some common menu design patterns.

The pure-paginator construct has been removed from Menus, as it's trivial to create your own construct using inlined pure-button links.

Ye Olde IE

With the move to Normalize 3.0.x, we're dropping support for IE7 and below. Most of the IE6/7 specific rules have been removed from Pure. (There were not very many.)

IE8 is still supported.

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

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

This is a patch release to fix some minor bugs that were reported and fixed by contributors.

As we move forward making it easier for developers to build on Pure we're trying to provide the minimal set of CSS declarations needed to provide a solid base foundation. The goal with Pure is to solve the common and hard CSS problems that most web projects face.

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

Bower Package Improvements

@stevenvachon added main to Pure's bower.json file to allow easier integration with build processes and tooling. (#286)

Forms Improvements

We've removed some of the font-size declarations in Forms to allow the defaults to apply and make it easier for developers to customize. This may affect your app, and you can easily handle this by setting the font-size you want for form <input>s.

@jpetto and @kwando contributed some fixes for some minor bugs in Forms. The changes improve the extensibility of the Forms' styles, making it easier for developers to customize. (#265, #283, #295)

View 0.4.2 Changelog

Note: We released Pure 0.4.0, but the CSS selector order was corrupted. We encourage everyone to upgrade directly to Pure 0.4.1.

Today, we're excited to ship Pure 0.4.1. This release consists of enhancements and bug fixes that makes it easier to work with the library. We've also done a good deal of work on Pure's website to prepare for an upcoming enhancement to Pure's grid system.

You can grab this release of our CDN:

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

What's changed?

We've made enhancements to most of the Pure components for this release.

• You can now use non-reduced fraction class names when laying out a grid. This means that we have rules for classes such as .pure-u-12-24 as well as .pure-u-1-2.
• You can now add a hidden attribute to your element to hide it.
• Buttons now have visually uniform default padding on all four sides, so they look a little nicer.
• <input> buttons now have the same height as non-input buttons.
• <textareas> within .pure-form-aligned look better, thanks to a vertical alignment fix.

You can check out the HISTORY.md for a full list of changes.

A special shout-out to everyone who contributed to this release: @achalv, @albertosantini, @andrewwakeling, @AurelioDeRosa, @dougdavies, @ItsAsbreuk, @mike-engel, @narcis-radu, @stevenvachon, and @rictorres.

Tooling and Pure's website

Over the last few months, we've been working on tools to solve some common CSS pain points:

• Writing mobile-first responsive CSS, while supporting old IE browsers
• Dealing with media queries
• Prefixing and manipulating class names to suit your coding convention
• Customizing Pure

While we haven't officially launched these tools yet, we've been using some of them in Pure's source code as well as its website.

For instance, this release of Pure removes grid-units.css and replaces it with a Grunt task that generates grid units on-the-fly. This is done through the rework-pure-grids plugin. We've also been using it on Pure's website, which now uses a mobile-first responsive grid system.

To celebrate this mobile-first relaunch of the website, we went through and gave all the layouts a face-lift. Make sure to check them out!

We're really embracing tooling in order to keep Pure's code-base small while offering developers ways to customize the library. We're really excited to show everyone what we've been working on, and you can expect to hear more about it soon!

View 0.4.1 Changelog