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

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!

This is a pre-release for Pure 0.3.0.

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

View 0.3.0 Changelog | Latest Docs

This is a pre-release for Pure 0.3.0.

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

View 0.3.0 Changelog | Latest Docs

This is a pre-release for Pure 0.3.0.

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

View 0.3.0 Changelog | Latest Docs

Over the last few weeks, we have been working with folks in the community to iron out bugs, and improve code quality. Today, we're thrilled to announce that these fixes have resulted in a new release, Pure 0.2.1!

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

What's New

This release is focused exclusively on fixing bugs. In all, we fixed 16 issues between Pure 0.2.0 and 0.2.1. Some of the notable fixes include:

• Updating pure-u-1 to be display: inline-block, instead of display: block [#94]
• Fix the pure-input-rounded class so that it actually rounds input elements [#109]
• Fixing an issue in grids that caused elements to overlap [#95]

You can find a full changelog in Pure's HISTORY.md.

View 0.2.1 Changelog

Thanks for contributing!

You guys have been awesome at filing bugs, sending pull requests, and offering your opinions on discussions. Please continue to do that, as your use-cases really help us figure out what to focus on next. Notably, we'd like to give a shout-out to @aurelioderosa who has tirelessly commented and fixed numerous issues for this release. Thanks Aurelio!

Coming Down the Pipeline

We have some exciting things coming down the pipeline for Pure 0.3.0 and beyond. We are thinking of revamping our grid system with a simpler mobile-first implementation. We also have a new version of Pure Menu in the works that lets you code responsive menus and makes it trivial to style menus. Stay tuned for these pull requests!

As always, if you have questions, feel free to submit issues or reach out to us on Twitter at @tilomitra and @ericf.

Two short weeks after initially launching Pure, we're excited to release Pure 0.2.0, the next version of Pure! You can start using it today by pasting this <link> element into your <head>, or pulling it from GitHub.

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

What's new?

We fixed our :focus issues, improving the accessibility that Pure gives your web project out of the box. We added :focus rules to our existing :hover rules, and removed outline where applicable. The Pure website has also been updated to be more accessible to keyboard users and screen-readers.

In addition, we applied improvements to most of the components within Pure based on people's feedback and by tackling low-hanging bugs and enhancements. A full list of the changes in this release can be found in Pure's HISTORY.md.

View 0.2.0 Changelog

Improved Developer Workflow

We also put a lot of work into improving the workflow for people working on Pure. The goal was to make it easier for people to contribute to the project (and the make our lives easier) by improving our tooling and integration with Pure's website code base.

Testing and CI

We wanted to add some basic tests to at least sanity check our code, and did this by integrating CSSLint into our Gruntfile. The cool thing is that we hooked up Travis CI so anytime someone issues a pull request it will be linted to make sure there's no typos or crazy code.

Auto Building with Grunt

To save your fingers from The Developer Konami Code: ⌘⇥ ↑ ⏎ use can now use the grunt watch task to build Pure anytime a CSS file changes!

Testing Pure's Site with Pure Served Locally

Pure's website dogfoods Pure making it a natural place to test the latest changes, especially during development. We added a feature to support running the website with Pure served locally. When you combine this with auto building Pure via grunt watch your day becomes bright, filled with sunshine!

Formalized Contributing Guidelines

We created a CONTRIBUTING.md for Pure, which explains how you can contribute to the project. Give it a quick read before sending your pull requests!

Thanks to the Community

We've been overwhelmed by the feedback and the support that we've received since launching Pure. Although Pure is very young, it already has a vibrant community building up around it. Thanks to everyone who has been opening issues and sending pull requests. And a special shout-out to @dannytatom, @rcbdev, @codepb, and @mseri whose contributions were merged into the 0.2.0 release. Keep 'em coming!

If you have questions regarding Pure, get in touch with @ericf and @tilomitra.

This is the initial public release of Pure.