Using Yahoo’s Pure CSS Framework – Part 1


The world of front-end design has become so much more complex that there are around dozen different frameworks for crafting quality websites. Today, we bring you a rather lesser known friend of Bootstrap, called PureCSS by Yahoo. It is a set of small responsive CSS modules that works best with your dynamic web projects. Yahoo’s Pure CSS is a rather delightful little CSS framework for creating stunning web design projects and gives you a chance to look a bit different than your competitors who might be using Bootstrap.


Using Yahoo's Pure CSS Framework – Part 1



PureCSS is incredibly tiny. According to their documentation, the whole set of modules only has 4.4KB when minified and gzipped. It is responsive in nature so it can deliver a very nice look and feel to your webpage. It’s also best for devices with smaller screens like mobile devices.

The first thing you need to do is to link the style sheet inside the “<head>” element of your HTML document from their CDN link. Then you’re just going to call modules using class names in your HTML elements.


<link rel=”stylesheet” href=””>

This framework has 6 modules (Base, Grids, Forms, Buttons, Tables, and Menus) and you do have an option to add them individually. You can choose how you want to implement it from two Rollups, responsive and one non-responsive. You can refer to the table below.


Using Yahoo's Pure CSS Framework – Part 1



As you can see, Form, Grids, and Menus can be implemented through a responsive and non-responsive approach. It’s up to you then to choose whichever is best for your webpage. Let’s go ahead and talk about each module now.


Base Module


All modules in PureCSS are using Normalize.css as its foundational layer to maintain cross-browser consistency and compatibility. The base module takes care of the Typography, headings, ordered and unordered lists, fonts in ems, blockquote, addresses, abbreviations, and inline styles as a starting point.




Pure Grids has two types of classes: grid classes (pure-g or pure-g-r) and unit classes (pure-u or pure-u-*). The widths of the units are fractions, which mean to say that their unit class names represent their widths. Take a look at the example below.