The Blog formerly known as "Flight of the Pigeon". A lot of Web, Plone and Python, with other occasional topics such as education and running.

Monday, October 19, 2009

960.gs css grid framework, mockups and failing fast

Finally I've gotten around to making use of one of these css grid frameworks. Based on some cursory research I decided to use the 960.gs framework.Why I like 960.gsNo new knowledge - This framework builds on my existing css knowledge, it doesn't require me to install ruby/java and compile my css or any weirdness like that

Easy to learn - The principles are very easy to learn, this is important and usually means there will be good adoption of the tool.

Fast to get started - Being able to quickly test out new ideas is a big win, I believe in the concept of "fail fast". Anything that speeds up your "idea-test-implement cycle" is potentially valuable.

Documentation and Examples - Even though it's dead simple, examples and tutorials are always helpful, thankfully, these weren't hard to find. It seems 960.gs has gained good momentum.

Day 1 with the 960.gs frameworkSo what have I done so far? I've been pretty productive with this new framework. I decided to start with my own personal site.

I'm not fully satisfied with the final product, but as a proof of concept, I was able to get the prototype done very quickly, so I consider this to be a good start.

Most of my time was spent iterating over my logo and getting the mockup done in inkscape.

I used a grid layout generator to create a 16 column grid which I used as the starting point for laying out my design in css/html. The relevant parts of my mockup were exported from inkscape as PNGs960.gs in PloneUsing Plone's newly popularized xdv approach to theming, I was able to bring my html almost wholesale into Plone and the result are below. Note that the portlets are still unstyled but this is a good start.