Book Image

Less Web Development Cookbook

Book Image

Less Web Development Cookbook

Overview of this book

Table of Contents (19 chapters)
Less Web Development Cookbook
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Building a grid with grid classes


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, three items that span four columns, or one item that spans one column and one item that spans 11 columns.

Getting ready

The code used in this recipe is based on the Flexbox library, which can be found at http://flexboxgrid.com. The Flexbox library builds a grid, leveraging the CSS3 Flexible box module and using the same naming conventions as Twitter's Bootstrap.

Though it will be interesting to inspect the compiled code, the best way to test the grid you will construct in this recipe will be to use...