2

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Greg
  • 45,306
  • 89
  • 231
  • 297
  • Read this - > [http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/](http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/) and this tutorials should be really useful ,even if its not on Blueprint, it will be really helpful! [http://net.tutsplus.com/tutorials/html-css-techniques/mastering-the-960-grid-system/](http://net.tutsplus.com/tutorials/html-css-techniques/mastering-the-960-grid-system/) – David Apr 13 '11 at 14:14

1 Answers1

7

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.

DA.
  • 39,848
  • 49
  • 150
  • 213
  • Thanks. So following up on your float answer. Let's say I want to have some text "Welcome Username/logout" that's at the far right side of a row? it seems like if I do prepend-x, it won't but up against the end. Wouldn't I need a float right in this case? My blueprint cheatsheet says it has float classes builtin. – Greg Apr 13 '11 at 14:01
  • 1
    Don't think float left/right. Think of a grid. x columns of content per row. If you have a row where you want a menu on the left, and your login text on the right, you could do this: menuwelcome! – DA. Apr 13 '11 at 14:20
  • 1
    now, WITHIN a specific span-x you may want to use floats, but use the framework grid as much as you can to leverage it for page layout. – DA. Apr 13 '11 at 14:21