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.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.
http://img.skitch.com/20091019-xhfwnxa586nkc5d9k76fey2reb.jpg

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

http://img.skitch.com/20091019-ky7ak7hjnjtiwis7kc35i8fbx9.jpg

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.

http://img.skitch.com/20091019-x6fxqy6m84jrjn9pfeq2c8uc53.jpg

3 comments:

Alexander Limi said...

Also check out the grid system shipping with Plone 4, available separately here: http://deco.gs

andrewabogado said...

@pigeonflght Our team successfully managed to use 960 GS on one of our Plone projects. It wasn't an ideal implementation but it still works and serve it's purpose.

@Alexander Limi I'm glad to know about Deco. I'll be checking that out. I am looking forward on the new Grid System for Plone 4 (really excited). Kudos to the Plone team.

pigeonflght said...

I'm getting into deco.gs now and have used on projects.... will need to update the blog.

Sign up for my upcoming Plone 5 Book & Video tutorials

plone 5 for newbies book and videos