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

1. Sass Breakpoints +
Responsive Images +
Panels =
RWD Utopia
bit.ly/rwd-utopia
bit.ly/panelitist
***Note, my speaker notes have been added to the footer of each slide so this makes sense to
those reading later!

2. Kendall Totten
Theming Manager
Mediacurrent
@Mediacurrent
@KendallTotten

3. Once upon a time...
Once upon a time, in a land called Atlantia, there once was a client whose website needed a lot of flexibility when it
came to building individual pages on their site.

4. Flexibility is key
The content editors needed to be able to change the panel page layouts and the content itself varied a lot. And it needs to be
responsive, because the good people of Atlantia and the surrounding kingdoms loved their mobile devices. So...

5. Flexible panel layouts!
I got to work, building out flexible panels layouts. I remembered that the Panopoly distribution had a lot of responsive
layouts already, so I took some cues from what they were doing and all was well until I noticed…

6. The image
float problem.
max-width: 100%;
width: 25%;
float: left;
Unless you're using full-width images everywhere on your site,
then at some point you have to face up to the image float
problem.
If you only give your images a percentage based width,
somewhere along the way your images start to look tinier than
they should be.
I know this is a mobile phone but we can still make these
images bigger than this. This is a snapshot from the Panopoly
demo on mobile. Can you even tell what’s going on in this little
image?
*

7. *Side note
Panopoly is fantastic.
Side note… This is *not* a bashing of the Panopoly Distribution. It’s pretty cool, you should check it out.

8. The image
float problem.
max-width: 200px;
float: left;
Even worse, if the images are allowed to be their
natural width, or if you set a max width and float the
images, you will inevitably get some weird text wrap
effects.This can be very awkward.
*

10. What About Breakpoints?
As a themer, solving this situation
requires that we know several
variables:
A. How big are the images?
B. How big is the panel region?
C. How big is the browser viewport?
Media queries only help you to know C.
The content editors control A & B.

11. Whatever
shall we do??

12. Sass to the rescue!

13. Sass to the rescue!
Sass can do the hard work of figuring out what the
breakpoints should be based on the image size,
panel pane size, panel region size, and browser size.

14. Sass to the rescue!
Sass can do the hard work of figuring out what the
breakpoint should be based on the image size,
panel pane size, panel region size, and browser size.
You can use this formula, and tweak a few variables to your liking -- either on a per panel basis, or
globally. Things like - how much room would you like to require to the right of your image before the text
starts wrapping around the image? Or how much padding do you want between the image and the text?
Easy stuff.

15. Sass is great at math!
We can then plug that breakpoint formula into every combination of panel region widths, panel pane
widths, and image widths. And you can see here, each time we include this mixin, it has a different
combination of variables that match the combination of selectors. And it will calculate the exact
breakpoints for you.

16. So… isn’t that a lot of CSS?
So… isn’t that a lot of CSS? Well yes. But when you have to leave some pieces of the equation up in the
air for the content editors to decide on a per page basis, you have to account for all possible
combinations of things. So we’re going to end up with a lot of cake, I mean code.

17. What About Performance?
But what about all those media queries? Doesn't that affect performance? Not as much as you’d think.

18. What About Performance?
Sam Richard in regards to Breakpoint:
"… we hashed out whether there were performance
implications of combining vs. scattering Media Queries
and came to the conclusion that the difference, while
ugly, is minimal at worst, essentially non-existent at
best."
Benchmarking: http://aaronjensen.github.io/media_query_test/
The resulting CSS is much like the results of when you use the Breakpoint Compass Extension.
And for those of you that like to see benchmark results, you can check out this link. Basically for every THOUSAND media
queries, you add between 0.5 and 1 second of page load time in chrome. And that’s BEFORE caching. For one of my panel
layouts, I’ve got somewhere between 5 and 6 hundred media queries.

