Fluid grid calculator

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.


Did you enjoy this? Hire me!

Hi there, I’m Harry. I am an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. I write, tweet, speak and share code about authoring and scaling CSS for big websites. You can hire me.


I am currently accepting new projects for Q3, 2014 Referral scheme


Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Events

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance and CSS scalability and maintainability are paramount.