PureCSS – A Modular CSS Foundation

PureCSS – A set of small, responsive CSS modules that you can use in every web project.

PureCSS.io

In my recent project, I came across a new CSS framework PureCSS. Previously, I worked with Bootstrap, so I was comfortable with grid classes and all. Bootstrap comes with whole lot of other styles which I might not use at all. So in a way it increases CSS file length and size. But it is not the case with PureCSS.

PureCSS is very small and very less in size. The entire set of modules weight only at ~4.0KB minified and gzipped.

PureCSS is based on normalize.css and it has very minimal styles. It let’s you to take control on your website/project.

Main Modules

  1. Base (1.1 KB)
  2. Grids (0.8 KB)
  3. Forms (1.5 KB)
  4. Buttons (0.8 KB)
  5. Tables (0.5 KB)
  6. Menus (0.8 KB)

Main file comes with all the modules included in it, but you can select all or customise as per your need and download those selected modules.

SMACSS – Scalable and Modular Architecture for CSS.

Pure is based on SMACSS. It has adopted naming convention from SMACSS.

For module wise tutorial, please visit PureCSS.io, it has very useful documentation. In this post I will explain my favourite module from it – Grid.

Grid

The special module, I like in PureCSS is – grid system. Grids are very easy to understand and work with, and very powerful. It consist of two/three types of classes, for row (Grid) you can use pure-g and for columns (Units) you can use pure-u or pure-u-*. Units have various class names that represent their widths. Unlike in other framework in Pure you can use mixer of grids 5th based grid and 24th based grid. You can also divide your page width in 4 column or 2 column of different width as well with combination of classes from the 24th based grid.

For example, pure-u-1-2 has a width of 50%, whereas pure-u-1-5 would have a width of 20%.

<div class="pure-g">
    <div class="pure-u-1-2"><p>Half Width</p></div>
    <div class="pure-u-1-2"><p>Half Width</p></div>
</div>

Unit Sizes

5ths-Based Units

pure-u-1-5
pure-u-1-5
pure-u-1-5
pure-u-1-5
pure-u-1-5
pure-u-2-5
pure-u-1-5
pure-u-1-5
pure-u-1-5
pure-u-3-5
pure-u-1-5
pure-u-1-5
pure-u-4-5
pure-u-1-5
pure-u-5-5
pure-u-1-1

24ths-Based Units

1-24
1-12
2-24
3-24
1-8
4-24
1-6
5-24
1-4
6-24
7-24
1-3
8-24
3-8
9-24
5-12
10-24
11-24
1-2
12-24
13-24
7-12
14-24
5-8
15-24
2-3
16-24
17-24
3-4
18-24
19-24
5-6
20-24
7-8
21-24
11-12
22-24
23-24
1
1-1
24-24

Media Queries

PureCSS has media queries support based as below so you can control your site behavior on different devices.

Key CSS Media Query Applies Classname
None None Always .pure-u-*
sm @media screen and (min-width: 35.5em) ≥ 568px .pure-u-sm-*
md @media screen and (min-width: 48em) ≥ 768px .pure-u-md-*
lg @media screen and (min-width: 64em) ≥ 1024px .pure-u-lg-*
xl @media screen and (min-width: 80em) ≥ 1280px .pure-u-xl-*

PureCSS offers em based support for media queries so on different devices it response appropriately such as when people zoom-in the page. You can obviously use px if you want.

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

Leave a reply:

Your email address will not be published.