It takes me at least 2 hours to get CSS make what I want – normally this is having *a two-column layout, pushing elements around and having decent margins between floating blocks*. My CSS-skills do suck hard, and I usually give up asking friends and colleagues for help.
Luckily, I met Wynn Netherland and Adam Stacoviak at the “LSRC 2010”:http://www.lonestarrubyconf.com/schedule – I didn’t attend their training _Design eye for the Dev guy_ however, Wynn pointed me to *Blueprint and Compass* after telling him how hard I suck at implementing CSS.
This short write-up is meant to *help non-designers to have pretty clean CSS layouts* by using the mentioned frameworks.
h3. What is Blueprint?
“Blueprint”:http://www.blueprintcss.org/ is basically a *CSS template that offers a grid layout and a nice basic font setup*. It’s as if your CSS buddy would give you some ready-made CSS file and you could use his classes in your HTML files.
The central concept of Blueprint is the grid. *You don’t arrange elements by eyeballing but snapping to (invisible) grid lines* – this usually looks great.
Can you see how the left navigation columns and the content block are perfectly aligned in columns? That’s *this grid everybody refers to*.
Now, Blueprint “provides a bunch of CSS”:http://www.digitart.net/blueprintcss/bluebrintcss.pdf for snapping and moving. For instance, the following div would horizontally span the next 3 cells in your grid.
This is how I created the very left column. I *don’t worry about actual _widths, padding, margins_ – Blueprint does it for me*.
h3. A two-column layout
Another thing I love about Blueprint: *It comes with a two-column CSS setup* which is used on almost every web page, separating your site into
In my page I have a super simple HTML setup.