PureCSS Tutorial: Pure CSS is a small Cascading Style Sheet (CSS) or a framework developed by YAHOO and the first preview was released on 14th May 2013. A framework is a set of predefined classes that a designer can use directly without going through the real CSS behind it. It was developed with a mobile-first concept and uses responsive elements that fit on all device sizes. Although it is useful to have basic knowledge of CSS before working on a framework. A Framework helps the quick development of the project. In this tutorial, we will learn all the fundamental concepts of Pure CSS, how to use it to create a faster, attractive, and responsive website design.
Pure CSS helps in creating beautiful and responsive websites quickly. It occupies very less space having a size
comparable to 4 KB (minified + gzipped). It is like bootstrap but on the lighter side as it only uses the real CSS and not javascript. You can guess this from the fact that bootstrap (v3.4.1) is about 368.62 Kb in size and Pure CSS is just 4kb in size.
Pure CSS contains modules like forms, buttons, tables, etc. which we will study in this tutorial.
Our Pure CSS Tutorial is designed for beginners or professionals as well. We have tried to make it simple for you as much as possible, although this framework is itself not very complicated and easy to understand. We will cover all the basic topics in this tutorial. So let's start with the features for pure CSS.
As stated earlier, Pure has an in-built responsive design that redesigns the website by itself as per the device screen size in which the website is getting displayed. If we talk about the grids, Pure has a 12 column mobile-first fluid grid that supports
responsive classes for small, large, and medium screen sizes. There are different classes for every screen size. The other important thing of this framework is that all the websites created using Pure CSS are fully compatible with all devices like PC, tablets, and mobile.
| Key | CSS media Query | Applies | Class Name |
|---|---|---|---|
| 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-* |
Don't get confused if you didn't get it, just stay with us and your doubts will be cleared.
Pure CSS support on all browsers like IE 8+, Firefox, Chrome, Safari, iOS 6-8, and Android 4.x.
Pure CSS is easy to customize as it is designed considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules. Pure CSS can be customized to work with an existing web project just by adding a few lines of codes to the existing code.
Before starting this tutorial, you should familiar with basic HTML, CSS, and JavaScript because they are used to create a basic structure and design of any website. Don't worry If you don't know how these languages work so you can learn it from our HTML, CSS and JavaScript tutorials. We made it a very simple language which is easy to learn and understand.
In This Pure CSS tutorial we will covers and learn all fundamental concepts of Pure like Pure CSS forms, form inputs, aligned form, stacked form, how to use the grid, icons, buttons, tables like a bordered table, stripped table, default table, menus and dropdown menus, responsive images, checkboxes, radio buttons, and the most important topic is to make responsive web page design. At the end of this tutorial, we are sure that you will familiar with Pure CSS and would start creating your beautiful and responsive website.
We will study this one by one in the tutorial. Continue to the next chapter to know how to add the Pure CSS in your web project.
Follow Us: