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

Customizing the prototype


Now that we have a working responsive prototype, let's give this one page a little styling love.

Let's open the settings.scss file in the scss folder. On line 57, let's remove // and change it to the following:

$primary-color: #048661;

Once you refresh your browser, you will see that buttons go green, as shown in the following screenshot:

Now, let's remove // and change line 36 to the following:

$row-width: rem-calc(1280);

Make sure that your browser window is wider than the width of the site, and you will see that our site gets wider. Like we covered in Chapter 7, Sass and Foundation, you can see how changing a couple of values in the Foundation settings file can make some pretty big changes to your project.

Now, let's remove the gray background on the panels. On line 805, let's change it to:

$panel-bg: #fff;

You will see that the panel's gray background is gone. Now, let's open the _theme.scss file and add the following:

.top-bar {
  background: $primary-color;
  
  .top...