Panels 3 And The 960 Grid System

Photo of Greg Harvey
Wed, 2010-05-12 20:47By greg

This post was going to be longer, but I just lost the entire completed document because the worst (and probably most expensive at $15/day, yes DAY) mobile Internet provider in the world, EVER, just dropped my connection mid-submission and for the zillionth time today. So you'll have to make do with an angry and hurried synopsis of what I would've written.

My latest project, in collaboration with Mark Boulton Design, involves working with the 960 grid system to theme a Panels-based layout. We are using the NineSixty theme as a base, plus the Panels module and associated Chaos Tools bits. Here's what I did to make Panels work smoothly with NineSixty so I could just use the Panels interface to build pages and forget about the CSS:

First install the various Panels and CTools components and create a NineSixty sub-theme. See the project page of NineSixty for help with that - I also removed the left and right regions and added a content_top one to my theme and I needed to change the container class in page.tpl.php of the sub-theme to container-12 - it's container-16 by default. If you're not familiar with NineSixty, you'll need to spend a few hours reading up and playing around.

Then create a new panel page, picking Flexible as the layout. When you get to the layout editor, add regions as you need them - in my case I needed three rows with three regions in each row, each region 4 grid columns in width. There will be a region there in a Row by default. Add a Region to the left and one to the Right, making sure they are set to Fluid. Do *not* play with widths at all, or CTools will create CSS files you don't want and need to over-ride. For all Regions in this Row, edit their settings and add the class "grid-4". You can then add further rows and regions, making sure regions are always Fluid, without any applied widths in the Panels UI and with the appropriate class in their settings.

For example, if you need an 8 column region on the left and a 4 column one on the right, create a new Row, create a "Fluid" Region, give it the class "grid-8", create another "Fluid" Region to the right and give it a class of "grid-4". Done!

Now to deal with any unwanted CSS Panels will generate. I used this CSS in my theme:


/* panels styles */
.panels-flexible-region-inside {
padding: 0;
}

.panels-flexible-row {
background-color: #FFFFFF;
border: 1px solid #EBEBEB;
margin: auto -2px 20px -2px;
display: table;
float: none;
padding: 0;
width: auto;
}

.panels-flexible-column-1-main {
float: left;
width: auto;
}

.panels-flexible-region {
float: left;
padding: 0;
}

Note, the .panels-flexible-row class contains some information specific to my theme, but I'm too annoyed with how long I spent writing this post before to tidy it up. Blame SFR.fr. ;-)

In short, with that CSS in place I could now create Panel pages from the Panels UI and provided regions had the correct class and no widths applied then the layouts would just work.

Off topic, but if you use the excellent BlockTheme module and want it to work with Panels 3, read this (the end bit, not the Panels 2 stuff at the start):
http://drupal.org/node/258377

Mobile Internet in France sucks.
Happy Grid Theming!