Showing posts with label deliverance. Show all posts
Showing posts with label deliverance. Show all posts

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

Sign up for my upcoming Plone 5 Book & Video tutorials

plone 5 for newbies book and videos