Creating semantic grids with Foundation

Foundation 6 has a 12-column grid and predefined grid classes by default. You can also use the grid mixins to apply the grid to selectors without predefined classes to generate semantic CSS for individual grid columns. In this recipe, you will learn how to use these grid mixins.

Getting ready

In this recipe, you will rebuild the layout from the Applying the grid on your design recipe of Chapter 9, Building Layouts with Sass, using Foundation 6. Another way to implement the same layout with Sass can be found in the Mobile first and responsive grids recipe of Chapter 10, Building Grid-based Layouts with Susy and Sass, the Implementing Semantic layouts recipe of Chapter 12, Bootstrap and Sass, and the Semantic grids with Neats recipe of Chapter 13, Meeting the Bourbon Family.

Read the Installing Foundation CLI recipe of this chapter before starting; you will need it for the first step of this recipe.

How to do it...

For this recipe, you should perform the...