Getting Started with Zurb Foundation 5

By Ryan Flores

Building a website or app from scratch takes a lot of time, one of the most consuming parts are the testing and debugging of code that’s involved.

Foundation is a responsive front-end framework that comes with a complete of easy customizable features and functions, that allows us to quickly build layouts with a consistent look on any type of device.

Table of Contents

- What is a Front-End Framework?
- Types of Front-End Frameworks
- Digging into Foundation
- Installing Foundation
- Building a Top Bar
- Building a Headline
- Building an Orbit Slider
- Working with the Grid System
- How to Offset a Grid Column
- Nesting a Row inside a Column
- Building a Modal Contact Form
- Embedding a Flexible Video
- Using Pricing Tables
- Using Icon Fonts
- Using Foundation Snippets

• Language: English
• Publisher: Ryan Flores
• Release date: Sep 8, 2014
• ISBN: 9781311471208

Ryan Flores

Ryan Flores is a full stack web developer who has been designing and developing websites professionally for over 10 years. He is a spiritual fast learning generalist with a passion for remarkable design and web development.

Book preview

Getting Started with Foundation 5

Learn Foundation 5 in 2 hours

Ryan Flores

Copyright 2014 by Ryan Flores

Smashwords Edition

"Smashwords Edition, License Notes

This ebook is licensed for your personal enjoyment only. This ebook may not be re-sold or given away to other people. If you would like to share this book with another person, please purchase an additional copy for each recipient. If you’re reading this book and did not purchase it, or it was not purchased for your use only, then please return to your favorite ebook retailer and purchase your own copy. Thank you for respecting the hard work of this author."

Acknowledgements

To my girlfriend and my family for their support.

Thanks to all the readers who reviewed this book, positive or negative, all are welcome; it helps me improve this book and upcoming titles.

Please, remember you can always submit me suggestions, errata or comments to this email address: [e-mail].

Preface

When building a website usually we don’t know how and where to start. Maybe you have a great idea and you want to get going on a working prototype instead of spending valuable time designing and coding from scratch.Sometimes the hardest part is knowing where to start. Using frameworks, we can get started on our project and streamline our workflow. In this book, we’ll take an in-depth look at one of the most widely used frameworks in the industry: Foundation 5.

We’ll first study the benefits and strengths of Foundation 5, and we’ll dive into all the features and components that make it all work.After that we’ll put everything, we learn into practice by building a promotional site for a mobile app.

This book is for anyone with a basic understanding of HTML, CSS and some JavaScript.

By the end of this book, you’ll have all the skills necessary to build a website or app of any size using a front end framework.

You’ll also learn that frameworks can be useful when used properly and which one might be best suited for your project.

To get started all you need is a text editor and a browser.

What this book is for

This book is mostly for people who have a good handle on HTML/CSS and JavaScript, and are curious about building responsive sites, using one of the most popular open source frameworks: Zurb Foundation 5.

Source Code

Source code of this book is available at https://github.com/rfloper/prototyping-foundation.git

Errata

We make every effort to ensure that there are no errors in the text or in the code. However, no one is perfect, and mistakes do occur. If you find an error in one of our books, like a spelling mistake or faulty piece of code, we would be very grateful for your feedback. By sending in errata, you may save another reader hours of frustration, and at the same time, you will be helping us provide even higher quality information.

Send us the error you have found to [e-mail].

We’ll check the information and, if appropriate, fix the problem in subsequent editions of the book.

1. What is a Front-End Framework?

Designers and developers commonly use frameworks for prototyping websites and applications because they are great tools for getting out an idea quickly.

Building a website from scratch takes much time, one of the most consuming parts are the testing and debugging of code that’s involved.

Frameworks are built to solve many of those common typography and browser compatibility problems from the start, so we can only focus on the content or the design.

Many websites have a similar structure on how they are built. For example, they are usually responsive; design with fluid grid or have similar UI elements and typographic skins. Because of this, it makes little sense to reinvent the wheel by creating a custom solution for each of those common features.

Thankfully, many frameworks use those common patterns and structures in their codebase; hence we do not have to rebuild everything from scratch, every time we start a new project.

Frameworks save us a ton of time and get us working on a project, much faster because they cut off a