Home » What is PureCSS

What is Pure.CSS

Pure.CSS is a framework of CSS. It is a collection of small sets of responsive CSS modules which can be used in any web application. It is used to create faster, beautiful and responsive websites. It can be used as an alternative of Bootstrap.

Pure.CSS is developed by Yahoo.

Pure.CSS is composed of follwoing modules:

  • Base
  • Grid
  • Forms
  • Buttons
  • Tables
  • Menus

Pure is based on Normalize.css which is a library that renders elements more consistently and in line with modern standards and also works in older browsers.

Important Features of Pure.CSS

  • It is a collection of small responsive CSS modules.
  • Free to use.
  • Advance SEO optimization.
  • Very easy to use. You can use it directly without installing it.
  • It has in-built responsive design.
  • It is a standard CSS with minimal footprint. Means, it is very tiny. The entire set of modules clocks in at 4.0KB* minified and gzipped.
  • Pure.CSS consists of several prebuilt common elements such as grids, forms, buttons, tables, paginators and CSS Dropdown menu.
  • Pure.CSS supports shadows and bold colors. The colors and shades remain uniform across various platforms and devices.

Responsive Design

Pure.CSS has in-built responsive feature. 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.

KeyCSS Media QueryAppliesClassname
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-*

Standard CSS

Pure.CSS is very easy to learn because it uses standard CSS. It doesn’t depend on any external JavaScript library such as jQuery.

Minimal Size

Pure.CSS has very minimal and flat design. It is as much tiny that the entire set of modules can be minified and zipped within 4.0 KB. It is designed in a way that the user can easily add new CSS rules than to overwriting existing CSS rules.

You can easily customize your project by adding a few lines of CSS.

You may also like