Steff.me

It’s surprising how a “hey, wouldn’t it be cool if…”, can turn into a nice little project. The concept for GRIDINATOR is to allow for easy creation of custom, grid-based layouts.

If you aren’t sure what a grid layout is, I would recommend checking out some good posts by Khoi Vinh and maybe this article from Smashing Magazine, which has a good few set of links to keep you busy for a while.

Why build GRIDINATOR?

I built GRIDINATOR for my own use and to just see if I could do it. When I started as a freelance web designer late last year, I was introduced to grids by John Oxton. While I was aware of them and the concept, I hadn’t really bothered to actually use them until I was made to (sincere thank you, Mr. Oxton).

After quickly falling in love with grid-based layouts, I decided to start using them pretty much everywhere for little side-projects and client work. The concept for GRIDINATOR was designed primarily to make my life easier, as I tend to be very lazy. Fortunately, that can also be considered a good thing:

..only a lazy programmer will avoid writing monotonous, repetitive code. The tools and processes that come out of this endeavor fired by laziness will speed up the production. — Philipp Lenssen

After playing with numbers, creating a bunch of different grids and feeling irritated by doing the same thing over and over again, I decided to sit down and write something to make the grids for me; thus GRIDINATOR was born!

Why use GRIDINATOR?

GRIDINATOR is different from the “competition”, as it provides you with a means to get started using a grid-based layout that you designed. While there are other grid calculators out there, none of them actually give you any CSS or HTML to get going using the grid you design. At this point, I’d like to recommend you go check out ctrl+shft+g, which was a major source of inspiration for this project.

Using GRIDINATOR

GRIDINATOR has a (hopefully) simple to use interface to build your grid quickly. To build a grid, you have to specify a few options.

The options for your grid are:

• number of columns — the number of columns you want in your grid
• column width, in pixels — the width of each column within your grid
• column margins, in pixels — the spacing between each column
• container margin, in pixels — the outer spacing between your grid and its container
• colour of your grid — available in blue, pink and green

As you are specifying your options, your custom grid will be created. This grid is an example of what you will get when you download the templates. The size of the grid (without container margins) and the total size (with container margins) are displayed above the grid. If you alter any of the options, the grid will update in real-time.

If you can’t (or don’t want to) come up with your own custom grid, you can select from a few of the popular choices. When you select one of these choices, the grid builder will update to display what that particular grid looks like. You can still change the colour of this grid, by clicking on one of the colours in the options section.

Once you’re done creating your grid, you can get the CSS, a HTML template or even an image of your grid. With your options set, press one (or all) of the buttons to be prompted with a file download.

Downloads

Firstly, let me explain the “GET GRID IMAGE” button. Clicking this will create a PNG image the width of your grid by 20px height. This image used by the CSS template as a background image, to allow you to see the grid you are working with while you are working. The image will match your specification exactly, with your columns, column width, column margins, container margins and colour all taken into account.

The “GET CSS TEMPLATE” button will generate the CSS for the grid you specify. For an example of this CSS, please check out this Pastie. The first thing you will notice is a commented header, which includes the version number of the GRIDINATOR CSS (this value is also displayed on the GRIDINATOR homepage, just to keep you updated) and the specifications of your grid (should you forget).

Following this is the CSS. I’m not going to go into depth describing how to use this as on the GRIDINATOR site there is an example you can download that shows exactly how you can use the CSS. However, I will highlight what is included. You should notice that the CSS selectors for the columns is readable English, and does not contain numbers — this is something that I feel creates a nicer HTML document.

The grid itself is made from .wrapper and .inner-wrapper, where .wrapper is the outer container that specifies the total width of the grid and .inner-wrapper specifies the working area where the columns are contained. You will also find a declaration for each possible column within your grid, from one up to however many you specified.

I also included something that I have found rather useful, prefixes and suffixes. A prefix will allow you to fake the addition of another column preceding the one you apply that class to. For example, applying prefix-three to a column will add a margin-left to that column equal to the value of a three-col width; this makes it appear as if a three-col column precedes it. This can be useful for spacing out columns within your grid.

A suffix is the same concept as a prefix, except that instead of margin-left, it applies a margin-right; this making it appear as if a column follows the one it is applied to.

Lastly, the “GET HTML TEMPLATE” button. This will create a basic HTML file includes your grid and an example of each of the column specifications from one up to however many columns you specified. Please ensure that the HTML file is in the same directory as the CSS file, otherwise it will not work by default. For a more complex HTML template (one that demonstrates prefixes, suffixes and some more layouts), please download the example from the GRIDINATOR homepage.

Ch-ch-ch-changes

As GRIDINATOR is a work in progress, it will hopefully continue to grow and have more features. To keep track of the development, you can check out the changelog. This will list each update made to GRIDINATOR, including details about what has changed.

Contact

If you find a bug, need some help, have any suggestions for improvements or just want to comment, please feel free to leave a comment in this post or contact me at gridinator@steff.me.

I hope you’ll find GRIDINATOR useful or at least slightly entertaining for a couple of minutes.