O'Reilly logo

Sass and Compass Designer's Cookbook by Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required