What with Ethan’s book and A List Apart article the whole community is responsive design mad. Which is a good thing… I’ve been looking at redesigning CSS Wizardry onto a fluid grid and also adding a custom fluid-grid-igloo builder for inuit.css.
Fluid grid calculator
In doing these I realised how time consuming it is actually working out your percentages. I wrote a little proof of concept PHP script the other day and, as a test-case, decided to run the grid system we use at work through it. The outcome was surprisingly good so I got the script finished!
All I needed was to test, test and test it then pop a UI on it and bam! Here it is, my fluid grid calculator.
How it works
You give the calculator the number of columns you want your grid system to have, how wide you want one of those columns to be and, finally, how wide you want the gaps between each column (gutters) to be.
Given just these three bits of information the script gives you back a full stylesheet—which you can download—which contains the measurements for all of your possible grid sizes, their gutters and their containers.
Now, this is in Super-Uber-Pre-Alpha™ so please report any bugs to me as soon as you can, preferably via Twitter.
A note on inuit.css
As I mentioned I am currently working on integrating this calculator into inuit.css so you can build your own custom fluid grids. However, there is a lot of work involved in removing old code and building a builder that will construct a perfect igloo. I’m working on it, but it will take time. To be the first in the know follow the inuit.css Twitter account.
In the meantime you can simply paste your generated grid system into your own inuit.css extension.
By Harry Roberts on Tuesday, June 28th, 2011 in Projects, Web Development. Tags: Grids, Responsive web design | 8 Comments »
+
James Young said on 28 June, 2011 at 6:35 pm
Absolutely awesome work Harry. Top idea.
J.
Made in the North said on 28 June, 2011 at 6:41 pm
Ha ha, nice work! I’m starting a new RWD project this week so I’ll give it a whirl.
Ahmed El Gabri said on 28 June, 2011 at 7:21 pm
Very nice idea & sure a handy tool.
Just small thing, maybe adding min=”0″ attribute to the number input fields.
Harry Roberts said on 28 June, 2011 at 7:29 pm
@Ahmed: Thanks! The script will convert any negative numbers into positive ones anyway so that won’t do much help. Unless I’m missing your reasoning!
Cheers,
H
Luke Martin said on 28 June, 2011 at 8:51 pm
Good stuff. Harry, on your Type Tips (http://csswizardry.com/type-tips/), you say “fluid layouts are a bad idea!”.
Do you not think that anymore then? :)
Harry Roberts said on 28 June, 2011 at 10:07 pm
Thanks :)
Yes, well that’s in reference to fully fluid layouts (pre responsive web design). Fluid grids and media queries mean you can still set a good measure!
jamesvec said on 29 June, 2011 at 2:26 pm
I love this tool, I was just thinking we needed something like this the other day. I am a bit on the lazy side, it would be super rad if you could just enter in a max width if you wanted too instead of column width. Just a suggestion, Thanks for the great tool!
jjshell said on 3 July, 2011 at 6:19 pm
Hello,
Maybe I’m dumb, bot how does your grid calculator differs from say, that one:
http://grids.heroku.com/
Best,
-jj.