Learning Foundation 6

Create mobile-ready, cross-browser interfaces with Foundation 6.

Introduction

• Welcome
• What you should know
• Using the exercise files

1. Overview of Foundation 6

• What is Foundation?
• Download Foundation 6
• Examine Foundation's files
• Foundation documentation

2. The XY Grid System

• Identify Foundation's three grid systems
• Basic setup of the XY Grid
• Margins and padding with XY Grid
• Margin or padding collapse
• Auto-sized grid cells
• Source ordering
• Block grids
• Vertical grids
• Challenge: Create a grid
• Solution: Create a grid

3. CSS Overview

• Typography, blockquotes, lists, and text alignment
• Style buttons
• Include cards
• Include callouts
• Override Foundation's core CSS
• Customize Foundation using the download screen
• Challenge: Style a page
• Solution: Style a page

4. Navigation Systems

• Configure top bar, the basic navigation bar
• Responsive top bar
• Dropdown menus
• Drilldown menus
• Challenge: Combine off canvas and top bar
• Solution: Combine off canvas and top bar

5. JavaScript Effects

• Design a photo carousel with Orbit
• Set up a modal window with Reveal
• Integrate responsive images with Interchange
• Challenge: Add tooltips to a site
• Solution: Add tooltips to a site

Conclusion

• Streamline Foundation for launch
• Next steps