May 3, 2010

Introducing: Fuse Basic

Here at Fuse we argue from time to time about the best ways to do things in Drupal. Do we go with module 'x' or module 'y? Do we use views or custom code, etc... One of the more heated "debates" we've had lately was which base theme to use. We had been using Zen for a while but Niall, a themer that joined the Fuse team a while back, swears by Basic. Basic being a branch of Zen from a while back already had a lot of what we needed and less of what we don't so it seemed like a good progression for us. So, instead of just mashing up the best features of the two starter themes, we decided to use this opportunity to streamline our future development and hopefully yours while avoiding an all out theme war. Nobody likes a cranky Nerf gun wielding themer so Fuse Basic was born.

Since our wonderful designer prefers the use of a 975 pixel grid (versus the somewhat standard 960), this was to become the foundation of the new layout. The primary benefits of a 975 pixel base grid are added flexibility with the column structure, and slightly loftier margins that help keep visual page elements from running into one another.

Now, you may argue that the popular 960 pixel grid can do all of the above and wash your car if you massage it just right. While that argument has its merits, I have found that once tweaked to our liking, what was 960 ends up being 975.

The second item that sets the Fuse Basic branch apart from the pack is the nifty implementation of the #grid tool/script. This tool allows us to painlessly bring in our 975 pixel photoshop grid and overlay it over the page at the press of a button.

The features of #grid:

  • Adaptable for all layout widths and alignments
  • Adaptable for any vertical rhythm value
  • Set keyboard shortcuts to show and hide the grid, hold it in place, toggle it to the foreground and background, and jump between multiple grids
  • Uses a single JavaScript file, a little CSS, and an image (for the vertical lines)

The grid is bound to your F, G, H, J keys, and can be overlaid by pressing (and holding) the G key. For a full list of keystrokes and features, please visit #grid.

There you have it. Our very own theme to change the way Drupal sites are put together, or at the very least ease the transition from those pesky inDesign Photoshop mockups. If you get a chance to use Fuse Basic, please do let us know what you think.