The Pure Blog @pure-css - Tumblr Blog

Pure 0.6.0

http://purecss.io

https://github.com/yahoo/pure/

Today we are proud to announce the formal release of Pure 0.6.0. For over a week we let a release candidate circulate in the wild, with no significant problems reported. Thus, the release notes for 0.6.0-rc-1 should suffice.

The biggest change to Pure in 0.6.0 is the new Menu construct. With its low-specificity selectors, it's much easier to customize. All of the examples have been updated, and we've included two new responsive layout examples. The new menu is not backwards-compatible with the old menu, but in most cases it should be easy to migrate from one to the other by adding in .pure-menu-item and .pure-menu-link classes.

Also, we managed to roll in fixes for all outstanding bugs, and to close about two-thirds of open issues.

The response has been overwhelmingly positive, and we've received some great critical suggestions. Please submit feedback at http://github.com/yahoo/pure/issues.

– James Alley and the Yahoo Presentation Technologies team

Pure 0.6.0-rc-1

Today we're proud to announce the availability of Pure 0.6.0-rc-1. This release candidate will circulate in the wild for the next week or so while we gather critical feedback ahead of releasing Pure 0.6.0. This a great chance to check out the new version before it's formally released.

The Pure website staging server has been updated with content in support of this release. There you'll find links to 0.6.0-rc-1 and up-to-date documentation, including new examples of Pure Menus.

This release significantly revises Pure Menus and fixes many outstanding bugs. Happily, Pure is also smaller than ever. The entire set of modules clocks in at 4.0KB minified and gzipped, versus 4.4KB previously.

For complete release notes, see https://github.com/yahoo/pure/releases.

We do hope you enjoy this release and that you provide feedback via https://github.com/yahoo/pure/issues.

– @james_alley and the YPT Team

Welcoming James to Pure

As you’ve probably noticed, Tilo and I haven’t had much time to spend on Pure over the past few months. Our team at Yahoo is fairly small and Tilo seized an opportunity outside of Yahoo over the summer which has been keeping him busy. We recently released Format.js v1, and that project has taken up most of my time over the last few months. But there’s some good news: James Alley has joined our team and he’s going to be helping out with Pure.

James is a CSS expert inside Yahoo, and he’s eager to get Pure to the next level. He and I have been discussing a lot of ideas for Pure, including a proposed roadmap to get to Pure v1 and beyond. So I wanted to introduce James to everyone before he posts the proposal for Pure’s roadmap.

James, welcome to Pure!

#information

We're pleased to ship Pure 0.5.0 today! This release formalizes the changes that we introduced in the Release Candidate a few weeks ago. Check out the release post for more details about this release.

Pure 0.5.0 is a major milestone for the project as it revamps the grid system, a fundamental building block when using Pure.

The Pure Website was also updated for this release. We now have a brand new Get Started page that will help you get started with your next web project quicker. The Grids Documentation was also updated to make it easier to understand how to use the new Pure Grids.

Enjoy and happy coding!

#releases

Hello, I understand what the classes pure-u-*-* do, but I don't understand what is the class pure-u for. It's also not clear on the documentation. Can you help me out on this? Cheers!

If you apply the `.pure-u-` class to an element, then that will only be as wide as the content inside it.

Today, we're releasing Pure 0.5.0 RC 1. This version of Pure includes an updated grid system that lets you create highly responsive mobile-first layouts. Check out the release notes for more details.

The Pure website also received a lot of love. Since this is an RC, you should head over to Pure's Staging Website for the latest documentation.

We're especially excited to see what you guys think of the new Get Started Page.

It lets you customize and download a Pure Starter Kit that includes all the HTML and CSS that you should need to get started with Pure.

Happy Coding, and let us know what you think!

#releases

Your multi-column form example uses the class 'pure-u-med-1-3' which I can't seem to find in your documentation. I am unable to replicate the example form using the code provided, and the CSS of the webpage references 'baby-blue.css' which I can't find any mention of. Am I missing something?

