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.
9 thoughts on “How Blueprint and Compass help Idiots making CSS layouts”
Are you related to professor x? I was just researching compass yesterday but since it was a simple project for myself I just gave up and included the regular blueprint css. didnt realize it was this easy
@Zigzo: Haha, enjoy! Buy me a beer the next time we meet.
I have difficulties to get the value of compass.
Once you configured haml and sass with rails or padrino, you have all the good parts.
Put the blueprint.scss(es) into your Stylesheets folder and add Sass::Plugin.options[:always_update] = true;
to your config. That’s it.
What am I missing that compass offers ?
Great post, thanks for writing it up!
Sass is a language, like Ruby, you can do anything with it. But compass is a framework like Rails, it is more opinionated, has a workflow, project scaffolds, provides an ecosystem/plugin architecture, and generally understands that there’s more to building a design than writing a stylesheet. I wrote a blog post that goes into more detail here:
With Compass I think it’s better to avoid things like this:
in favor of
That approach can leave you with a lot of bloated CSS. What I suggest is that you isolate some aspect of your design that gives it the quality that makes it become a two-column layout and put that class on your body. E.g. if all content is a two column layout, you’d use body.content as your selector for defining your layout.
if you do not know a well skilled web designer (which knows html/css) then you properly need to code html/css using haml/sass. it is practically the poor mans utility for doing the web designers job but not earning the same amount of money 😉
First of all this is not SASS… this is SCSS