Written by on CSS Wizardry.
Independent writing is brought to you via my wonderful Supporters.
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.
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.
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.
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.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。