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

Modifying the base theme and building a demo site


If you want to run the code along with me, you can see my code for each chapter on Codio at https://codio.com/kevinhorek/Learning-Zurb-Foundation or on Github at https://github.com/kevinhorek/Learning-Zurb-Foundation. First off, let's change the page titles in the index.html file on or around lines 7 and 16 to Learning Zurb Foundation. Next, let's delete lines 22 to 40, 46 to 150, and then delete lines 50 to 67. Then, refresh your browser and you should see just the Learning Zurb Foundation title.

So, we can see the grid at work. Let's add a border around our columns; we will remove this later. On line 9, let's add <link rel="stylesheet" href="css/foundation-book.css" />, and then in our CSS folder, let's add a foundation-book.css file. In this CSS file, let's add the following code:

.columns {
    border: 1px solid black;
}

Next, perform the following:

  1. On line 28, let's change <div class="large-8 medium-8 columns"> to <div class...