PureCSS - A ridiculously tiny CSS framework

Apr 01, 2021csscss-frameworks

PureCSS (Pure) is an open-source, unopinionated, ridiculously tiny (3.7KB minified + gzip) and flat CSS framework built on normalize.css with mobile devices in mind and encourages you to write your application styles on top of it.

<!--An example using Pure Grids-->
<div class="pure-g">
  <div class="pure-u-1-3"><p>Thirds</p></div>
  <div class="pure-u-1-3"><p>Thirds</p></div>
  <div class="pure-u-1-3"><p>Thirds</p></div>

Pure is broken up into a set of responsive modules built on top of normalize.css, besize Base module contains some commmon styles, Pure also has saparate modules like Grids, Forms, Tables, Buttons, Menus.


Getting Started

Pure is tested and works in latest stable major browsers (Firefox, Chrome, Safari), IE 10+, iOS 12+, Android 6+. Getting started with Pure is simple using one of following ways:

  • Install Pure via a package manager:
npm install purecss --save
  • Add CDN hosted Pure modules (pure-min.css, buttons-min.css, forms-min.css, etc.) into your page head (mainly hosted at unpkg, also avaialable at other alternate CDNs like cdnjs, KeyCDN, OSS MaxCDN, jsDelivr, etc).

jsDelivr is a CDN that supports combo handling. Here’s an example of a combo URL that includes the same CSS Base, Grids, and Forms as above.

  • Build Pure from its source using Grunt, all Pure CSS files should be built into the pure/build/ directory.
$ git clone git@github.com:pure-css/pure.git
$ cd pure
$ npm install
$ grunt

Key Features

Normalize.css is a great starting place for your project, but some HTML elements such as forms, tables, and menus require more styling. Pure made a more opinionated look and feel for these elements, while keeping them minimal enough so that you can customize them for your site.

Pure is ridiculously tiny. The entire set of modules clocks in at 3.7KB* minified and gzipped. 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. If you decide to only use a subset of these modules, you’ll save even more bytes.

Pure is extremely extensible. By including Pure and writing some CSS on top of it, you can ensure that your site or app works across browsers, while looking truly unique.

Pure plays well with other libraries. As a developer, you can pull in Pure as a foundational CSS framework, and then include specific Bootstrap or jQuery modules that your application may require.

Pure is meant to be a starting point. Built on normalize.css to fix cross-browser compatibility issues and add useful consistent styles for grids, buttons, menus, forms, etc.

Pure is responsive by default. It is created in such a way that it can redesign itself according to the device size. It has internally 12 column mobile-first fluid grid that supports responsive classes for small, large, and medium screen sizes. So, a website using Pure is fully compatible with with PC, tablets, and mobile devices.

Pure stays out of your way. Pure has minimal styles and encourages you to write your application styles on top of it. It’s designed to get out of your way and makes it easy to override styles.

Pure believes that it’s much easier to add new CSS rules than to overwrite existing rules. By adding a few lines of CSS, you can customize Pure’s appearance to work with your web project.