Releases: pure-css/pure
Pure 1.0.1 - Bug fixes
Pure v1.0.0
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.
Pure 0.6.2 - New Buttons Group & Bug Fixes
Pure 0.6.1 - PostCSS & Misc Fixes
Pure 0.6.0 – New Pure Menus
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.
Pure 0.6.0-rc-1 – New Pure Menus
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.
Pure 0.5.0 - Get Started with Grids
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.
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!
Pure 0.4.2 — Bug Fixes
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)
Pure 0.4.1 — It's the little things
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-24as well as.pure-u-1-2. - You can now add a
hiddenattribute 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-alignedlook 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!