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

How do my files get converted?


You are likely wondering how these .scss files are getting converted to the app.css file, and it is a great question and there are multiple ways to convert your .scss files to .css files. There are a bunch of applications that will handle it for you and they are listed and updated on the official Sass install page at http://sass-lang.com/install. In Foundation with Sass, Zurb uses something called Grunt to compile your Sass automatically when you hit save. You, of course, have to tell Grunt to check your Sass folder for changes on save, but we will cover that in a while. Let's cover what Grunt is first. Grunt is a JavaScript Task Runner and the project can be viewed at http://gruntjs.com/. What is a JavaScript Task Runner? Simply put, it automates repetitive tasks for you. So, in our case, Grunt watches our SCSS folder and whenever we make a change to one of the files in that folder and hit save, Grunt puts all the files in the SCSS folder into one file, minifies...