Join Jen Kramer for an in-depth discussion in this video Block grids, part of Up and Running with Foundation 4.
- View Offline
- Exercise Files
This is block grid.html. This is the same document we've been …working on for the last two videos. If you have been following along, you can …just can continue working on the document you have there in front of you. …If you are jumping in, or that document isn't working, you can find block …grid.html in your exercise files folder. Back in the nested grid video, I built …out this little grid down here, which is now at the top of the page. …That is the series of pictures. It's part of Foundation's very flexible grid. …We saw the advantages and disadvantages of this particular approach.…
One of the things that you might here is that there's just a ton of mark up that's …involved with getting these images to line up next to that chunk of text. …And I mentioned at the time that there's actually a better way of coding this. …It's called the block grid. With a block grid, what you would do is …put these images into a list, an unordered list. …Then, from there, you can use a class, one of these block grid classes to get …
- 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?
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.