Sass Breakpoints + Responsive Images + Panels = RWD Utopia
- 2,397 views
This session assumes that you've already had some experience with responsive web design, and you have a decent understanding of Sass + breakpoints. ...
This session assumes that you've already had some experience with responsive web design, and you have a decent understanding of Sass + breakpoints.
Everyone knows that good responsive design needs some kind of solution to scale your images down for mobile users, a.k.a. Adaptive Images, Borealis, etc. So far, so good.
Unless you're using full-width huge images everywhere on your site, then at some point you have to face up to the image float problem. If you set a max-width on your images, then somewhere along the way your images start to look itty-bitty.
Ideally, you'd want your images to be as large as possible with enough room to neatly fit a few words alongside the image without weird text wrap rivers. And without any awkward white space between the image and the text. That's a lot to ask of basic percentages.
This session will show you how simple max-width percentages on your images don't fully solve this common problem, nor do breakpoints alone. But we can achieve a happy solution through the power of Sass.
Bonus: If you use panels, there's some fantastic panels integration solutions that can make our lives even better. Let's explore some outside-the-box Sass solutions and dive into custom panels hotness!
Demo Theme: bit.ly/panelitist
- Total Views
- Views on SlideShare
- Embed Views