Using Yahoo’s PureCSS Framework – Part 2

In the first part of this article, I reviewed how PureCSS works and the modules behind it. I also cited some examples of the first three modules that is the Base, Grid, and Form module. If you have read it, I’m pretty sure you’re amazed how awesome this framework is.

I know there are a lot of CSS frameworks out there that do the same thing as PureCSS. But this one has its own pros and is quite exceptional. It also has cons and limitations, but then which framework is ever perfect?

This second part will continue on the remaining modules, buttons, tables, and menus. I’ll try to explain them in the same manner as I did previously, in part 1.




To create a pure button, you need to insert a class with “pure-button” name to any anchor or button tag/element. The button module properties of the PureCSS will then automatically apply.

Take a look at this basic example.


pure button





This outputs the layout below.






The first is an anchor and the second one is a button; and they all look the same.

You can also add Disabled Buttons and Primary Buttons the same manner as how the first example is done. To customize your buttons the way like it, you need to group your own CSS into a class like “pure-button-mystyle”. You can then append it to an element which already called the “pure-button” class name.

So let’s say you have this CSS style :








You can call it like the code below.




You can also put icons on those buttons. Although PureCSS is not loaded with icon fonts, you can still incorporate icon fonts with existing ones like Font Awesome. You just need to put the Font Awesome CSS file on your page and call the icons through an <i> tag with a “pure-button” class still on buttons and anchors.

The code will look like this:






















To beautify your HTML table, simply add “pure-table” class name to the table element. It will then automatically add borders and paddings, plus emphasize the table headers. There are four table options that use the same process to call the CSS class. You just need to put the class name and append the type of table. The different layouts are:


Default Table

<table class="pure-table">


table 2









Bordered Table

<table class="pure-table pure-table-bordered">


table 3









Tables with Horizontal Borders

<table class="pure-table pure-table-horizontal">


table 4









Striped Table

For this one you need to add another class name to the <tr> tags to put stripes on the rows alternatively.


<table class="pure-table">

<tr class="pure-table-odd">


table 5

















PureCSS Menus include vertical menus, horizontal menus, menus with headings, dropdown menus, menus with disabled items, and pagination. Each type of menu has its own way of calling the classes. Say for example the Vertical Menu, it is called using the “pure-menu” class to style the menu and “pure-menu-open” to guarantee that the menu will be visible right when the page is loaded.

Let me give you an example, a menu with disabled Items.


table 6











The “Disabled Item” is grayed out and not clickable. This type of menu is called through:


<div class="pure-menu pure-menu-open pure-menu-horizontal">

It has some other class names that you need to add on <a> tags and on <li> tags.

For menus, classes are called differently with accordance to the type of menu you would like to layout, unlike from the other modules where classes are called identically. For a complete guide of how each menu is called.

Click here to visit its webpage.


That’s it for PureCSS. I believe I was able to introduce you, to an extent, to the techniques required use this new CSS framework. If you’re currently using a different CSS3 framework, you might want to consider your options again and give PureCSS a try. It has a lot of advantages that I might have not mentioned on this post, but that’s for you to figure out once you start tinkering around.


You might also like