Forum | Latest web development tutorials

Pure.CSS Tutorial

Pure is a Cascading Style Sheet (CSS) developed by YAHOO. It helps in creating faster, beautiful, and responsive websites. It is very space savvy and is very tiny in size comparable to 4 KB.


This tutorial is meant for professionals who would like to learn the basics of Pure and how to use it to create faster, beautiful, and responsive websites. This tutorial explains all the fundamental concepts of Pure.


Before proceeding with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, Document Object Model (DOM), and any text editor. In addition, it will help if you know how web-based applications work.

Execute Pure Online

For most of the examples given in this tutorial, you will find a Try-it option. Use this option to execute your Pure programs on the spot and enjoy your learning.

Try the following example using the Try-it option available at the top right corner of the following sample code box -

      <title>The PURE.CSS Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="">
		.grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>