Book Image

Learning Zurb Foundation

By : Kevin Horek
Book Image

Learning Zurb Foundation

By: Kevin Horek

Overview of this book

<p>Responsive web design is the next big thing in web design right now. It allows you to control and adapt to the user experience across a variety of devices, screens, and resolutions. Foundation is one of the most well-known responsive frameworks available, and allows you to speed up the prototyping, designing, and theming of your web project; as well as allowing you to create your own custom themes to suit your needs. It makes your life easier by giving you a grid, elements, and JavaScript functions that are responsive and easily customized to work with any web or mobile project that arises.</p> <p>This book starts off with teaching you the basics, and gradually moves on to cover the most advanced parts of this amazing framework. You will learn how to use Foundation to prototype, design, and theme your projects as well as discover how to use the framework with any programming language or content management system.</p>
Table of Contents (17 chapters)
Learning Zurb Foundation
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

The Foundation grid basics


The Foundation grid is made up of 12 columns at a maximum width of 62.5 rems and a gutter of 1.875 ems. If you are not familiar with ems, their explanation right from W3C (http://dev.w3.org/csswg/css-values/#em-unit) is:

"Equal to the computed value of the 'font-size' property of the element on which it is used."

This way, everything scales with the font size. The gutter is the space between each column of the grid. You can set this to 0 or any value that you want. However, for this example, we will retain the default settings, and I will show you how to change all of these when we get into Sass later in this book. You can also change the maximum width of the grid. For most of my projects, I set it to 90 ems, but you can change it to whatever you like to suit your needs and we will cover how to do this later on.

Before the end of the chapter, let's get into the grid and talk about all the parts of the grid by starting on our one-page demo site. This demo site will...