Comparing Popular CSS Grid Frameworks

There are essentially three approaches to your sites theme when using Drupal. One, you can use a pre built theme. There are several available that can be purchased or used without charge. Another method is you can build your theme from scratch. The third is to use a base theme that can be modified for your specific needs. Using a downloaded theme, your options for customization are limited in that changing the structure in any way could affect how the theme works, perhaps making it unusable. Building from scratch allows you the most flexibility but also is the most difficult, not only from the time spent constructing it but also the added time that will be needed for browser testing to make sure it will work for the widest possible audience. The last method, using a base theme, allows you some customization options you may want while reducing total build and testing time. For Drupal, two base themes that have gained some popularity are Ninesixty and Fusion. We'll take a brief look at both of these and see what approach they take to making your themes more customizable.

Ninesixty

Ninesixty is based on the 960 grid system. A grid system is a way of dividing the screen width into columns, or grids, so that adding a class to a containing element defines the width of that particular column. The number 960 references the number of pixels wide the content container occupies. This is a popular number for web design as it fits within the most prominent browser screen widths and it is divisible by many numbers allowing for the most flexibility in grid widths. The standard 960.css file has container classes for 12 and 16 grids, but there can be more or less. The 960.gs website will generate a stylesheet for you with whatever grid number you would like. Using this theme in Drupal is quite easy, as it has a basic page template defined that you can use without modification. Just drop your blocks into the specified regions and the columns work as expected.

Fusion

Fusion is also a grid system but it offers more than just layout. Like Ninesixty, it has a page template that you can use without modification. What Fusion gives you is more options for customization with its default install. Along with fixed width grids, it also includes fluid width variations that will occupy the entire screen width. Fusion also has theme settings that can be set in admin instead of modifying stylesheets. Included with Fusion are superfish dropdown menus. This can save a lot of build time and makes dropdown navigation menus easy to implement. Fusion also has built in support for the Skinr module that allows for UI theme modifications without writing your changes directly into your stylesheet. In order to take advantage of this, you will need to download and install the Skinr module separately from Fusion. Once installed you can get both working far more quickly than you could if you were to build from the ground up. I've found that it's when you want to customize the main page template you'll notice the difference. Since Fusion leaves a lot of style out of the grid classes, the structure of your template will need to be more complex to work correctly. Taking advantage of Skinr requires more coding up front so that the UI can be accessed from the admin section. Conversely, Ninesixty's simplicity can lead to problems later in the build as you will need to override its default styling. Ninesixty by default floats all grids left and adds margin to the left and right. It also positions every grid class relative to its push and pull classes. While this may not be an issue in the future, as long as your site is being visited by users with IE 6 and 7 it could be a problem for drop down menus, modals and tooltips being hidden behind other containers due to IE's method of applying a default z-index to positioned elements. Your experience may certainly be different. But for a simple layout without dropdown menus, Ninesixty could get you up and running faster. If you have a more complex layout and more time for your build, then Fusion may be the better solution. What do you think? What's your favorite CSS grid framework to use when theming your Drupal sites?