Query about alignment of push-x classes

[garethjmsaunders]

I've just been doing some work with Blueprint CSS v.0.9.1 (although in
fairness I've checked and this goes right back to version 0.6) and
have a query about the alignment of push-x classes.

It just seems odd to me in a framework where almost everything is
aligned or floated left that the push-x classes should float elements
right. Is that correct? Is that how it's been designed to work?

For example, on the Grid test page (http://www.blueprintcss.org/tests/
parts/grid.html), you can see that the "TESTING .PUSH-1 TO .PUSH-5"
elements all have that small photograph of a dog pushed one or more
columns to the right. But what looks wrong to me there is that the
images align on the right-hand side of the columns.

The first example there:

<div class="span-2">
<img style="width: 54px; height: 36px;" src="test-small.jpg"
class="push-1">
</div>

has a div that spans two columns (span-2), containing an image which
is pushed one column to the right (push-1). I would have expected
that image to have then aligned with the left-hand side of column 2
rather than aligning with the left-hand side of column 1, which it
would have done without the push-1 class.

To see what I mean, use Firebug on that demo page to change the float:
right declaration within the .push-1, .push-2, .push-3 ... .push-24
rule (screen.css (line 248)) to float: left.

That, to me, makes much more sense. Is this a bug or has it been
designed this way?

The pull-x classes work just as I would expect them, pulling the
content back into previous columns, aligned-left.

Thanks

Gareth

[garethjmsaunders]

To demonstrate further what I mean, I've created the following example
page:

http://www.garethjmsaunders.co.uk/blueprint/push/

Gareth

[24/7]

Normally such a behavoir (i see it but can't replicate it on my own
test-page) comes from serving the classes in the wrong order. Than you can
expect that they are overriding each other, so only float: right will get
applied. When i look at my own pages, where i use the same doctype and same
bp-stylesheets, i get (in firebug) first my span class and then my
push-class, so the push float: right get's overridden by my span float: left

I'm sorry, that i can't help you more, but maybe you will find the answer in
the loading order...

-----Ursprüngliche Nachricht-----
Von: bluepr...@googlegroups.com [mailto:bluepr...@googlegroups.com] Im
Auftrag von garethjmsaunders
Gesendet: Dienstag, 06. Juli 2010 08:31
An: Blueprint CSS
Betreff: [BP #4002] Re: Query about alignment of push-x classes

http://www.garethjmsaunders.co.uk/blueprint/push/

Gareth

--
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.
To unsubscribe from this group, send email to
blueprintcss...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en.

[garethjmsaunders]

Okay, so I swapped the order. Originally the code read:

<div class="span-1 push-1"><p>1</p></div>

but then I swapped them around:

<div class="push-1 span-1"><p>1</p></div>

and I get exactly the same result, because it's not to do with the
order of the classes in the HTML mark-up, it's to do with the order of
the CSS cascade, because, and I quote Eric Meyer, "the later a
declaration appears in a style sheet or a document, the more weight it
is given." (CSS Pocket Guide, Third edition, O'Reilly, 2008, p. 9)

So, because

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24
{float:right;position:relative;}

comes AFTER

.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24
{float:left;margin-right:10px;}

the float: right takes precedence.

My underlying point is that I don't think push-x should have a "float:
right" declaration at all. It seems to make far more sense to me for
it to be "float: left". And that's what I'm really wanting folks
opinions about.

Ticket #114 on the Lighthouseapp bug tracker "Push/pull with Blueprint
VS. 960.gs" is interesting:

http://blueprintcss.lighthouseapp.com/projects/15318/tickets/114-pushpull-with-blueprint-vs-960gs

Hasse writes, "On the 960.gs website it's stated on the front page,
under Source Order that "By utilizing the push_XX and pull_XX classes,
elements can be rearranged, independent of the order in which they
appear in the markup ... I was simply wondering - why isn't this
simple and neat feature not available in Blueprint?"

It would appear to me, after initial tests, that this is possible if
the push-x classes were set to "float: left;".

Gareth

[Christian Montoya]

Hey all, just wanted to let you know I haven't ignored this thread.
I'm going to file this as a bug and have a look at it this weekend...
sounds like it will be a quick fix.
--
--
Christian Montoya
mappdev.com :: christianmontoya.net

[24/7]

Yea you're right. It's def. the specifity. I just reproduced something
similar in another scenario. It can be solved with assigning a span-x class.

[code]
<div class="span-24">
<div class="span-23 last push-1">Test #1</div> <!-- [1]-->
<div class="span-10 push-1">Test #2</div><!-- [2] -->
</div>

[1] No problem. The span pushes it back.
[2] Problem. If assigning no span-x , the content defines the width and
everything get's floated right. If you assign a span-x that's not span-24
minus push-1 = span-23 last it starts on the right side.

As far as i have thought now:
a) prepend-x => pushes content inside element to the right
b) append-x => make space on the right side oft he content (still left
alligned)
c) push-x => pushes element to the right (in theory)
d) pull-x => pulls element to the left

When looking at the push-x behavior: It's not that bad as it is now, because
sometimes you need to change the direction from ltr to rtl. IMHO: We ain't
got the wrong behavior. We are just missing one thing: either a real "push"
behavior or the current "push" (from right) behavior.

What i think could be done to make bp better:
1) move "push" classes on top of "span" classes and rename them "push-l-x".
2) make "push-r-x" classes where the "push" is now sitting.

What i don't know so far:
A) Could we need "pull-l-x" and "pull-r-x" classes too? I have never needed
them so far, but maybe someone other has.

Wish you best.

-K.

-----Ursprüngliche Nachricht-----
Von: bluepr...@googlegroups.com [mailto:bluepr...@googlegroups.com] Im
Auftrag von garethjmsaunders

Gesendet: Dienstag, 06. Juli 2010 22:01
An: Blueprint CSS
Betreff: [BP #4005] Re: Query about alignment of push-x classes

[cervenak]

Hi,
I found this bug feature(?)] when I tried Jesse Storimer tutorial "A
Closer Look At the Blueprint CSS Framework" based on BluePrint 0.7 see
this:
http://net.tutsplus.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/comment-page-3/

live demo of his tutorial is there
http://nettuts.s3.amazonaws.com/158_blueprint/src/index.html

Problem is with push-x inside footer div with copyright block when you
use BluePrint 0.9.1.10

Note that I fixed this behavior by changing grid.css (0.9.1.10)
FROM>

.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24
{float:left;margin-right:10px;}

TO>
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5,
div.span-6, div.span-7, div.span-8, div.span-9, div.span-10,
div.span-11, div.span-12, div.span-13, div.span-14, div.span-15,
div.span-16, div.span-17, div.span-18, div.span-19, div.span-20,
div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-
right:10px;}