Panels 3 And The 960 Grid System

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!

I love 960gs so after reading

I love 960gs so after reading your post I started experimenting with using the flexible panels in this way.

Now, I'm pretty relaxed when it comes to extra divs, but... this is madness (screenshot) .

The problem with Panels_960gs is its inflexibility. No matter how many preconfigured panels it comes with, or how many you make, you always need something just slightly different. And making panel templates can be tedious. The awesome thing about the 960gs system is how quickly you can bust out a really complicated nested grid without having to think too much about class names, markup, etc.

I think the ultimate Panels 3 + 960 Grid System method must use a flexible layout builder instead of dozens of static configurations. I wonder how difficult it would be to convert the awesome 960 Layout Generator into a bad ass, flexible Panels 960gs module.

Granted

The amount of mark-up produced by Panels is scary. There was an infamous spat between Earl (Miles) and Mark (Boulton) after Mark made a flippant remark about Views mark-up on Twitter and Earl took it badly - Earl's point was, basically, that the mark-up is the way it is to try and satisfy as many people as possible and, if you want cleaner mark-up, you can make your own templates and layouts.

With that in mind, I've been checking out some work one of my colleagues did with custom layouts and it looks pretty easy and lets you have way cleaner mark-up. I'll post a follow-up blog on that, once I have concrete examples. =)

Create your own layouts

We use Panels + 960 on our site too. If you'd rather not deal with all the markup that the Flexible layout generates, its pretty simple to create your own layouts and use them. In the long run, it's also easier to edit them via a text editor than clicking through the Panels UI.

So I've been told

A colleague mentioned this today too. I will investigate tomorrow! =)

I think you will like these

I think you will like these Niniesixty issues I submited:

Add Panels layout -- http://drupal.org/node/780782
Add a Views row style override template -- http://drupal.org/node/780708

For people who aren't as

For people who aren't as experienced with Panels or 960gs, there's a Panels_960gs theme which has a ton of pre-defined Panels layouts out of the box. I wish it were set up as a vanilla base theme but it comes as a full theme with colors and graphics decided for you.

http://drupal.org/project/panels_960gs

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.