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

Covering the variables


Now, let's start from the top of this Sass variables file and cover what is in this file. The variables start on line 9, with a comment explaining that the default body font size in Foundation 5 is going to be using rem's as a font size but Foundation wants to use a default pixel font size to base all your rem values off. So, basically 1rem will be the same as 16 px. However, if you uncomment the $rem-base value and set the value to 18 px, then 1rem will be 18 px. Basically, Foundation is using a formula to make sure that whatever you set your $rem-base variable pixel value to, it will be equal to 1rem.

Then, from line 15-24, you will see a few comments and two variables that you can change to make the base font size not be 100 percent of the rem-base variable. Play with this number and see what results you get. The next thing you will see is that you can also change how the line height is calculated; this is on line 24. You can leave most of the these values as they...