Source ordering for grid-based layouts

[GoogleCodeExporter]

One of the issues that I think is problematic with the Blueprint CSS approach 
is that it doesn't use 
source-ordering effectively. That is, it doesn't really make it possible to 
offer your primary content 
first, followed by secondary content like sidebars, which is how the content is 
flowed in the 
Sandbox WordPress theme.

I wonder if there is anyway to use the same elegant column approach but with 
source ordered 
content?

Original issue reported on code.google.com by chris.messina on 2 Oct 2007 at 10:21

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I was wondering the exact same thing today while working with bp 0.6. The 
content of
my applications are divided in the usual content/sidebar fashion with the 
sidebar on
the left side and I can't think of a way to keep the source ordered while using 
bp's
grid classes.

Let me know if there are plans for this situation.

Original comment by vincents...@gmail.com on 11 Oct 2007 at 7:33

[GoogleCodeExporter]

I might be in the same boat as some of you as my content is ordered as so in the
source 1-2-3, but displayed as 3-1-2 and/or 2-1-3 for 3-column designs/pages. I 
think
you might have to just extend those .column and add alongside it an ID (i.e.
#content-primary, #content-secondary, #content-tertiary...); extend as in give 
it
additional style-rules, and not use .last as well if any.

I think this is a minor issue to my other one, which is not having any control 
on the
column sizes/design pre-development. For example, I have a 1000px .container 
which
has the following block dimensions/config:

3-1-2

.column {float:left; margin-right:10px;}
#content {width:980px; padding:0 10px;}
#content-primary {width:540px;}
#content-primary .box {width:215px; margin-right:10px;}
#content-secondary {width:300px;}
#content-tertiary {width:220px;}

<content>
<content-primary .column>
<box>1</box>
<box>2</box>
</content-primary>
<content-secondary .column/>
<content-tertiary .column/>
</content>
<header/> - needs to be 1000px cause of header-graphic
<footer/>

...and so on. Although, getting these to display would just take some thinking, 
it's
another task to get them working w/ BP's grid--at least from what I have found 
so far
(bearing in mind that you have no control on the mockup/PSD that was just 
handed to you).

Alas, I know that there is a solution somewhere out there to make it BP flexible
enough in these situation. Until then, let's get this thing to go v1.0 =)

Always looking for ideas/suggestions/pointers,
`Sherwin

PS. If you were wondering, or were in a situation were you had 1000px, the best
config the Generator gave me was 40-20-5 but I think the generated grid.png 
file was
21-4 vs 20-5 (px of fill, and then white space). HTH

Original comment by stech...@gmail.com on 19 Oct 2007 at 8:04

[GoogleCodeExporter]

Not sure if this helps, but I added a .pull-all {margin-left:-100%;}. That 
pulls my
last column to the left. I am able to move source order around based on 
preppend and
append.

Make sense? or am I off?

Original comment by dave.mer...@gmail.com on 30 Nov 2007 at 8:23

[GoogleCodeExporter]

@dave.merwin: can you upload or link to an example where you have this working? 
that'd be great! thanks!

Original comment by chris.messina on 30 Nov 2007 at 11:48

[GoogleCodeExporter]

Ah, I'll just add in the code. I am working on a product right now, but it is 
all
internal. More tomorrow.

Original comment by dave.mer...@gmail.com on 5 Dec 2007 at 5:16

[GoogleCodeExporter]

So this is what I did.

Here is the code for the columns:
<div class="container">
        <h1>Source Order Demo</h1>
        <hr>
        <div class="column span-12 push-margin append-1">
            <h2>This is Column 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nulla felis,
imperdiet quis, dignissim eu, aliquet a, nisi. Nulla pulvinar mi accumsan ante.
Vivamus vel nunc. Class aptent taciti sociosqu ad litora torquent per conubia 
nostra,
per inceptos hymenaeos. Sed et ante. Suspendisse placerat sapien nec nunc. In 
et nisl
et felis mattis laoreet. Fusce fringilla porta metus.</p>
        </div>
        <div class="column span-5">
            <h2>This is Column 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nulla felis,
imperdiet quis, dignissim eu, aliquet a, nisi. Nulla pulvinar mi accumsan ante.
Vivamus vel nunc. Class aptent taciti sociosqu ad litora torquent per conubia 
nostra,
per inceptos hymenaeos. Sed et ante. Suspendisse placerat sapien nec nunc. In 
et nisl
et felis mattis laoreet. Fusce fringilla porta metus.</p>
        </div>
        <div class="column span-5 pull-all append-1 last">
            <h2>This is Column 3</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nulla felis,
imperdiet quis, dignissim eu, aliquet a, nisi. Nulla pulvinar mi accumsan ante.
Vivamus vel nunc. Class aptent taciti sociosqu ad litora torquent per conubia 
nostra,
per inceptos hymenaeos. Sed et ante. Suspendisse placerat sapien nec nunc. In 
et nisl
et felis mattis laoreet. Fusce fringilla porta metus.</p>
        </div>
    </div>  
</div>

Then, using the plug-in idea, i customize the CSS to my liking.

By adding the following 2 lines I get source order:
.pull-all {margin-left:-950px;}
.push-margin {margin-left:200px;}

You can do pull-all as -100% but I have found that you get some odd values.

Anyway, I create a plug-in for my designs anyway, so, it is no big deal to add 
in the
additional 2 lines of CSS to get source order. I was wrong about the prepend. 
Doesn't
do what you want for source order, i forgot that prepend is padding.

Anyway, hope that helps.

Original comment by dave.mer...@gmail.com on 7 Dec 2007 at 12:13

[GoogleCodeExporter]

@stechico - Just a thought, but 1000 is pretty wide. On a 1084 window that does 
not
leave you much breathing room. Have you considered the 950 option. It is not 
just BP
that does that, but YUI as well, and many designs subscribe to the 950 ruler to 
give
the design breathing room when  window is minimized.

Just a thought.

Original comment by dave.mer...@gmail.com on 7 Dec 2007 at 12:21

[GoogleCodeExporter]

@dave = Trust me, I would've gone w/ something the grid calculator can handle 
and
would give proportional numbers, but sometimes projects just come w/ these from 
other
Designers who have started on them already =)

Original comment by stech...@gmail.com on 7 Dec 2007 at 1:13

[GoogleCodeExporter]

Interesting workaround, I'll have to check that out more thoroughly. 

While I can appreciate the good idea of having the primary content first in the 
source, I'm not sure that this is an 
issue BP should tackle, as it might not be something the vast majority of 
developers use. But then again, I might 
be wrong. :) 

Original comment by ola...@gmail.com on 13 Jan 2008 at 5:40

[GoogleCodeExporter]

We now have pull/push all the way up to 24. This is one way to achieve custom 
source ordering, by 
pulling/pushing columns across others. It's far from perfect though.

Original comment by ola...@gmail.com on 5 Feb 2008 at 9:33

[GoogleCodeExporter]

Closing this as different source ordering is now supported through pull/push 
all the way up to your column 
count. Works pretty good. :)

Original comment by ola...@gmail.com on 20 Feb 2008 at 9:20

• Changed state: Fixed

[GoogleCodeExporter]

Awesome. Thanks guys.

Original comment by stech...@gmail.com on 20 Feb 2008 at 7:01