Question

I started using Blueprint CSS at about 8AM EDT this morning and I find myself having the following questions:

1. When do I use the container class?

2. How should I think of container conceptually?

3. Do container classes need a span class? Why or why not?

4. Do container classes need a last class? Why or why not?

5. Can a container be inside another container?

6. What is the point of push/pull classes? Can’t I just position things with append/prepend?

7. If I use a float class like .right, .left, do I still need to specify a span-x and last?

8. How do I make a row taller?

9. How do I center something vertically in a row?

10. How do I make the root container be 20px from the left of the page instead of having it centered?

Answer 1

When do I use the container class? (+ the next 4 questions):

Viewing source can show you a lot. This is the container class:

.container {width:950px;margin:0 auto;}

It’s just a big page wrapper. Most people use it once to wrap all the HTML on the page so it’s centered and 950 px wide.

What is the point of push/pull classes? Can’t I just position things with append/prepend?

append/prepend adds padding. push/pull ‘shifts’ margins.

If I use a float class like .right, .left, do I still need to specify a span-x and last?

The whole point of these CSS frameworks is to avoid dealing with your own floats.

How do I make a row taller?

Add more stuff to the row or give it a height style.

How do I center something vertically in a row?

If sticking to the grid, you’d use append/prepend to center it on the grid. If you’re not sticking to the grid, you’d use any typical CSS approach (typically margin: auto)

How do I make the root container be 20px from the left of the page instead of having it centered?

Go all the way back to question #1 and look at the CSS class. Change that.

For the most part, Blueprint and it’s ilk are fairly basic tools once you get the hang of it (which you will in a matter of time). It’s primary purpose is to handle laying out the page into blocks and dealing with all the float logic for you. Once you get the hang of it, you’ll likely find yourself not needing a framework anymore and will typically whip up your own as needed to fit the particularities of whatever site you happen to be working on.