Closed GoogleCodeExporter closed 8 years ago
[deleted comment]
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
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
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
@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
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
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
@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
@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
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
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
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
Awesome. Thanks guys.
Original comment by stech...@gmail.com
on 20 Feb 2008 at 7:01
Original issue reported on code.google.com by
chris.messina
on 2 Oct 2007 at 10:21