That example uses the new Pure Grids which will be shipped in Pure 0.5.0. If you want to use it today, take a look at the Responsive Grids section on our [Tools page](http://purecss.io/tools/#generating-custom-responsive-grids).

Over the last few months, we have been developing tools that help us write, manipulate, and do more with CSS. Today, we're excited to reveal them to the community. Check out the new Tools page on the Pure website to learn more about them. Happy coding!

#tools

We've been busy working on a completely revamped Responsive Grids system for Pure and we want your feedback as head down the home-stretch.

It's gonna be awesome! Here's the latest status on our efforts so far, and we'd love to hear your feedback on a few things.

#discussion

Another quick release of Pure which contains some fixes for some minor bugs that were reported and fixed by contributors. Check out our release post on GitHub for details on what changed.

#releases

We just released Pure 0.4.1! Check out our release post on GitHub to find out what changed, and to learn more about what's coming down the pipeline.

#releases

People have been confused about Pure's built-in Grids unit sizes because we currently only have reduced fractions; e.g., pure-u-1-24 and pure-u-1-2 exist, but pure-u-12-24 does not.

The Grids docs now contain a visual list of all the available pre-built unit sizes, making it a great reference!

Also, the next version of Pure will ship with both the reduced and non-reduced fraction units, i.e., pure-u-12-24 will be there. And instead of manually copy/pasting these duplicate style rules, we built the Pure Grids Rework Plugin. We're actually using this tool to generate Pure's grids-units.css file on master, and you can use it to create custom unit sizes if Pure's defaults don't work for you.

#Grids #Tools

This might be WAY out of scope, but it would be awfully nice to be able to have Pure classes (especially grids) as mixins in SASS (or similar) so that instead of littering your HTML with presentation-related classes, you could just add them to your existing classes and have them compiled in. I've seen a project like that on Github for Bootstrap, but maintaining such a think outside the main project seems like a real chore. thoughts?

We have started working on interesting ways to deal with this. Recently Eric gave a talk showing how we plan to use tooling to enable people to customize Pure in a way that will work with any or no preprocessors. https://speakerdeck.com/ericf/pureGrids is the first step, and we've created a Rework plugin to generate custom nth-based unit Pure Grids. We are even using this plugin to generate Pure's built in 5ths- and 24ths-based unit grids. https://github.com/ericf/rework-pure-grids

Can grids be nested?

Yup! Be sure to follow these rules: http://purecss.io/grids/#introduction-to-pure-gridsUnits must be inside a Grid wrapper and you can nest pure-g's inside of pure-u's. The layout examples use nested grids and show how this is done: http://purecss.io/layouts/

I am playing with your Landing Page layout. When I view it on a small screen, like a phone, or reduce the size of my browser window, the horizontal menu bleeds down on top of the content below it. What options do I have to avoid this behavior? BTW, love Pure!

The reason the menu goes to two lines on small screens is because the media query beak-point is fixed, and in this case, doesn't kick in soon enough.This is a fundamental issue with Pure shipping Grids and Menus with pre-defined media query break-points. We are working on an approach to use tooling to help generate these break-points so that you can match them to fit your actual content.

Can't find much about Pure CSS and 508 compliance, beyond a few forum comments where accessibility issues are pointed out. Any resources for this? In general, how 508 compliant is Pure? Thanks!

Making a site accessible has a lot to do with the site's HTML. Since Pure is only a CSS foundation layer there isn't any way for us to make sure sites are accessible by default.We do make sure not to override a browser's default styles related to things like `:focus` unless we provide a better set of styles. We also try to lead by example and want to encourage best practices in our example code and example layouts on the website.If you see anything that's wrong or could be improved with respect to accessibility, we consider it a bug—file it or even better issue a Pull Request to fix the issue.

Trending Blogs

Recently Viewed Blogs

The Pure Blog