Join Jen Kramer for an in-depth discussion in this video Integrate responsive images with Interchange, part of Learning Foundation 6.
- When Ethan Marcotte wrote his very first article…on responsive design back in May of 2010,…he defined responsive design as containing three elements.…A flexible grid,…media queries, and images that resize.…So of course we've covered the grid in great detail.…Obviously that contains media queries.…But images that resize tends to elude us…with various responsive design frameworks.…Bootstrap doesn't have any way of managing images…and loading in smaller images for smaller devices,…bigger images for bigger devices.…
You have to connect some kind of third-party…component for that.…However Foundation does come with this…particular functionality, it's called Interchange,…and you can find documentation about Interchange…here within their documentation website.…This is a client-side solution with Java script.…So the Java script is going to be smart enough…to load the image that you need for your particular device,…and only that particular image.…It won't load all of the images, then display one;…that's of course the really bad approach because…
- Working with the XY Grid system
- Adjusting margins and padding
- Block versus vertical grids
- Overriding CSS
- Including cards and callouts
- Customizing the navigation, including dropdown and drilldown menus
Skill Level Beginner
Building a Responsive Single-Page Design with Sasswith Ray Villalobos4h 55m Intermediate
Responsive CSS Workflow with Sass, Bourbon, and Susywith Carrie Dils2h 59m Intermediate
1. Overview of Foundation 6
2. The XY Grid System
3. CSS Overview
4. Navigation Systems
Next steps1m 33s
- 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.