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.

I love the web, seriously love it. I have a burning desire to always be creating things. Nothing groundbreaking like Dribbble, but just things. I also love tinkering with code and UIs and all manner of stuff. I get an idea, I build it, I abandon it, I move onto the next one. I’d say less than 10% of the things I ever work on ever see the light of day.

in:focus, thankfully, was different. I had the idea, I started building, I got Oliver on board, I launched.

The idea was had when I was a little drunk. Me and Dan were at a bar when I had a whimsical idea for an interview project. Nothing more; just a site that hosted interviews with cool and interesting people. That night I got in and started merrily (tipsily) designing straight into the browser. Three hours later and in:focus’ design and build was done.

I decided that I needed to approach someone to interview first, and that this person would make or break in:focus. I have some really really cool followers on Twitter so I decided to source someone from there. Oliver and I have been following each other for a while now so I dropped him a DM and he said yes right away.

Oliver was an absolutely spot-on choice. Anyone who knows him, or has read the interview, will know that he’s a very interesting and inspirational guy, and he really made the first publication an instant hit.

I decided for sake of ease to port in:focus over to WordPress. This took about twenty minutes with a further hour or so ironing out any rough spots. I purposely hurried the entire process so as to a) not let the idea go stale, as so many tend to do and b) for the sheer self-imposed pressure. I love working under pressure.

I sent Oliver the questions (edited in part by Dan), he answered them, Suzanna proofed it, I put it live and you lot seemed to love it.

The moral I guess is have ideas and build. A few hours of work on my part, and time generously donated by others, and I have a project live that a lot of people seems to really enjoy. It was fun, I’m proud of the results and I’m looking forward to continuing it.

in:focus’ next steps are to simply interview more people. Over the next few months I aim to approach and interview more individuals and publish on a semi-regular basis. If anyone has any ideas as to people they like to see interviewed then just let me know!

Final thanks again to Oliver, Suze and Dan.

The site took me about three hours from concept to first phase, then about an hour to port it over to WordPress, so about 4–5 hours in total. I’m pretty pleased with the design, and it has a tablet and mobile version, too.

Even more exciting than that, however, is my first guest. None other than Oliver Reichenstein—owner of international agency Information Architects and brains behind Writer! Head over to read my Q&A with him.

in:focus has no fixed publishing schedule, and if you have any suggestions for interviewees then please let me know. Any feedback would also be great; as I said this project was purposefully ‘rushed’ as I wanted to see how quickly I could turn an idea into a reality. Many thanks to Oliver for helping this happen.

Enjoy, I hope…

I hope Type Tips comes in useful for you, and that the information in there is of some notable value. If you do like it, please share it by tweeting the link, I’d appreciate it. Any other thoughts? Just drop me a comment…

Quick Tips has proved popular in its short time in existence, getting mentions and Tweets from all manner of users across the globe.

If you have a tip you’d like to share just let me know, and I’ll add it with full accreditation.