Beginning css preprocessors

Listing 3-59.  Example of Compressed Styles

#container {color: #000;}#container p {padding: 10px;}

Building Your Own Grid System

In this section, you will build our own grid system that can be used to build responsive web sites. This will 

help you understand how grid systems work and additionally help you create custom grid systems whenever 

you need them. A grid system allows content to be arranged vertically and horizontally in a consistent and 

flexible pattern.

Grid systems are made of two components: rows and columns. Rows are containers that store the 

columns. Columns determine final structure and arrangement of content.

To start building your own grid, lets first set some required classes and variables. This is shown in 

Listing 

3-60

.