What Is Pure.css?
While Bootstrap's taken over a huge swath of the web, it can put a bit of a performance burden on sites that might not be necessary for your next project. Pure.css is Yahoo's responsive framework; it offers a minimalist, well-documented and flexible alternative.
In this tutorial, I'm going to introduce you to Pure, "a set of small, responsive CSS modules that you can use in every web project." We'll review the feature set and advantages of using Pure and then walk through some basic example usage.
If you have any requests for future tutorials or questions and comments on today's, please post them below. You can also reach me on Twitter @reifman directly.
Selecting a Platform
Pure offers all the common features you need in a standard web design framework. So, whether you're building a theme for WordPress or a custom website of your own, it could be a good option.
For project managers, it's usually critical that client projects be built with standard tools that can be easily understood and maintained, and most importantly, that it's easy to recruit talent that comes in with experience in your platform. Bootstrap is perfect for this. Pure seems simple enough to me that it can also be a good starting point.
The Pure Feature Summary
Here's a summary of Pure's benefits and features. It provides:
a customizable, responsive grid
built-in vertical and horizontal menus, including dropdown menus
buttons that work with the <a> and <button> elements
flexible form alignments
common table styles
a clean, minimalist look that can be easily extended
However, most impressively, Pure.css is super small, just 4.5KB minified + gzipped. Here's how much space the different components of Pure take up in your production environment:
Pure is also well tested and works in IE 8+, Firefox, Chrome, Safari, iOS 6-8, and Android 4.x.
And, you can still use it with elements of Bootstrap, adding them in where you need. I'll show an example of this below.
Pure is built on Normalize.css, which standardizes the framework's performance across browsers. Normalize provides a default CSS reset that:
preserves useful defaults
normalizes styles for a wide range of elements
corrects bugs and common browser inconsistencies
improves usability with subtle improvements
explains what code does using detailed comments
Getting Started With Pure
Pure's website is built with its framework, so its minimalist, well-developed code leads to a simple to navigate, easy to use guide. Here's an example of Pure's lefthand menu in action:
You can add Pure to your page via Yahoo's free CDN. Just add the following <link> element into your page's <head>, before your project's stylesheets:
To initialize the responsive width of your website, set a meta tag for the viewport to your device width:
Layouts
On its Layouts page, Pure offers a sampling of downloads for different example pages for common application needs:
You can browse and download any of them that you want to experiment with or add to your application. These include:
Blog
Email
Photo gallery
Landing page
Pricing gallery
Responsive Side Menu
Responsive Horizontal-to-Vertical Menu
Responsive Horizontal-to-Scrollable Menu
The Pure Base
The Base page provides a brief background on the foundation underneath the Pure framework, primarily Normalize.css:
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.
You can also load Normalize separately using Yahoo's CDN for independent usage:
And there are other small foundation features such as classes to tell Pure to load images responsively by viewport:
But now, let's take a look at some of the example layouts Pure provides.
Grids
Grids are a key aspect of website layouts which Pure makes fairly simple. Here's a quick example of a four-column Pure grid on a desktop display:
And here's how it reduces on a tablet-size viewport in half:
And finally, a single column on a smartphone:
Pure Grids consist of two types of classes: grids and units. Child elements of grid divs must be unit divs. Your content goes inside the unit divs. Unit classes are named to represent their widths. For example, pure-u-1-4 has a width of 25%.
Here's the code for the responsive fourth's above:
As you can see above, <div class="pure-g"> represents the outer grid class. Then, <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> instructs the browser to show a single column for minimum viewports, half columns for medium, and quarter columns for large width.
You can learn more about Pure Grids here.
Forms
Pure has support for aligning input fields within forms and for styling specialized fields, such as:
Inline forms
Stacked forms
Two-column forms
Multi-column forms (shown above)
Grouped inputs
Required inputs
Disabled inputs
Read only inputs
Rounded inputs
Checkboxes and Radios
You can see all of this described here. Let's explore a two-column form, which Pure refers to as an Aligned Form:
By using the pure-form-aligned class with pure-control-group(s), Pure ensures that each set of fields is properly positioned as shown above.
It's a pretty simple way to build a highly usable, well laid out form.
Tables
Pure makes building and formatting tables quite easy as well. Here's an example of a horizontally striped table:
You can see the table above coded by simply adding pure-table-odd class rows alternately through your code to change the striping:
There are a number of other Table examples shown here.
Menus
Menus in Pure are also easily facilitated, including:
Vertical Menu
Horizontal Menu
Selected and Disabled Items
Dropdowns
Vertical Menu with Submenus
Scrollable Horizontal Menu
Scrollable Vertical Menu
Responsive Vertical Menu
Responsive Horizontal-Scrollable Menu
Responsive Horizontal-to-Vertical Menu
See all the menus illustrated here. Here's how you'd code a Dropdown menu:
Basically, it's just a pure-menu-horizontal's pure-menu-list and pure-menu-item pure-menu-has-children pure-menu-allow-hover and then a list of child menu items:
Pure provides sample JavaScript for implementing additional accessibility features within your menus.
Going Further
Pure's website provides some excellent guides for building on the framework:
Using Tools with Pure such as Bower and Grunt
Customizing Pure and using slices of the codebase on their own
Extending Pure features and classes
And you can explore combining pieces of Pure with Bootstrap and JavaScript. If you'd like to begin with Pure's small footprint and minimalist style, you can still leverage various Bootstrap features, only loading what you need.
Here's an example of a Bootstrap modal dialog on top of Pure, which you can see on Pure's extension page:
In Closing
Bootstrap's becoming the IBM of web frameworks. It's responsive, it's a standard, and you can't get fired for choosing it (on a recent contract, we actually had to fire a theme developer for not properly implementing Bootstrap). But, if you want something smaller, faster and simpler, then check out Pure.css.
If you give it a try, please let me know about your experience in the comments below. You can also reach me on Twitter @reifman directly. And, you can also browse my Envato Tuts+ instructor page to read my other tutorials.
Related Links
The Pure Blog
Pure on GitHub
Pure: What, Why, & How? (Envato Tuts+)
Compare to Bootstrap