…Now it's time to look at some of the fun aspects of Foundation.…There are, many, many JavaScript functionalities that come…with Foundation that you'll find very, very useful.…The first one we're going to take a look at,…is called clearing, and this is an interactive light box.…You can find the files to follow along with this…in your Exercise Files folder, and this one is called lightbox.html.…For this particular video, I'm also giving you an updated style…sheet that will take you through the rest of this chapter.…And it's app.css, if you just copy it into your…css folder, and replace the apps.css that you have there already.…So, this is the HTML that we have here, let…me show you what the site looks like right now.…So, we have the site that we've sort of semi…been working on through some of the other, previous videos.…
We have our top bar up here, we have the Landon Hotel, with you'll…feel at home in our neighborhood, a nice big image here across the top.…And then we have, what we hope will be a photo gallery.…
Author
Released
6/13/2014- Downloading and installing Foundation 5
- Introducing grids
- Centering columns
- Nesting grids
- Styling text, lists, buttons, panels, and more
- Adding navigation bars and dropdown menus
- Creating a responsive lightbox
- Adding an image carousel
- Integrating responsive images
- Adding tooltips
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 4s
-
Using the exercise files1m 11s
-
-
1. Overview of Foundation 5
-
What is Foundation?2m 27s
-
Examining Foundation's files7m 43s
-
-
2. The Grid System in Foundation
-
Introducing the small grid11m 5s
-
Applying offsets in the grid4m 51s
-
Centering columns4m 29s
-
Nested grids6m 32s
-
Block grids4m 27s
-
Source ordering4m 18s
-
Solution: Create a grid3m 41s
-
-
3. CSS Overview
-
Text alignment options6m 6s
-
Styling buttons3m 19s
-
Including panels2m 47s
-
Styling thumbnails2m 53s
-
Challenge: Style a page1m 5s
-
Solution: Style a page3m 2s
-
4. Navigation Systems
-
Adding side navigation2m 34s
-
Adding dropdown menus2m 43s
-
Working with Off Canvas6m 15s
-
-
5. JavaScript Effects
-
Conclusion
-
Next steps1m 24s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Creating a responsive lightbox with Clearing