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.gs
No 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 framework
So 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 PNGs

960.gs in Plone
Using 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.