Introduction:
I’ve to admit it…this is just a post to take a small break from work.
It’s sunday, and i’ve been working the all week almost 15 hours per day…soooo…
i’ve thought that maybe a small break writing on my blog whould have been more relaxing than keep working…so…here it comes the article:
Yesterday i’ve started a new job for a german client, and as usual…i’ve started almost everything from scratch.
Basically, starting everything from scratch always means: “try to find the best way of doing things….better than last time”.
And here’s what happened.
The mission:
Build a backend with user-friendly and intuitive navigation -and actions- for an e-commerce website
The one-day-goal:
Make the structure of the e-shop easy to manage for any kind of content like text inputs, textareas, files, wysiwyg editors, iFrames, modal boxes, checkboxes, comboboxes, drag’n'drop stuff, error messages, AAAAHHH!!!!
AND trying to keep the interface reallyreallyreally easy-to-use.
You know?
Ok, so…i’ve started looking on the web about grids and landed on websites and blogs about User Interfaces, tools and wireframing softwares i’ve never heard before….very funny how can you completely loose control of your clicks and end up falling in love with some new stuff :)
And yes, after all thes clicks i’ve fell in love with grids, all of them!
Including: baseline grid, 960 grid system, HashGrid, the useful 1KbGrid, etc.
Everything was exciting, but was looking “too complicated” for me… (i’ve tried a bunch of grids, in 2 hours) and i’ve realized was too much effort for me to learn how to use all these grids…i than saw blueprint! But yes…also that one, too much effort for time i wanted to dedicate on grids.
http://www.alistapart.com/articles/fluidgrids/ it’s an article pretty old…(March 3, 2009) but was my “light at the end of the tunnel”, it saved me!
And that’s why i now love….
Fluid Grids!
In this particular post i want to write a small review about two of them:
- fluid960gs (12-16 columns layout)
PROS: A complete grid framework, really cool and really really complete
CONS: Takes time to understand it and use it in your HTML
CONS: Heavy css files.
- fluidgrid (6-9 columns layout)
PROS: 1sec to understand it, SUPER-light-weight css
CONS: 6-9 columns
PROS: it’s so easy to understand it that you can easily extend the columns, for example to 18!
So…..
The 18 columns fluid grid for fluidgrid
is nothing more than a few (stupid) lines of CSS
to copy and paste in the “demo.css” file of fluid-grid-system folder
to obtain the fluid layout of fluidgrid working with 18 columns…
div.eighteen_column.section div.one {width:5%;}
div.eighteen_column.section div.two {width:10%;}
div.eighteen_column.section div.three {width:15%;}
div.eighteen_column.section div.four {width:20%;}
div.eighteen_column.section div.five {width:25%;}
div.eighteen_column.section div.six {width:30%;}
div.eighteen_column.section div.seven {width:35%;}
div.eighteen_column.section div.eight {width:40%;}
div.eighteen_column.section div.nine {width:45%;}
div.eighteen_column.section div.ten {width:50%;}
div.eighteen_column.section div.eleven {width:55%;}
div.eighteen_column.section div.twelve {width:60%;}
div.eighteen_column.section div.thirteen {width:65%;}
div.eighteen_column.section div.fourteen {width:70%;}
div.eighteen_column.section div.fifteen {width:75%;}
div.eighteen_column.section div.sixteen {width:80%;}
div.eighteen_column.section div.seventeen {width:85%;}
div.eighteen_column.section div.eighteen {width:90%;}
Read More