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

Buttons


One thing Foundation does really well, is buttons. We are about to cover all the options you have with buttons. So, let's get started.

You can turn any <a> or <button> tag into a Foundation button by adding the button class. So, on or around line 135, on your left-hand side column and under vcard, let's add the following:

<a href="#" class="button">Button</a>

You will see a simple blue button. You also have the ability to set a few sizes for the button. You need to keep the button class, but you can put another class such as tiny, small, medium, large, and expand in the code. Let's try this out by adding a large class to our button:

<a href="#" class="button large">Button</a>

You will see that the button gets larger; try others. When you try to expand the button, it will take up the entire width of the column that it is in.

The next thing you might want to do is add rounded corners to our button, so go ahead and add the radius class and then try adding...