Make Panels layouts responsive

Updating this issue with important information for those coming to this tread from search results or looking for themes that fully support mobile first Responsive Panels.

Adaptivetheme 7.x-3.x has baked in support for responsive panels, it includes 14 Panels layouts - all with additional layout options for each breakpoint so you can choose what the layout will change to for your given media queries.

This system of responsive panels is very light weight and generates only the CSS you need to support your particular settings - this is very important for mobile, to keep the CSS files as small as possible. A lot of work and thought has gone into designed and implimenting this in Adaptivetheme, so try it out, it works very well with both the Panels module and the Display Suite module - you can combine the two for complete control over the page and node content layouts.

This theme uses initial scale 1 - if you want to use panels that are not responsive and therefor break the layout, that is your responsibility, but its not the purpose of this theme, which is to design for all devices. End user scaling with pinch/swipe with the site loading as it would in a desktop is not the purpose of this theme - if that's what you want then you should use a different theme, maybe the 7.x-1.x version of Corolla. I do have long term plan to write overrides for Panels so they will respond, or provide some responsive layout plugins for Panels that you can use, but I haven't had the time.

There is but you will have to write code, however its rather difficult because the base theme is primarily designed to respond to mobile devices and support responsive design - disabling this is not so strait forward, which is why I suggested using another theme.

Really the way forward is to build responsiveness into Panels, or at least the theme provides a way of achiving that. I've thought about this for the last hour or so and perhaps its time to just get this done, so I am re-opening this issue with a view to getting support for Panels into the core theme.

If you'd like, try out Responder, which wraps system and module CSS in media queries. It's basic functionality, but it does make Panels "mobile-first."

I have no plans to provide a way to disable the responsive features - just use a different theme.

almost all the responsive theme has problems with the panels, actually it's a problem of panels design.

Yep, they do, we need to take the bull by the horns the build in responsiveness, either by overriding the CSS for each Panel layout (the flexible one will be impossible probably), or by simply replacing all Panels Layouts with our own - i.e. duplicate the existing layouts and add new ones.

I'd really love to have this right now... and also some kind of responsive layout possibilities with display suite.

Cool, because I am working on it right now. Display Suite will be next on the hit list, I will try to catch up with Swentel at some stage and shoot the breeze on how to make that a possibility.

Looks like I am going to offer my own version of of the standard Panels layouts (but not the builder layout) + add all my old cool layouts.

If anyone is using the DEV version you might notice the new Panels layouts have been added but they do not have the responsive CSS, yet, but very soon they will, yippee!

Awesome! I'm guessing if you have responsive panels layouts then display suite could use them too.

Progress Update

I have built all the new panels layouts and have them all working. I found I needed to override all Panels module layouts as well, so I get the exact markup and classes we need, and to dump Panels module CSS completely.

How this works:
- there are 14 new layouts (this includes some new layouts and overridden Panels Modules layouts, including the brick etc etc)
- all of them are stacked, and for most of them the Top and Bottom panes are conditional, meaning if you don't use them they won't show
- they use the same HTML, classes and CSS as the Gpanels, so there is just one CSS file for all of it
- the CSS is generated and injected in the the themeName.responsive.layout.css file, just like all the other layout CSS so Panels and Gpanels are aware of your media queries.
- currently there is no way to customize the responsive layout of each Panel Layout, however I am thinking I can build a UI inside the theme settings to do this, but it won't be in the first version, basically I have chosen a sensible default layout for each device group, this should suffice for now and at least gets panels responding and looking good in each device.

Finally, I am unlikely to release this in 7.x-2.x and will instead cut a new version 7.x-3.x and pipe all these major changes there.

Stay tuned, this is getting close to dev release and is working much better than I anticipated, it freaking rocks.

Some screenshots.

One of a landing page with...
- 3 column mini panel in the secondary content region, this is the layout featured in the second screenshot and is only using 3 panes, the top and bottom conditional panes are not used (they are optional)

- Inset Stacked layouts in the main content region. This is taking the full width (no blocks in standard sidebars), note that the right side pane is "inset", there are two of these layouts (the other is the reverse of this on, with the full height sidebar-pane on the right instead of the left).

