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 <[email protected]> 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... > > On Jun 4, 9:48 am, speedunk <[email protected]> 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... > > > 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. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Blueprint CSS" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en -~----------~----~----~----~------~----~------~--~---
