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

Applying the grid on your design

In this recipe, you will learn how to build a layout using the flexbox code you have already built in the preceding recipes of this chapter.

Getting ready

Read Chapter 1, Getting Started with Sass to find out how to compile your CSS code using Ruby Sass. You will reuse the code from the Building a grid with grid classes recipe of this chapter.

How to do it...

You need to perform the following steps to apply the grid on your design:

  1. Copy the files of the Building a grid with grid classes recipe of this chapter into your working directory. Your file and directory structure should look like that shown in the following figure:
  2. Now edit the sass/layout/_grid.scss file. Write down the following SCSS code at the end of this ...

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