Sass Breakpoints + Responsive Images + Panels = RWD Utopiabit.ly/rwd-utopiabit.ly/panelitist

***Note, my speaker notes have been added to the footer of each slide so this makes sense to those reading later!

@Mediacurrent@KendallTotten

Kendall TottenTheming Manager Mediacurrent

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.

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...

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…

max-width: 100%;width: 25%;float: left;

*The image float problem.

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?

*Side notePanopoly is fantastic.

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

max-width: 200px;float: left;

*The image float problem.

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.

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.

Whatevershall we do??

Sass to the rescue!

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.

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.

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.

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.

What About Performance?

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

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.

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?

Custom Responsive PanelsFully 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.

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.

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.

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.

Custom Panel StylesThe 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.

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.

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.

Adaptive Images

Don’t skip out on making the images themselves responsive!

Check out the Adaptive Images module:drupal.org/project/adaptive_imageor drupal.org/project/borealisor 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.

End Result?

Demo:

How do I make this magic happen on my site?

1. Install the Omega 4.x Theme2. Install & enable the Panelitist Subtheme:

http://bit.ly/panelitist-demo3. Install RVM & Bundler4. Run the bundle install command in your

new sub theme directory5. Run the guard command to begin compiling

Sass6. Change Sass variables as needed.

How can I use this on my site?

Thank You!

Questions?

@Mediacurrent Mediacurrent.com

kendall.totten@mediacurrent.com

@kendalltotten

bit.ly/rwd-utopiabit.ly/panelitist