Creating liquid layouts using Blueprint
2,794 views
Skip to first unread message
Andrei
Dec 6, 2007, 3:54:16 AM12/6/07
to Blueprint CSS
Hello folks.
To get a liquid layout version using Blueprint, check out the sample I
made based on work some of us had been doing at Involution Studios for
the past few months:
http://www.designbyfire.com/liquid_blueprint/tests/liquid.html
I'll be doing a write up on this example and how to achieve liquid
layouts using Blueprint on my blog as soon as I get the time. I have
spoken to Olav regarding this work, and he and the gang are checking
it out. In the meantime, we also think it's a good idea to get you
folks looking at it to see what you think and what pitfalls it has
that would need to be addressed.
I have yet to test this liquid approach extensively on IE6/7, but I
know there are some issues. (See below.) Nor have I made all the
adjustments needed to some of the base CSS files in Blueprint to make
it bullet-proof.
You'll have to pour through the XHTML of the example page and the
liquid.css to see what I changed from grid.css:
http://www.designbyfire.com/liquid_blueprint/blueprint/lib/liquid.css
Or you can wait until I post about it on Design by Fire for all the
specific details.
The quick summary:
I had to make three changes in order for Blueprint to work in liquid
fashion: A) made the column span <div> styles use percentage values
instead of pixels, B) added an extra <div> in front of and below each
column, C) assigned "overlfow: hidden;" to the <div>s. In doing so,
you get liquid layout.
Basically, using "overflow: hidden;" on any wrapper or container <div>
will prevent the column floats inside that column from breaking the
layout. That's the main trick. Further, in using the extra <div> tags
in the markup, it allows you to wrap content so there's no need to
ever use "clear: both;" This is an important point, as using a "clear:
both;" means the grid structure can never be nested in a larger page
layout. For example, if you wanted to add a global sidebar, in the
current Blueprint model, you'd have to make the sidebar part of the
grid structure. This would prevent you from creating a sidebar like
panel for a web application that lived on its own and was not part of
the content or grid structure. (Think the sidebars in Google Mail or
Google Maps.)
So in effect, this change allows Blueprint to get a liquid approach
and it also allows it to work as a component piece inside a larger
page structure if need be.
In reality, the only change needed by folks using Blueprint would be
to use the liquid.css instead of grid.css and change your XHTML markup
structure to look like:
<div class="container">
<div class="block">
<div class="column span-24">
<div>
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
<hr />
<div class="block">
<div class="column span-12">
<div>
<!-- CONTENT GOES HERE -->
</div>
</div>
<div class="column span-12">
<div>
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
<div class="block">
<div class="column span-8">
<div>
<!-- CONTENT GOES HERE -->
</div>
</div>
<div class="column span-8">
<div>
<!-- CONTENT GOES HERE -->
</div>
</div>
<div class="column span-8">
<div>
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
<div>
With this form of liquid layout, you get stretchy columns based on
window width, but increasing the font size won't increase the column
widths or otherwise break the layout. Generally speaking, this is the
preferred behavior for liquid, I think. To get scaling liquid layout,
you have to use em values instead of percentages. I'll do that later,
but I find that form of liquid layout to not be very useful as there's
no way to ever prevent wrapping if the user sets the browser font
extremely large.
With the stretch liquid model (of using % instead of px on the span
styles), the container style has a few key things that can be done to
it to control the overall layout behavior.
.container {
min-width: 960px;
width: 80%;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
The first is obvious in that changing the margin from an "em" value to
"auto" creates centered layouts.
The second thing is that to make a "fixed" width layout, like the
current Blueprint model today, simply change the width from a
percentage value to an em or pixel value. Now you can toggle the
behavior of liquid or fixed pretty easily with only this one
parameter. To the degree that creating custom grids that vary off a
base 24 is probably not needed for the majority of web-based layout
work.
Base 12 or base 24 are very good grid numbers as they are divisible by
so many smaller numbers. If you stick with Base 24, you can literally
use the exact same liquid.css file with every project and only have to
toggle the .container width value to switch from fixed to liquid
layouts.
Rounding Errors in Safari and IE6/7 with liquid layouts. This is the
bad news.
Given the model of making liquid requires using the same x/12 em math
as the type settings, you'll quickly encounter rounding bugs in both
Safari and IE6/7 using certain em values. It seems both Safari and
IE6/7 have some weird logic that toggles rounding up or rounding down
depending on some variable. The end result of this rounding math
behavior is that the liquid approach screws both browsers up a little.
(This is our best guess at the moment. We have to find people on the
engineer teams of those project to verify this is indeed the problem.)
Firefox does the right thing... again. Thank goodness for Firefox.
We're still working on the specific style overrides needed to fix
these rounding issues for IE6/7 and Safari for an interim solution,
but it is my hope that if we can get Blueprint using the liquid
changes in my example and enough blog posts pointing these weird
rounding and layout issues out, that we can somehow light a fire under
Apple and Microsoft to fix their rounding errors or whatever logic
they are using to determine when to round up or when to round down.
The Firefox team did the right thing as whatever Firefox is doing
makes all the "em" math work rock solid.
So to fix the rounding errors for IE6/7, you have to add override
classes that drop the 'em' value by 0.01 or 0.001 or so. This will
force the IE6/7 engine to force round down in the same way that
Firefox does. I'll get those to folks once I have them all locked
down.
More to come on DxF about Liquid Blueprint when I blog about it.
Please feel free to rip it apart and let me or Olav know where the
model completely breaks down. It's still a work in progress.
--
Andrei Herasimchuk
Principal, Involution Studios
innovating the digital world
e. andrei (at) involutionstudios (dot) com
To get a liquid layout version using Blueprint, check out the sample I
made based on work some of us had been doing at Involution Studios for
the past few months:
http://www.designbyfire.com/liquid_blueprint/tests/liquid.html
I'll be doing a write up on this example and how to achieve liquid
layouts using Blueprint on my blog as soon as I get the time. I have
spoken to Olav regarding this work, and he and the gang are checking
it out. In the meantime, we also think it's a good idea to get you
folks looking at it to see what you think and what pitfalls it has
that would need to be addressed.
I have yet to test this liquid approach extensively on IE6/7, but I
know there are some issues. (See below.) Nor have I made all the
adjustments needed to some of the base CSS files in Blueprint to make
it bullet-proof.
You'll have to pour through the XHTML of the example page and the
liquid.css to see what I changed from grid.css:
http://www.designbyfire.com/liquid_blueprint/blueprint/lib/liquid.css
Or you can wait until I post about it on Design by Fire for all the
specific details.
The quick summary:
I had to make three changes in order for Blueprint to work in liquid
fashion: A) made the column span <div> styles use percentage values
instead of pixels, B) added an extra <div> in front of and below each
column, C) assigned "overlfow: hidden;" to the <div>s. In doing so,
you get liquid layout.
Basically, using "overflow: hidden;" on any wrapper or container <div>
will prevent the column floats inside that column from breaking the
layout. That's the main trick. Further, in using the extra <div> tags
in the markup, it allows you to wrap content so there's no need to
ever use "clear: both;" This is an important point, as using a "clear:
both;" means the grid structure can never be nested in a larger page
layout. For example, if you wanted to add a global sidebar, in the
current Blueprint model, you'd have to make the sidebar part of the
grid structure. This would prevent you from creating a sidebar like
panel for a web application that lived on its own and was not part of
the content or grid structure. (Think the sidebars in Google Mail or
Google Maps.)
So in effect, this change allows Blueprint to get a liquid approach
and it also allows it to work as a component piece inside a larger
page structure if need be.
In reality, the only change needed by folks using Blueprint would be
to use the liquid.css instead of grid.css and change your XHTML markup
structure to look like:
<div class="container">
<div class="block">
<div class="column span-24">
<div>
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
<hr />
<div class="block">
<div class="column span-12">
<div>
<!-- CONTENT GOES HERE -->
</div>
</div>
<div class="column span-12">
<div>
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
<div class="block">
<div class="column span-8">
<div>
<!-- CONTENT GOES HERE -->
</div>
</div>
<div class="column span-8">
<div>
<!-- CONTENT GOES HERE -->
</div>
</div>
<div class="column span-8">
<div>
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
<div>
With this form of liquid layout, you get stretchy columns based on
window width, but increasing the font size won't increase the column
widths or otherwise break the layout. Generally speaking, this is the
preferred behavior for liquid, I think. To get scaling liquid layout,
you have to use em values instead of percentages. I'll do that later,
but I find that form of liquid layout to not be very useful as there's
no way to ever prevent wrapping if the user sets the browser font
extremely large.
With the stretch liquid model (of using % instead of px on the span
styles), the container style has a few key things that can be done to
it to control the overall layout behavior.
.container {
min-width: 960px;
width: 80%;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
The first is obvious in that changing the margin from an "em" value to
"auto" creates centered layouts.
The second thing is that to make a "fixed" width layout, like the
current Blueprint model today, simply change the width from a
percentage value to an em or pixel value. Now you can toggle the
behavior of liquid or fixed pretty easily with only this one
parameter. To the degree that creating custom grids that vary off a
base 24 is probably not needed for the majority of web-based layout
work.
Base 12 or base 24 are very good grid numbers as they are divisible by
so many smaller numbers. If you stick with Base 24, you can literally
use the exact same liquid.css file with every project and only have to
toggle the .container width value to switch from fixed to liquid
layouts.
Rounding Errors in Safari and IE6/7 with liquid layouts. This is the
bad news.
Given the model of making liquid requires using the same x/12 em math
as the type settings, you'll quickly encounter rounding bugs in both
Safari and IE6/7 using certain em values. It seems both Safari and
IE6/7 have some weird logic that toggles rounding up or rounding down
depending on some variable. The end result of this rounding math
behavior is that the liquid approach screws both browsers up a little.
(This is our best guess at the moment. We have to find people on the
engineer teams of those project to verify this is indeed the problem.)
Firefox does the right thing... again. Thank goodness for Firefox.
We're still working on the specific style overrides needed to fix
these rounding issues for IE6/7 and Safari for an interim solution,
but it is my hope that if we can get Blueprint using the liquid
changes in my example and enough blog posts pointing these weird
rounding and layout issues out, that we can somehow light a fire under
Apple and Microsoft to fix their rounding errors or whatever logic
they are using to determine when to round up or when to round down.
The Firefox team did the right thing as whatever Firefox is doing
makes all the "em" math work rock solid.
So to fix the rounding errors for IE6/7, you have to add override
classes that drop the 'em' value by 0.01 or 0.001 or so. This will
force the IE6/7 engine to force round down in the same way that
Firefox does. I'll get those to folks once I have them all locked
down.
More to come on DxF about Liquid Blueprint when I blog about it.
Please feel free to rip it apart and let me or Olav know where the
model completely breaks down. It's still a work in progress.
--
Andrei Herasimchuk
Principal, Involution Studios
innovating the digital world
e. andrei (at) involutionstudios (dot) com
Willem de Ru
Dec 6, 2007, 4:21:52 AM12/6/07
to Blueprint CSS
Thanks Andrei for all the hard work and sharing it with us! This
really looks good so far! I am looking forward to the blog post as
well :)
Regards
Willem
really looks good so far! I am looking forward to the blog post as
well :)
Regards
Willem
Lukie
Dec 6, 2007, 7:01:26 AM12/6/07
to Andrei on blueprintcss
Good morning Andrei,
It was foretold that on 06/12/2007 @ 00:54:16 GMT-0800 (PST) (which
was 06:54:16 where I live) Andrei would write:
It was foretold that on 06/12/2007 @ 00:54:16 GMT-0800 (PST) (which
was 06:54:16 where I live) Andrei would write:
<snipped a bit>
A> Please feel free to rip it apart and let me or Olav know where the
A> model completely breaks down. It's still a work in progress.
Nice work so far!
But testing it leads up to following remarks:
[1] IE6:
* resizing the viewport does not reproduce a horizontal scrollbar as
opposed to Opera, Mozilla and Firefox. This of course causes a drop
(but that's a personal pet peeve of mine: i hate drops lol).
This is caused probably by the min-width, which IE6 doesn't support.
* the image overlaps the surrounding text but on reload this gets
fixed (peekaboo bug?)
* the order of the content is way off: top third column get's dropped
under the first one, column with the image and text is all the way to
the left leaving a huge white space on the right, the "simple sidebar"
column is shoved to the right and the footer is also way off base:
that's get dropped next to the "simple sidebar" column.
[1] IE7: much better news lol
* the image overlaps the surrounding text but on reload this gets
fixed (peekaboo bug?)
--
Best regards,
Lukie
--------------------------------------------
Powered by The Bat! version 3.99.29 with Windows XP (build 2600),
version 5.1 Service Pack 2 and using the best browser: Opera.
"Everyone talks about apathy, but no one does anything about it."
--------------------------------------------
Andrei
Dec 6, 2007, 1:00:46 PM12/6/07
to Blueprint CSS
On Dec 6, 4:01 am, Lukie <luki...@yahoo.co.uk> wrote:
> * the order of the content is way off: top third column get's dropped
> under the first one, column with the image and text is all the way to
> the left leaving a huge white space on the right, the "simple sidebar"
> column is shoved to the right and the footer is also way off base:
> that's get dropped next to the "simple sidebar" column.
This is the rounding error problem I think. A least that's what I'm
> * the order of the content is way off: top third column get's dropped
> under the first one, column with the image and text is all the way to
> the left leaving a huge white space on the right, the "simple sidebar"
> column is shoved to the right and the footer is also way off base:
> that's get dropped next to the "simple sidebar" column.
assuming is causing the problem. This is one of the things we are
looking into to create IE overrides to fix IE6. Thoe overrides can be
tossed onced IE6 no longer becomes a required platform.
Lukie
Dec 6, 2007, 1:15:10 PM12/6/07
to Andrei on blueprintcss
Good afternoon Andrei,
It was foretold that on 06/12/2007 @ 10:00:46 GMT-0800 (PST) (which
was 16:00:46 where I live) Andrei would write:
It was foretold that on 06/12/2007 @ 10:00:46 GMT-0800 (PST) (which
was 16:00:46 where I live) Andrei would write:
<snipped a bit>
A> Thoe overrides can be
A> tossed onced IE6 no longer becomes a required platform.
Yeah, we all wish that :-)
--
Best regards,
Lukie
--------------------------------------------
Powered by The Bat! version 3.99.29 with Windows XP (build 2600),
version 5.1 Service Pack 2 and using the best browser: Opera.
"My mother used to say: the older you get, the better you get -unless
you're a banana." - Rose, "The Golden Girls".
--------------------------------------------
Olav
Dec 7, 2007, 12:06:07 PM12/7/07
to Blueprint CSS
This is some very nice work, and it will be integrated added to BP for
the next release. I'm hoping to to have a test version ready before
christmas.
Please post issues, comments and suggestions to this thread.
(Sorry for my absence these last few weeks, my finals are taking up a
lot of my time. Normal service will resume shortly.) :)
Olav
the next release. I'm hoping to to have a test version ready before
christmas.
Please post issues, comments and suggestions to this thread.
(Sorry for my absence these last few weeks, my finals are taking up a
lot of my time. Normal service will resume shortly.) :)
Olav
Niels Sandholt Busch
Dec 12, 2007, 7:43:24 PM12/12/07
to Blueprint CSS
The example looks great. I've been waiting for this in Blueprint (not
able to contribute atm).
Thanks a lot.
Niels Sandholt Busch
able to contribute atm).
Thanks a lot.
Niels Sandholt Busch
bohara
Dec 13, 2007, 5:12:51 PM12/13/07
to Blueprint CSS
Will this allow for the fixed 950px grid to scale from say
850-1000px? I am always concerned about users with low screen
resolutions, who's browser windows are not maximized.
On Dec 12, 6:43 pm, Niels Sandholt Busch <niels.bu...@gmail.com>
wrote:
850-1000px? I am always concerned about users with low screen
resolutions, who's browser windows are not maximized.
On Dec 12, 6:43 pm, Niels Sandholt Busch <niels.bu...@gmail.com>
wrote:
Bob Jones
Feb 26, 2013, 11:56:48 PM2/26/13
to bluepr...@googlegroups.com, and...@involutionstudios.com
Andrei and Blueprint community, how about updating liquid.css to provide an updated responsive design stylesheet for Blueprint?
With some carefully considered @media statements, our Blueprint layouts could adapt for phone and tablet displays.
Twitter Bootstrap offers a nice system to adapt fixed layouts to flexible on the fly for smaller displays, but by reverting to pixels instead of ems for its typography, it lacks the vertical rhythm of Blueprint.
Can we get this done?
With some carefully considered @media statements, our Blueprint layouts could adapt for phone and tablet displays.
Twitter Bootstrap offers a nice system to adapt fixed layouts to flexible on the fly for smaller displays, but by reverting to pixels instead of ems for its typography, it lacks the vertical rhythm of Blueprint.
Can we get this done?
Don Culbertson
Jul 22, 2013, 1:29:40 AM7/22/13
to bluepr...@googlegroups.com
> You received this message because you are subscribed to the Google Groups "Blueprint CSS" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to blueprintcss...@googlegroups.com.
> To post to this group, send email to bluepr...@googlegroups.com.
> Visit this group at http://groups.google.com/group/blueprintcss?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>
>
Reply all
Reply to author
Forward
0 new messages