2014
lynda
Jen Kramer
2h59m
English
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
http://www.lynda.com/Foundation-tutorials/Up-Running-Foundation-5/161085-2.html
Download File Size:621.08 MB
|
