By default, HTML and CSS do not have a grid or a really good cross-browser way to lay web projects out. This is why responsive grid frameworks, such as Foundation, have been created. They allow you to extend the core of these languages and really speed up your development time.
We will cover the following topics in this chapter:
The Foundation grid basics
Centering in the grid
Offsetting the grid
The block grid
Nesting the grid
Setting element position based on screen size
Modifying the base theme and building a demo site
At a high level, the main purpose of Foundation is to start you off with a responsive grid that will allow you to layout simple to the most complex web layouts that work on any screen size. Foundation allows you to have full control over each column and row on small, medium, and large screen sizes. If you want to tweak any element, column, or row on a screen of any size, you can add custom media queries to pretty much anything. For those of you who...