Learning Foundation 5

Learn to build responsive websites with Foundation—the clean, simple design framework that uses integrated CSS and JavaScript.

In this advanced course, learn to build responsive websites with Foundation—the clean, simple design framework that uses integrated CSS and JavaScript. Jen Kramer covers Foundation's twelve-column grid system, including the small, medium, and large grid options that make layouts easy to assemble. Then learn how to adjust Foundation's default CSS styling to make your buttons, thumbnails, and other page elements look just the way you want, and add top, side, and off-canvas navigation bars. Jen also shows you how to work with cool JavaScript-based effects like Orbit (an image carousel), Reveal (a modal window plugin), and Interchange (offering responsive image management).

Introduction

• Welcome
• Using the exercise files
• Using the challenges

1. Overview of Foundation 5

• What is Foundation?
• Downloading Sublime Text 2
• Downloading and unzipping Foundation 5
• Customizing Foundation 5, and a word about Sass
• Examining Foundation's files

2. The Grid System in Foundation

• Introducing the small grid
• Introducing the medium and large grids
• Combining grids in a single page
• Applying offsets in the grid
• Centering columns
• Nested grids
• Block grids
• Source ordering
• Challenge: Create a grid
• Solution: Create a grid

3. CSS Overview

• Exploring typography, block quotes, and lists
• Text alignment options
• Styling buttons
• Including panels
• Styling thumbnails
• Overriding Foundation's core CSS
• Working with visibility classes
• Challenge: Style a page
• Solution: Style a page

4. Navigation Systems

• Adding side navigation
• Configuring Top Bar, the basic navigation bar
• Adding dropdown menus
• Working with Off Canvas
• Challenge: Combine Top Bar with Off Canvas
• Solution: Combine Top Bar with Off Canvas

5. JavaScript Effects

• Creating a responsive lightbox with Clearing
• Making equal-height columns with Equalizer
• Designing a photo carousel with Orbit
• Setting up a modal window with Reveal
• Integrating responsive images with Interchange
• Challenge: Adding tooltips to a site
• Solution: Adding tooltips to a site

Conclusion

• Streamlining Foundation for launch
• Next steps