Two major aims when setting up the Drupal theming system for BeGrand were to use a grid-based theme (because I lurve grids) and to minimise the amount of crufty markup that a regular Drupal theme inserts into the page such that we have a nice clean, minimal framework on which to build the site. With an expectation (hope) of getting a fairly high amount of traffic, anything we can do to slim-down the frontend code is a plus – EC2 hosting is great, but it isn’t particularly cheap and getting rid of extraneous markup is a ‘quick win’ (or, if you prefer, a ‘low-hanging-fruit’…) – if we end up serving bazillions of pages every byte we can save helps.
An emerging best practise in Drupal theming is to use a ’starter theme’ (of which there are quite a proliferation now) and to build a ’sub-theme’ upon that, leaving the core of the starter theme untouched so that future upgrades don’t b0rk anything. Starter themes typically don’t have much (or any) styling, rather they present a blank canvas to start from, but often have lots of useful Drupal-specific functions built into them which can speed up theme development. (For example, the Zen theme includes custom admin links which appear over blocks on hover, saving many valuable seconds…) Here are some popular starter themes:
Drupal Starter themes:
- Zen: http://drupal.org/project/zen
- Genesis: http://drupal.org/project/genesis
- ATCK: http://drupal.org/project/atck
- Basic: http://drupal.org/project/basic
- Beginning: http://drupal.org/project/beginning
- Blueprint: http://drupal.org/project/Blueprint
- Clean: http://drupal.org/project/clean
- Flexible 2: http://drupal.org/project/flexible
- Foundation: http://drupal.org/project/foundation
- Framework: http://drupal.org/project/framework
- Hunchbaque: http://drupal.org/project/hunchbaque
- Tendu: http://drupal.org/project/tendu
Phew, quite a list. I’m sure there weren’t that many six months ago, which is why in the past I have used the Zen theme (the only one I knew about), which I found good to work with since it gives you clear, semantic markup, and also adds in a few (but not too many) handy extra divs (for instance an extra div in sidebar boxes which I used to apply padding to said boxes without messing with the box model, which we know makes IE 6 go horribly wrong, bless it. Zen also lets you add body classes which is REALLY handy for changing presentation/layout etc on a per page basis. All well and good, but I wanted more… so much more!
Grids and frameworks FTW
I have a background in print design, and learned to love grid systems back then, when organising and designing layout of information for user manuals, corporate reports, exhibition display stands and more. In the last year or so I have fallen back in love with grids, largely due to the emergence of 960.gs CSS framework. (I’m a big fan of frameworks for the same reason – they both give you a solid underlying foundation (and a toolset in the case of a framework) which enables more rapid, consistent development of pages for print, web pages, web applications etc). The first CSS framework I tried was Blueprint, which was quite nice, but didn’t really excite me. What I really wanted was a CSS framework which incorporated a grid system. Imagine my squeal of delight upon discovering 960.gs, which did just that. Actually, you don’t HAVE to imagine it:
960.gs was created by Nathan Smith after being inspired by a post by Cameron Moll heralding the 960px wide layout as the new standard for web-based interfaces. 1024×768 is the new 800×600 and 960px is a magic number since it is divisible by about 15 different numbers, thus enabling remarkable flexibility in your construction of grids. The framework works across browsers, yes including IE 6. Which is nice.
I used 960.gs on a few projects recently and really appreciated how it sped up the whole development process. The download from the 960.gs page include not just CSS files but also templates for various wireframing and graphics packages, plus a set of printable PDFs you can use to draw your wireframes on (if you are not already hooked on Balsamiq Mockups). The ability to use the same grid system from initial sketching and wireframing through to coding of the front end really speeds things up and it also means you and your client can have a common frame of reference when discussing design and implementation issues. In fact, I found that I could use the same CSS for the initial HTML wireframes and then just continue to progressively enhance it towards being the code for the actual production site, which is nice and efficient.
I was quite hoping, then, that some genius might have ported 960.gs to a Drupal theme… and lo, it came to pass: http://drupal.org/project/ninesixty
Not only did dvessel port 960 (now NineSixty), he made it better, in the following ways:
- Additional classes added to allow any order layouts. Useful for content first source ordering.
- 960-rtl.css add to reflow the page layout for right to left languages.
- Helper function provided for dynamic grid classes. ns()
And it also has a neat preprocessor function which automatically reformats the page if you go from a three-column to two-column layout (making the content div wider, basically). Which is nice. I’ll have that, I thought. So, we are now using the NineSixty theme as our starter theme for BeGrand, and so far it is working out very well. (As with the Zen theme and most other starter themes you are highly recommended to leave the starter theme intact and create a subtheme in which to do all your overriding CSS. So that’s what I did.) For development purposes, I’m using a three-column layout based upon a 16 column grid in the ratio 3-10-3 (live demo here).
As you can see from the demo you can also choose to view a candystripe background image which shows the grid you are using, which I find very helpful. The HTML output by this theme is very concise, so we are part of the way to our goal of super-clean uncrufty frontend code. For the other part of our solution it was…
All aboard the Mothership!
Although I was happy with the HTML from the NineSixty theme, Drupal blocks were still injecting a bit too much extraneous code for my liking. Although I said earlier that I quite liked the extra divs which the Zen theme provides, I decided to go hardcore and try to really get to the absolute minimal amount of HTML required in order to render the page how I would like. I mean, why not, eh? No sense having a kinda, sorta optimised site is there? With this resolution clearly made, I decided to find out if there was a way to get rid of all that extra Drupal crufty stuff. Five minutes of googling later I had found the Mothership. Mothership is ‘the über “clean up this html that drupal provides” theme’, created by self-professed HTML nerd Morten The King of Denmark. Its sole function is to act as a pre-starter theme which provides extremely clean and minimal HTML from pretty much all that Drupal throws at it. Perfick. If you find that you do need to add an extra div here or there you can just duplicate and override one of the many .tpl.php pages that Morten has so assiduously deboned, so to speak.
So when I said that our starter theme was NineSixty, I was lying. The actual arrangement is: Mothership (super clean starter theme) » NineSixty (lovely flexible grid system/framework) » BeGrand (everything else on top – branding, design, shiny buttons etc). It does mean that we have three themes, but since we pretty much leave Mothership and NineSixty alone that doesn’t really make things more complicated than they need be need be.
Less is more
It really is, isn’t it Mies? And so but we now, finally, have a powerful and robust partly preconfigured web application framework (Acquia Drupal) on top of which we have a flexible and robust yet also concise CSS/theming framework which has removed as much non-essential code as possible, while also providing a frontend design/development environment which is integrated from early wireframing stages through to production coding. Marvellous! All this optimisation malarkey can get quite addictive. I just wondered if there was one more thing that could speed things up even more… Because I AM going to have to code all the CSS for the BeGrand subtheme which will be required to actually make the site look like anything other than a very boring sandbox. I love the elegance of CSS (inheritance, etc) but always thought it would be great if it could be extended with mixins, variables, operators, and nested rules. Also, if I didn’t have to type curly braces all the time? That would be good. And maybe get rid of semi-colons while we are at it? Perhaps it could be provided, this magical CSS optimisation, by means of a Ruby gem which would be an absolute doddle to install and use? Imagine my utter shock and amazement upon discovering that {less} did all of that!
Now I can write super-concise CSS using all those good things I just mentioned and it will be magically compiled to ‘proper’ CSS before my very eyes! We are now optimised out the wazoo. Which is nice.
{ 1 trackback }
{ 0 comments… add one now }