Search innovator Yahoo has long held a reputation for technical creativity and now the veteran Internet powerhouse has released a set of streamlined CSS coding modules called Pure (www.purecss.io), which developers can use to enhance any web project.
It all starts with a simple style sheet link and takes off from there: <link rel=?stylesheet? href=?https://yui.yahooapis.com/pure/0.2.1/puremin.css?>
Pure is available on the Yahoo! CDN over HTTP, where individual modules can be accessed or even combined together within a single combo request and receive a single CSS file back.
According to Yahoo, Pure “is ridiculously tiny,” and boasts a minimal footprint for the entire set of modules that weighs only 4.3KB when minified and gzipped, “without forgoing responsive styles, design, or ease of use.”
“Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered,” states a Pure rep. “If you decide to only use a subset of these modules, you’ll save even more bytes.”
These modules include Base, Buttons, responsive and non-responsive Forms, responsive and non-responsive Grids, responsive and non-responsive Menus and Tables.
Building upon Normalize.css, Pure acts as your CSS foundation by providing layout and styling for native HTML elements, plus the most common UI components, all made with cross browser and mobile device compatibility in mind.
Pure creates responsive layouts right out of the box, so elements will look great on all screen sizes, and encourages developers to write their own application styles on top of it, as it is designed to make it easy to override stock styles, while still staying out of the way.
“By using Grids, Menus, and more, it’s easy to create beautiful responsive layouts for all screen sizes [and we have] made it easy for you to get started on your next web project with a rock-solid foundation,” the rep added, explaining that unlike other frameworks, Pure’s design is unopinionated, minimal and flat. “We believe that it’s much easier to add new CSS rules than to overwrite existing rules, [so by] adding a few lines of CSS you can customize Pure’s appearance to work with your web project.”
The publisher notes that Pure comes with a minimalistic style set that allows users to customize it with their own CSS, and suggests Yahoo’s YUI Skin Builder as a great tool for those who need help in developing a theme to use; since with single click simplicity, the Skin Builder is able to generate all of the CSS code necessary to create a Pure theme.
To begin using Pure, simply select the modules that you need using “rollups,” which consist of all of the Pure modules in two flavors; a regular (responsive) one, and a more streamlined non-responsive one; so users can choose the one that’s right for their project.
Pure is available on the Yahoo! CDN over HTTP, where individual modules can be accessed or even combined together within a single combo request and receive a single CSS file back. For example, the following link contains a combo URL that only includes the files for the Base, Grids, and Forms modules (note the hardcoded version ID, 0.2.1): <link rel=?stylesheet? href=?https://yui.yahooapis.com/combo?pure/0.2.1/basemin.css&pure/0.2.1/grids-min.css&pure/0.2.1/forms-min.css?>
Alternatively, Pure is also available on the CloudFlare.com CDN.
The Purecss.io website provides a range of coding examples, including common uses such as responsive product landing pages, a photo gallery, a responsive email layout and a blog page with a list of posts. By studying the source code of these examples you will see the ease (dare we say, “purity”) with which Pure enables users to write cleaner code.
Pure is also highly extensible and its website provides helpful information on making the most of its powerful features — including offering advice to coders on how they can help maintain the standardized naming conventions used by Pure — for consistent results while customizing the CSS for their own needs.
Whether it’s one element, a single page or a whole website, Pure will give you a clean jump start that will help your design look its best and load quickly, regardless of the type of platform it is viewed on. Try it and see for yourself.
