Creating responsive grids
CSS media queries make it possible to only apply style rules when a certain condition is true. For responsive designs, the screen width can be used as a condition to evaluate the media queries. A typical media query looks like the following:
@media (min-width: 768px) {
//style rules
}The style rules inside the preceding media query will only be applied when the screen's width (viewport) is equal to or wider than 768 pixels.
Getting ready
In this recipe, you will have to use the code from the Building a grid with grid classes recipe of this chapter. You also will have to use the command line Ruby Sass compiler. Read Chapter 1, Getting Started with Sass, to find out how to install Sass on your system.
How to do it...
Perform the following steps to create a responsive grid yourself:
Copy the files from the Building a grid with grid classes recipe of this chapter into your working directory. You should end up with a file and directory structure like that shown in the following...