19. Responsive Layouts You Say?
At a desktop size you may want 3 columns, but
on tablet you may want one full width column
and two half size columns.
Desktop
Tablet
Smartphone
So this all sounds good, but what about the fact that your panel region widths change size at different
breakpoints? At a desktop size you may want 3 columns, but on a mobile phone you may want one full
width column and two half size columns. We need to account for those different layouts, yes?

20. Custom Responsive Panels
Fully responsive
custom panel
layouts are easy.
Use the Singularity
grid system to
define the widths
of your panel
regions, per
breakpoint.
No problem. In fact, this mixin allows you to specify between which two breakpoints you’d like to apply a set
of these image-focused media queries. I start by building out my Panels layouts using the Singularity grid
system, and defining my region widths per breakpoint.

21. Custom Responsive Panels
Then apply the
image styles that
are needed for this
region, and between
what breakpoints.
and then I just tack on a few image grid mixins for each panel region as needed. Note that I only need to add an image grid
mixin for the number of columns this particular region spans. So if on desktop it’s 8 columns wide, but on mobile it’s 12
columns wide, I only need to include the image-grid-8 and image-grid-12 mixins here. That will save us from outputting some
unnecessary CSS.

23. Responsive Panel Layouts
Don’t forget, the reason we’re doing all this is so that content editors can control the
panel layouts. And anyone who’s built out a flexible panels layout knows that it can be
challenging and output some messy code. So we start with some responsive panels
layouts they can choose from, and them they can change panel pane widths through
the use of predefined panel styles. This solved half of the problem, but it still wouldn’t
show what the panel pane widths visually looked like. So one of my highly esteemed
co-workers, Jason Smith, wrote a fancy Panels plugin that made this all possible.

24. X
And my other fantastic co-worker Derek DeRaps. helped us out so that we didn’t have to hack Panels to make it work.

25. Custom Panel Styles
The Panels UX Tweaks module allows us to apply
(or override) styles on our panel panes, like widths
and image sizes.
So what we’re looking at here is snapshot that shows two panel pane side by side in the same region . Each has been set
to 50% width, so they float next to each other. So we get a good visual indicator of what this panel layout will look like
before we even save it. You can edit the panel pane styles by clicking on the gear icon on the panel pane and selecting a
new width, AND you can override the image styles here.

26. Image Styles
What you want to do is choose an image style that is the same size or smaller than the images in the pane. I’ve got a
just the basic “small, medium, large, and extra large” sizes which match my Sass variables, and also match my
Drupal image styles. You can absolutely customize these sizes, or add more if need be.

27. Image Styles
Selecting one of the image styles adds a class like image-small or image-large on the panel pane div, which our Sass
generated styles make use of. Ideally you wouldn’t need to use the image styles on every panel pane. You can add these
image classes through the views interface where you can control the markup , or tell the media module to add classes to
your images that match the image style applied. And then if you do apply an image style to the panel pane, it will override
whatever was previously set.

28. Adaptive Images
Don’t skip out on making the images
themselves responsive!
Check out the Adaptive Images module:
drupal.org/project/adaptive_image
or
drupal.org/project/borealis
or
drupal.org/project/cs_adaptive_image
...
By the way, the image styles we are applying via panels only control the CSS, they don’t
change the size of the images being loaded. I’m hoping to incorporate that in the next go
round, because Panopoly does something similar. It’s just not there yet. But in the
meantime you can apply the Adaptive Image style to your Drupal image styles to make
sure you aren’t serving giant images on mobile.

29. End Result?

30. Demo:

31. How do I make this magic
happen on my site?

32. How can I use this on my site?
1. Install the Omega 4.x Theme
2. Install & enable the Panelitist Subtheme:
http://bit.ly/panelitist-demo
3. Install RVM & Bundler
4. Run the bundle install command in your
new sub theme directory
5. Run the guard command to begin compiling
Sass
6. Change Sass variables as needed.

33. Thank You!
Questions?
kendall.totten@mediacurrent.com
@kendalltotten
@Mediacurrent
Mediacurrent.com
bit.ly/rwd-utopia
bit.ly/panelitist