vertical alignment (and div reorder)
80 views
Skip to first unread message
speedunk
Jun 4, 2009, 10:48:40 AM6/4/09
to Blueprint CSS
Hi all...
I've been working on a set of styles for blueprint which would allow
for vertical alignment of columns as well as some div reordering for
SEO pruposes. It's in the beginning stages at this point, with no
documentation, but I wanted to put it out there to get some feedback.
Feel free to download the code. Place the folder in the plugins
directory of Blueprint for testing.
http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/
Vertical-alignment (the vertical-# & drop-# classes)
The important thing to know when implementing vertical alignment is to
make sure the vertical-# class and the highest drop-# class are the
same. For example, if you have drop-8 on one column and drop-12 on
another column, the vertical-# class would be vertical-12. See the
uneven column pages for a working example.
I've added 24 vertical and drop classes (at 1.5em intervals) to match
the span-24 blueprint provides; however the list could go on forever.
1.5em was chosen to keep with the default line-height provided by
blueprint.
Div Reordering (lift-# class)
These examples also apply a div reordering that can be used for SEO
purposes on some projects. For example, you may want to code your
content first and header last so that search engines pick up on the
content first. Notice in the source... the header div is the last div
within the container div, but appears at the top of the page. This can
be accomplished by applying lift-# class on the header div. This is
not fully tested, but could come in handy for those SEO fanatics out
there.
Check it out and let me know what you all think about this. Hope it
can be useful to the Blueprint community.
I've been working on a set of styles for blueprint which would allow
for vertical alignment of columns as well as some div reordering for
SEO pruposes. It's in the beginning stages at this point, with no
documentation, but I wanted to put it out there to get some feedback.
Feel free to download the code. Place the folder in the plugins
directory of Blueprint for testing.
http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/
Vertical-alignment (the vertical-# & drop-# classes)
The important thing to know when implementing vertical alignment is to
make sure the vertical-# class and the highest drop-# class are the
same. For example, if you have drop-8 on one column and drop-12 on
another column, the vertical-# class would be vertical-12. See the
uneven column pages for a working example.
I've added 24 vertical and drop classes (at 1.5em intervals) to match
the span-24 blueprint provides; however the list could go on forever.
1.5em was chosen to keep with the default line-height provided by
blueprint.
Div Reordering (lift-# class)
These examples also apply a div reordering that can be used for SEO
purposes on some projects. For example, you may want to code your
content first and header last so that search engines pick up on the
content first. Notice in the source... the header div is the last div
within the container div, but appears at the top of the page. This can
be accomplished by applying lift-# class on the header div. This is
not fully tested, but could come in handy for those SEO fanatics out
there.
Check it out and let me know what you all think about this. Hope it
can be useful to the Blueprint community.
speedunk
Jun 4, 2009, 5:51:17 PM6/4/09
to Blueprint CSS
I just noticed (and fixed) a bug in IE6 where the header was
invisible. Who knew that adding clear:both to a floating absolute
positioned element would fix IE6? I learn something new everyday :P
Updated code is at:
http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/
On Jun 4, 10:48 am, speedunk <speed...@gmail.com> wrote:
> Hi all...
>
> I've been working on a set of styles for blueprint which would allow
> for vertical alignment of columns as well as some div reordering for
> SEO pruposes. It's in the beginning stages at this point, with no
> documentation, but I wanted to put it out there to get some feedback.
> Feel free to download the code. Place the folder in the plugins
> directory of Blueprint for testing.
>
> http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-a...
invisible. Who knew that adding clear:both to a floating absolute
positioned element would fix IE6? I learn something new everyday :P
Updated code is at:
http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/
On Jun 4, 10:48 am, speedunk <speed...@gmail.com> wrote:
> Hi all...
>
> I've been working on a set of styles for blueprint which would allow
> for vertical alignment of columns as well as some div reordering for
> SEO pruposes. It's in the beginning stages at this point, with no
> documentation, but I wanted to put it out there to get some feedback.
> Feel free to download the code. Place the folder in the plugins
> directory of Blueprint for testing.
>
speedunk
Jun 5, 2009, 10:18:41 AM6/5/09
to Blueprint CSS
A Github repository has been setup for this plugin. Check it out:
http://github.com/seankstewart/BP-Vertical-Alignment/tree/master
On Jun 4, 5:51 pm, speedunk <speed...@gmail.com> wrote:
> I just noticed (and fixed) a bug in IE6 where the header was
> invisible. Who knew that adding clear:both to a floating absolute
> positioned element would fix IE6? I learn something new everyday :P
>
> Updated code is at:http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-a...
http://github.com/seankstewart/BP-Vertical-Alignment/tree/master
On Jun 4, 5:51 pm, speedunk <speed...@gmail.com> wrote:
> I just noticed (and fixed) a bug in IE6 where the header was
> invisible. Who knew that adding clear:both to a floating absolute
> positioned element would fix IE6? I learn something new everyday :P
>
speedunk
Jun 5, 2009, 11:39:28 AM6/5/09
to Blueprint CSS
OK... sorry for the confusion or inconvenience... I'm learning this
Github thing slowly but surely.
I've renamed this github repository to BP-Vertical-Positioning. I
figured this better describs the plugin rather than alignment.
Check it out:
http://github.com/seankstewart/BP-Vertical-Positioning/tree/master
Github thing slowly but surely.
I've renamed this github repository to BP-Vertical-Positioning. I
figured this better describs the plugin rather than alignment.
Check it out:
http://github.com/seankstewart/BP-Vertical-Positioning/tree/master
Bluenewbie
Jun 6, 2009, 11:22:15 AM6/6/09
to Blueprint CSS
Nice work! I was wondering if blueprint could do SEO as you
described. I guess it does now!
Jay
described. I guess it does now!
Jay
spills
Jun 8, 2009, 11:01:47 AM6/8/09
to Blueprint CSS
Blueprint already can do SEO to some degree see link below to a
previous thread however, the vertical alignment is an interesting
thought.
http://groups.google.com/group/blueprintcss/browse_thread/thread/5a5972c8bddfce98/a8f612af33753b64?lnk=gst&q=reorder+columns#a8f612af33753b64
On Jun 4, 9:48 am, speedunk <speed...@gmail.com> wrote:
> Hi all...
>
> I've been working on a set of styles for blueprint which would allow
> for vertical alignment of columns as well as some div reordering for
> SEO pruposes. It's in the beginning stages at this point, with no
> documentation, but I wanted to put it out there to get some feedback.
> Feel free to download the code. Place the folder in the plugins
> directory of Blueprint for testing.
>
> http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-a...
previous thread however, the vertical alignment is an interesting
thought.
http://groups.google.com/group/blueprintcss/browse_thread/thread/5a5972c8bddfce98/a8f612af33753b64?lnk=gst&q=reorder+columns#a8f612af33753b64
On Jun 4, 9:48 am, speedunk <speed...@gmail.com> wrote:
> Hi all...
>
> I've been working on a set of styles for blueprint which would allow
> for vertical alignment of columns as well as some div reordering for
> SEO pruposes. It's in the beginning stages at this point, with no
> documentation, but I wanted to put it out there to get some feedback.
> Feel free to download the code. Place the folder in the plugins
> directory of Blueprint for testing.
>
speedunk
Jun 8, 2009, 3:02:17 PM6/8/09
to Blueprint CSS
Hello fellow Blueprinters...
So I did some major testing this weekend and decided to completely
abandon my original code. Luckily, however, I did develop a better way
to handle vertical alignment and (more imprtantly) vertical div
reordering. Check out the revised code here:
Live Demo:
http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/
Github:
http://github.com/seankstewart/BP-Vertical-Positioning/
The new code is more robust and easier to implement in my opinion, but
feel free to hack it up and tell me what you think.
Basically, the vertical alignment functions just like the push-# and
pull-# classes... I call them drop-# and lift-# and they are set to
drop/lift at 1.5em intervals (to keep inline with Blueprint's default
vertical alignment). This should be easy to follow for those of you
familiar with Blueprint's push and pull classes.
The vertical div reordering is a bit more tricky. Here's the basic
HTML...
<body>
<div class="container">
<div class="move-5 span-24">
<div class="content span-18">CONTENT DIV</div>
<div class="sidebar span-6 last">SIDEBAR CONTENT</div>
</div>
<!-- Divs that are out of flow and reordered accordingly. -->
<div class="ap span-24">
<div class="move">Position:Absolute Div #1</div>
<div class="move">Position:Absolute Div #2</div>
<div class="move">Position:Absolute Div #3</div>
<div class="move">Position:Absolute Div #4</div>
<div class="move">Position:Absolute Div #5</div>
</div>
</div>
</body>
There are three new classes here to be aware of: (1).ap, (2).move, and
(3).move-#.
The .ap class (ap stands for absolutely positioned) acts as a wrapper
div for the div(s) that will be reordered.
The .move class should be applied to the div(s) inside the parent .ap
div and adds a height to each div. The default height is 21em. I know
what you are thinking, "if each .move div needs a set height doesn't
that put restrictions on my design?", but it's honestly the only way
this could work.
The .move-# class should be applied to the div that will visually
follow the reordered div(s) in the layout, but comes first in the
code. The # in the .move-# class corresponds to the number of .move div
(s) added inside the .ap div. For example, if you add three divs with
the class .move, the .move-# should be .move-3. The .move-# class also
is set at 21em intervals to match the default height set in the .move
class.
These default values can (and properly should) change for your
project.
You just need to understand one thing. The padding-top set in .move-#
class should be equal to the height of all .move div(s) that are
included inside the .ap div. For example, the default padding-top
of .move-5 is 105em which equals the default height of 5 .move divs (5
multiplied by 21).
Hope this makes sense and can be used in your next project. My
apologizes for the complete revamp, but it was necessary after doing
cross browser testing. The new code works great in IE 6, 7, & 8, FF 2
& 3, Safari and Opera.
On Jun 8, 11:01 am, spills <spillsmi...@yahoo.com> wrote:
> Blueprint already can do SEO to some degree see link below to a
> previous thread however, the vertical alignment is an interesting
> thought.
>
> http://groups.google.com/group/blueprintcss/browse_thread/thread/5a59...
So I did some major testing this weekend and decided to completely
abandon my original code. Luckily, however, I did develop a better way
to handle vertical alignment and (more imprtantly) vertical div
reordering. Check out the revised code here:
Live Demo:
http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/
Github:
http://github.com/seankstewart/BP-Vertical-Positioning/
The new code is more robust and easier to implement in my opinion, but
feel free to hack it up and tell me what you think.
Basically, the vertical alignment functions just like the push-# and
pull-# classes... I call them drop-# and lift-# and they are set to
drop/lift at 1.5em intervals (to keep inline with Blueprint's default
vertical alignment). This should be easy to follow for those of you
familiar with Blueprint's push and pull classes.
The vertical div reordering is a bit more tricky. Here's the basic
HTML...
<body>
<div class="container">
<div class="move-5 span-24">
<div class="content span-18">CONTENT DIV</div>
<div class="sidebar span-6 last">SIDEBAR CONTENT</div>
</div>
<!-- Divs that are out of flow and reordered accordingly. -->
<div class="ap span-24">
<div class="move">Position:Absolute Div #1</div>
<div class="move">Position:Absolute Div #2</div>
<div class="move">Position:Absolute Div #3</div>
<div class="move">Position:Absolute Div #4</div>
<div class="move">Position:Absolute Div #5</div>
</div>
</div>
</body>
There are three new classes here to be aware of: (1).ap, (2).move, and
(3).move-#.
The .ap class (ap stands for absolutely positioned) acts as a wrapper
div for the div(s) that will be reordered.
The .move class should be applied to the div(s) inside the parent .ap
div and adds a height to each div. The default height is 21em. I know
what you are thinking, "if each .move div needs a set height doesn't
that put restrictions on my design?", but it's honestly the only way
this could work.
The .move-# class should be applied to the div that will visually
follow the reordered div(s) in the layout, but comes first in the
code. The # in the .move-# class corresponds to the number of .move div
(s) added inside the .ap div. For example, if you add three divs with
the class .move, the .move-# should be .move-3. The .move-# class also
is set at 21em intervals to match the default height set in the .move
class.
These default values can (and properly should) change for your
project.
You just need to understand one thing. The padding-top set in .move-#
class should be equal to the height of all .move div(s) that are
included inside the .ap div. For example, the default padding-top
of .move-5 is 105em which equals the default height of 5 .move divs (5
multiplied by 21).
Hope this makes sense and can be used in your next project. My
apologizes for the complete revamp, but it was necessary after doing
cross browser testing. The new code works great in IE 6, 7, & 8, FF 2
& 3, Safari and Opera.
On Jun 8, 11:01 am, spills <spillsmi...@yahoo.com> wrote:
> Blueprint already can do SEO to some degree see link below to a
> previous thread however, the vertical alignment is an interesting
> thought.
>
spills
Jun 9, 2009, 12:04:00 PM6/9/09
to Blueprint CSS
Thanks for the effort in your coding, having additional options with
vertical alignment could come in handy for some projects. I did notice
that http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/index-uneven.html
does not render correctly in FF 3.0.10 on Windows though it might be
your previous code.
Thanks again for you hard work!
On Jun 8, 2:02 pm, speedunk <speed...@gmail.com> wrote:
> Hello fellow Blueprinters...
>
> So I did some major testing this weekend and decided to completely
> abandon my original code. Luckily, however, I did develop a better way
> to handle vertical alignment and (more imprtantly) vertical div
> reordering. Check out the revised code here:
>
> Live Demo:http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-a...
vertical alignment could come in handy for some projects. I did notice
that http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/index-uneven.html
does not render correctly in FF 3.0.10 on Windows though it might be
your previous code.
Thanks again for you hard work!
On Jun 8, 2:02 pm, speedunk <speed...@gmail.com> wrote:
> Hello fellow Blueprinters...
>
> So I did some major testing this weekend and decided to completely
> abandon my original code. Luckily, however, I did develop a better way
> to handle vertical alignment and (more imprtantly) vertical div
> reordering. Check out the revised code here:
>
speedunk
Jun 9, 2009, 1:17:32 PM6/9/09
to Blueprint CSS
Hi spills....
The overlapping is expected behavior. The lift class just moves divs
up and down with no regard to other divs (at least in the unstyled
demos I provided). I'm thinking this should remain this way for more
flexibility. Additional classes can be added to fix it though.
Check out these demos:
http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/index-style.html
http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/index-style2.html
The first link adds a height and a background to the header div, but
heights can sometimes be limiting. So I created a second demo (index-
style2.html) which adds position:relative and a z-index to the header
div. I also added the .clearfix class to the header div in order to
clear the three span-# inside the header div.
Hope this helps in your next project :^)
On Jun 9, 12:04 pm, spills <spillsmi...@yahoo.com> wrote:
> Thanks for the effort in your coding, having additional options with
> vertical alignment could come in handy for some projects. I did notice
> thathttp://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-a...
The overlapping is expected behavior. The lift class just moves divs
up and down with no regard to other divs (at least in the unstyled
demos I provided). I'm thinking this should remain this way for more
flexibility. Additional classes can be added to fix it though.
Check out these demos:
http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/index-style.html
http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/index-style2.html
The first link adds a height and a background to the header div, but
heights can sometimes be limiting. So I created a second demo (index-
style2.html) which adds position:relative and a z-index to the header
div. I also added the .clearfix class to the header div in order to
clear the three span-# inside the header div.
Hope this helps in your next project :^)
On Jun 9, 12:04 pm, spills <spillsmi...@yahoo.com> wrote:
> Thanks for the effort in your coding, having additional options with
> vertical alignment could come in handy for some projects. I did notice
Reply all
Reply to author
Forward
0 new messages