First column problem

[rejeep]

Hi!

I trying to figure out how Blueprint's grid-system works. There seems
to be some differences on how it works, with comparison to 960.gs.

Lets say I have a site with a right sidebar and a left contents box.
Lets say that the site wrapper uses the standard 24 columns and that
the contents should be 18 columns wide and the sidebar 6 columns wide,
and also the last. The text I put in contents will aligned to the left
(0px from the "left border"), so I'll have to do some padding in order
to make it look nice. But this padding will make contents box wider,
and therefore there's no room left for the sidebar, so it will be
placed below.

In blueprint it seems like a box should be aligned according to the
grid. But in 960.gs it seems like it's the text. Does this mean that
you always have to do "something" with the first column in Blueprint?
But you don't with the others, since they will have the right grid
column space from the left box. So how would I solve this problem in
Blueprint?

Thanks!

[Phillip Senn]

Here's a great video comparing 3 major frameworks.
http://www.sitepoint.com/blogs/2009/11/10/video-css-frameworks-%E2%80%93-make-the-right-choice/

> --
>
> You received this message because you are subscribed to the Google Groups "Blueprint CSS" group.
> To post to this group, send email to bluepr...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=.
>
>
>

[Christian Montoya]

On Tue, Nov 17, 2009 at 8:56 AM, rejeep <johan....@gmail.com> wrote:

> Hi!
>
> I trying to figure out how Blueprint's grid-system works. There seems
> to be some differences on how it works, with comparison to 960.gs.
>
> Lets say I have a site with a right sidebar and a left contents box.
> Lets say that the site wrapper uses the standard 24 columns and that
> the contents should be 18 columns wide and the sidebar 6 columns wide,
> and also the last. The text I put in contents will aligned to the left
> (0px from the "left border"), so I'll have to do some padding in order
> to make it look nice.

There is more than 1 way to make it look nice.

- You could wrap .container in a custom div that has padding, making
your layout wider than 950px.

- You could use .prepend and .append to add wider gutters to your
columns, increasing the margins between columns.

- You could put sub-divs inside your columns that have their own
padding without affecting the overall grid (but this would deviate
from the standard grid in appearance).

--
--
Christian Montoya
mappdev.com :: christianmontoya.net

[Marco Barbosa]

In Blueprint you would use prepend-1 or append-1 and subtract this 1
from the total

Like "span-13 prepend-1", that would push the content of this div one
column.

The problem is that a column is 60px wide (by default). So 60 px of
prepending seems too much.

So most people use the "manual" padding, add the padding manually on
your div and subtract later from the div.

I liked your comparison here:

"In blueprint it seems like a box should be aligned according to the
grid. But in 960.gs it seems like it's the text."

I was thinking about checking 960 gs out, so you don't have this issue
with it?

[rebus_]

<div class="container">
<div class="span-5 colborder">left column</div>
<div class="span-18 last">content</div>
</div>

how about something like this? you get a nice border and padding
between her and the text.

[rejeep]

Phillip Senn,
Great video, thanks!

"I was thinking about checking 960 gs out, so you don't have this
issue
with it?"

Check out some of the examples on this page: http://960.gs/ You can
click on the "show grid" button and see how it applies the grid. As
you might see on some of the examples, the start of the left grid is
left aligned with the text, not the design.

rebud_,
Where does the .colborder class come from?


For now I simply solved it with this:
<div class="body">
<div id="contents">
<div class="padder">
<!-- Contents... -->
</div>
</div>

<div class="sidebar">
</div>
</div>

Where the .padder class had padding left and top of 10px.

[rebus_]

2009/11/18 rejeep <johan....@gmail.com>:

> Phillip Senn,
> Great video, thanks!
>
> "I was thinking about checking 960 gs out, so you don't have this
> issue
> with it?"
> Check out some of the examples on this page: http://960.gs/ You can
> click on the "show grid" button and see how it applies the grid. As
> you might see on some of the examples, the start of the left grid is
> left aligned with the text, not the design.

Yes, but also they don't have left border set so it does not interfere
with text.

>
> rebud_,
> Where does the .colborder class come from?
>
>
> For now I simply solved it with this:
> <div class="body">
>  <div id="contents">
>    <div class="padder">
>      <!-- Contents... -->
>    </div>
>  </div>
>
>  <div class="sidebar">
>  </div>
> </div>
>
> Where the .padder class had padding left and top of 10px.
>

It's from screen.css

div.colborder {padding-right:24px;margin-right:25px;border-right:1px
solid #BFCFCC;}

I seem to misunderstood the problem. If you want to set left border on
left column and don't want text to stick to the border, you can follow
Christians advice.
I usually create my own class which has all the properites of BP's
.span-5 class but with added padding and width - that padding. And use
.colborder to get right border and right gutters.