Pure.css Offers an Intriguing Alternative to Bootstrap

Final product image
What You'll Be Creating

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:

PureCSS Module Sizes

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:

Purecss - Get Started

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:

PureCSS Sample layouts

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:

PureCSS Grids Full Width

And here's how it reduces on a tablet-size viewport in half:

PureCSS Grids Half Width

And finally, a single column on a smartphone:

PureCSS Grids Quarter Width

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

PureCSS Example Multi Column Form

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:

PureCSS Example Two Column 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:

PureCSS Example Horizontal Striped Tabled

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:

PureCSS Example 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:

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:

PureCSS Using Pure with Elements of Bootstrap

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

Tags:

Comments

Related Articles