Introducing GridBase
If you’re anything like me you’ve had a hard time making sure your CSS layout and typography are using a consistent grid and baseline. While I have now decided to start using a CSS framework such as 960.gs, BluePrint or Typogridphy after reading Jeff Croft’s posts on the topic, these frameworks are not ideal for all situations. You may want to use an unusual grid width or fluid layout which may be easier to make a custom layout for rather than hacking someone else’s framework to your liking.
With that in mind I felt it would be useful to be able to see the baseline and grid while I’m coding. Especially useful if you use the EditCSS tool in Chris Pederick’s Web Developer Toolbar extension for Firefox. What I have made is a simple jQuery plugin that gives you a customisable overlay showing either the grid, the baseline or both. So without further ado, I give you GridBase.
The Demo
Let’s get right into it because I like to see things in action before getting stuck into using it.
It may be hard to spot (the point is it’s out of the way) but there is a little link in the top left of the screen to open the gridbase menu. Toggle the grid or baseline, and play with some of the options to see how it works.
Using GridBase
GridBase is a single javascript file (available here) that requires the jquery library to be included aswell. Because a 960 pixel grid may not be what you need for a certain project reloading the page and having to edit all the options again would be a bit of a chore so you can specify default values when you initialise the tool.
The code to initlialise GridBase is:
$(document).ready(function(){
$.gridbase();
});
Nice and simple. The function also accepts an options object for setting the defaults for example:
$(document).ready(function(){
$.gridbase({
gridWidth : 960, // the grid container width
gridWidthUnit : 'px', // the grid container width units
gridAttachment : 'center', // align the grid left, right or centre
gridOffset : 0, // offset the grid the the edges if attached left or right
gridOffsetUnit : 'px', // the units for the offset
columnWidth : 240, // the column width, available column widths are automatically calculated from the grid width
columnWidthUnit : 'px', // the column width units
gutterWidth : 0, // width of the column gutters
gutterWidthUnit : 'px', // units for the gutter width
baseOffset : 0, // the baseline can be offset from the top of the page
baseOffsetUnit : 'px', // the units for the baseline offset
lineHeight : 22, // the line-height value
lineHeightUnit : 'px' // units for line-height
});
});
Extra
I’m going to have to redesign the blog using GridBase now (seeing as the site is still unfinished anyway :S) in order to provide a better example. In the meantime I’d love to hear thoughts or suggestions on how to improve it. I’d also love to hear if you like it and intend to use it.
Things earmarked for coming back to and improving upon:
- Find a way to avoid using dropdowns for units and let people write in the value directly, reducing the number of inputs, options and interactions necessary.
- Make the menu look a little nicer
- Fix percentage width grids
- I’ll add to this as any suggestions or requests come in.
Download
Update
Turns out someone has already done a similar - but much more complete - tool. Check out Grid, it’s a bookmarklet too 
Thanks to James Box for the link.
Tags: CSS, CSS framework, Design, Development, GridBase, jquery, Tools