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

Chapter 4. Elements

One of the most important things about any framework is the elements that you use to customize your projects. Foundation has pretty much any kind of element that you will need. You can easily customize and combine these element types to make well-customized layouts and designs. We will cover the following topics:

  • Typography

  • Lists

  • Blockquote

  • V-cards

  • Buttons

  • Panels

  • Pricing tables

  • Tables

  • Video

  • Progress bars

  • Keystrokes

  • Labels

First, let's get rid of the black border around the columns in our demo site. So, in your foundation-book.css script, let's delete the following:

.columns {
    border: 1px solid black;
}

Refresh our browser, and you will see that the black border lines are gone. We are going to add a bunch of elements into our one-page website. We will remove them later and get back to building a nice starter site, but we need to try out a bunch of things before we start to make things look pretty. Now, let's get started with some typography.