The other screenshot is of the admin screen for the mini-panel layout showing 4 or the new layouts (they are in categories), you will see some of the "panes" in the small thumbnails are orange color - all orange color panes are conditional (dont appear if you don't use them).

Heres a better screenshot showing 13 of the layouts, the 14th is the one column which I need to override to get the right markup and CSS etc (I still need to add it).

Awesome! Really amazing. Eagerly waiting for this. Thanks!

This looks very exciting!

I have cut the new branch for 7.x-3.x and enabled the dev for download, so I am moving this to "needs review".

I accidentally committed Fireworks 32bit pngs and they were 48kb each, lol, I just fixed that up but might take a day or so to filter into the download, so don't freak out, the theme is not 600+kb!

Stuff to think about:

- the layouts at each breakpoint, I think some of the layouts are looking a bit squished in tablet portrait view, we might need to adjust how the the layout changes (in fact maybe all of the 3 column layouts are too squished in tablet)

- don't use any standard Panels layouts, these are not supported, they load their own CSS and will not respond, only use the AT Responsive Panels layouts

version change, ops

@Jeff This is kind of a ridiculous question, but you said "don't use any standard Panels layouts, these are not supported". So what do I do for a "Single" column?

Also, could these layouts work in conjunction with a Panels Everywhere theme like "Versatile"? I know your working on just that for AT PE but I'm trying to punch out a website ASAP. #1389536: 2012 Roadmap - The Great Leap Forward

Lastly, what's the different between the orange and the blue. What do the colors signify? I read your response over here (http://drupal.org/node/1336768#comment-5584334) and this makes me believe that the orange panels disappear if they have no content in them. This sounds similar to the "Panels Extra Layouts" module. I've really enjoyed using those layouts in combination with panels visibility rules. Would it be possible to make all the panels regions behave like that?

There is a one column layout in the theme now, its not in the screenshot above.

These layouts are responsive, meaning they will change their layout depending on the width of the screen.

The orange panes are conditional, meaning they won't show up if you don't use them - just like normal regions in a standard theme. I could probably do this with the horizontal regions as well - so you can use the visibility rules as you say, but the complexity starts getting OTT when we start factoring in responsiveness and the total code weight of the CSS to drive such a system - at some point their is a trade off in performance for flexibility, and this something I am always aware of.

I can get AT PE working in no time flat if that helps, now that this is done. No they won't work with that other theme, they require this base theme to be present and active as the base theme (the CSS comes from the theme, not from the plugins - that is the key that makes this work).

Panels layouts are just "plugins" they can be in a module or a theme, PEL module is similar, but this is more powerful tbh, although I like the look of some of those layouts (the Adaptive layouts), I might steal them and make them responsive as well :)

I tested the theme. When I went to create panel page, I was able to see all the layouts.
However, I could not add any content. Also I received undefined index notices. Please see the screenshot below.

P.S. : Shall I report such errors in this issue itself or shall I start a new thread?

Dear all,

Have youd done or planned to do detailed planning document to meet physical capabilities and/or limits of different variants of mobile phone screens.

Some background to my questions:
1. http://cartoonized.net/cellphone-screen-resolution.php?brand=&Submit=Go
2. http://phone-size.com/?s=1%2C2%2C5

How should a developer plan optimal = a pixel from Drupal fits to a pixel on the physical screen to get the best outcome?

Any design guide to get best possible fit to screens of smart phones (what are the most important ones and how to handle rest)?

Could we have a sandbox similar to the site http://phone-size.com/?s=1%2C2%2C5, but with a real emulated screen so we could simulate our designs locally? Could it be a module that installs in a local Drupal and sizes it into two design / test environments:
1. Real size ( x and y correct in millimeters) - you could see behavior without phone
2. Pixel size (x and y correct in amount of pixels)

I do understand that a phone has a different browser than a PC, but alas it soes not matter - you may design and test nearly correct behavior before any field tests!

This could save a lot time for all of us - and boost quality of designs!

Harri Luuppala - all good ideas but presented in the wrong place. That is something more for the general developers or theme development forum, not this issue - generally we get a bit anal about hijacking threads, they are for single issues only because its too distracting and difficult to manage multiple conversations in one thread, also people subscribe to them and don't want off topic updates soaking up their valuable time, myself included.

I checked all the layouts: twocol_33_66 & twocol_66_33 give errors like in #22, onecol doesn't appear as an option and treecol_25_50_25 & threecol_50_25_25 don't show up under the 3 column option. I looked them over but didn't see anything obviously wrong but I'll keep looking.

I think I will close this as fixed - the addition of the panels layouts is done and thats the issue here.

If you have bugs to report we should deal with those in other threads, however I will try to reproduce this undefined index isssue.

It could be just a matter of clearing some caches or downloading the latest build, I noticed some pretty weird stuff the past days with GIT, so maybe try again.

nikkubhai & hobgobbler

I found the undefined index issue, so I will update the dev version. As for layouts not showing up, I think thats just a factor of GIT, that I cannot reproduce the means there would a mistake in the naming conventions or its not even in your download - check the layout is in the theme (clear sign something could be wrong with the dev download), look in adaptivetheme/layouts/panels/

See the screenshot in #15, that's taken from with in Panels (with JS disabled so they all show at once), the one col was added after I took that.

NOTE: the admin layout CSS is not added for any layout as yet, I am doing this slowly over the next few days, so if you are using Seven theme or any non-AT admin theme don't expect them to look right in the Panels admin, but they will shortly :)

Looking for feedback #1447426: Design and build UI for Responsive Panels Layout Options

A very big update for 7.x-3.x was just committed to DEV, this massively cleans up the initial implementation and adds the UI to theme settings.

Are those only available (layouts in #15) in AdaptiveTheme only or is it also available if used with gpanel in Genesis?

Nevermind, I see that Genesis includes 9 of the 13 (not sure if they are stacked). I'll find out today as I work on that.

Beautiful thread, just the info. I was looking for. I'm new, but Jeff Burns, you rock. Thanks for all the work.