Join Jen Kramer for an in-depth discussion in this video Styling thumbnails, part of Learning Foundation 4.
Thumbnail galleries are everywhere. We've even encountered them here in this course. …Back in the grid chapter, we had something that kind of looked like a …Thumbnail Gallery. I'd like to incorporate that HTML into …this page that we've been developing. That block grid that we talked about …earlier is a great way to display these thumbnails, but wouldn't it be even …better if they looked kind of more thumbnail-ish. …Fortunately there's classes to do that inside of Foundation. …I am looking at my thumbnail document here. …If you've been following along with me through the previous few videos in this …chapter, just keep on working in the document you're in.…
If you're jumping in right now to look at this, there is a document called …three-thumbnails.html inside of your exercise files folder. …Also in you exercise files folder, you'll find a document called code snippets.txt. …Go ahead and open that up, and copy the HTML from that. …This is our starting markup here for our thumbnail grid. …
- What is Foundation?
- Exploring the grid system
- Working with lists
- Styling buttons, thumbnail images, and more
- Including flexible video
- Adding breadcrumbs to the navigation
- Working with Clearing, the responsive lightbox
- Creating accordion panels and tabs for in-page navigation
Skill Level Beginner
1. Foundation Introduction and Download
2. The Grid System in Foundation
3. CSS Overview
4. Navigation Systems
Next steps2m 12s
- 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.Cancel
Take 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.