Book Image

Sass and Compass Designer's Cookbook

By : Bass Jobsen, Stuart Robson
Book Image

Sass and Compass Designer's Cookbook

By: Bass Jobsen, Stuart Robson

Overview of this book

Sass and Compass Designer's Cookbook helps you to get most out of CSS3 and harness its benefits to create engaging and receptive applications. This book will help you develop faster and reduce the maintenance time for your web development projects by using Sass and Compass. You will learn how to use with CSS frameworks such as Bootstrap and Foundation and understand how to use other libraries of pre-built mixins. You will also learn setting up a development environment with Gulp. This book guides you through all the concepts and gives you practical examples for full understanding.
Table of Contents (23 chapters)
Sass and Compass Designer's Cookbook
About the Author
About the Reviewers

Building a grid with grid classes

Grid-based layouts divide your design into a collection of rows with equal-sized columns. Content and graphical elements can be organized according to this layout. Grids help in creating a logical and formal structure for designs. They prevent inconsistencies between the original design and the final implementation in HTML as designers and developers work with the same grid.

Grids are also helpful in responsive design, because the grid's columns can easily be rearranged to fit different screen widths.

Grids are formed by rows and columns. A grid with 12 columns can be easily adopted for different screen sizes. In this recipe, CSS classes are used to set the width of the grid items.

There are 12 classes for a grid of 12 columns, where each class has a width that spans a number of columns. The total items that span the columns in a row should be equal to the total number of columns in the grid. So, when your grid has 12 columns, a row can contain, for instance...