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>

Related Content you might be interested in

Current Title:

Small book image
Learning Zurb Foundation
Kevin Horek
Aug, 2014 | 210 pages
No titles found
Table of Contents (17 chapters)
Learning Zurb Foundation
Learning Zurb Foundation
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Time to Prototype
Time to Prototype
Rough wireframing and prototypying
Introducing the framework
Going over the base theme
Referring to the Foundation documentation
Migrating to a newer version of Foundation
Summary
2
The Foundation Grid
The Foundation Grid
The Foundation grid basics
Centering columns in the grid
Offsetting the grid
The block grid
Nesting the grid
Setting element position based on screen size
Modifying the base theme and building a demo site
Summary
3
Navigation
Navigation
The simple top navigation bar
Navigation tweaks
Pagination
Let's navigate together
Summary
4
Elements
Elements
Typography
Lists
Blockquote
V-cards
Buttons
Panels
Pricing tables
Tables
Video
Progress bars
Keystrokes
Label
Summary
5
JavaScript
JavaScript
Magellan sticky navigation
Off-canvas navigation
Interchange responsive content
Orbit slider
Clearing
Forms
Form validation
Reveal
Joyride
Accordion
Tabs
Summary
6
Testing
Testing
Testing IE 6-11
Supporting unsupported versions of IE
Multiple device testing
Summary
7
Sass and Foundation
Sass and Foundation
Introducing Sass
Installing Foundation with Sass
Going over the default settings file
Covering the variables
Going over the files
The index file
How do my files get converted?
What is Grunt?
Why is the setup so complicated?
Let's review the JS files
Summary
8
Mixins
Mixins
What are mixins?
Using a mixin within Sass and Foundation
Mixin libraries and other useful mixins
Summary
9
Designing Responsive Ideas
Designing Responsive Ideas
Using Foundation for in-browser designs
Building a quick prototype
Reviewing the prototype
Customizing the prototype
Foundation theme
Creating Foundation grids in Photoshop
Summary
10
Foundation with Other Tools
Foundation with Other Tools
Finding a starter theme
Using Foundation with other frameworks
Ideas on how to play nice with developers
Summary
Where to go from here
Index
Index

Chapter 5. JavaScript

In this chapter, we will be covering how to use the Foundation JavaScript components. They will add a lot of advanced interactivity to your projects and make your projects shine. We will cover the following topics:

  • Magellan sticky navigation

  • Off-canvas navigation

  • Interchange responsive content

  • Orbit slider

  • Clearing

  • Forms

  • Form validation

  • Reveal

  • Joyride

  • Accordion

  • Tabs

Before we get into the JavaScript, make sure you copy your code folder from Chapter 4, Elements, and make a folder in Chapter 5, JavaScript. Let's delete a bunch of elements so we can start with a cleaner file, but you will likely want the work we did in Chapter 4, Elements, for reference later on in this book when we add some of those elements back in or when you use Foundation in your projects after this book.

So let's delete the code following this image tag on or around line 47:

<img src="http://placehold.it/1000x250">

Then stop before the following line of code:

<script src="js/vendor/jquery.js"></script...
Previous Section
End of Section 1
Next Section