Liquid layout in Blueprint CSS?
dodeantn
am I missing something? Is the liquid layout approach in blueprint or
not? I can't seem to find it on github. Will it be included?
Cheers
Christian Montoya
You can find all plugins on this page of the wiki:
http://github.com/joshuaclayton/blueprint-css/wikis/plugins
--
--
Christian Montoya
christianmontoya.net
Lukie
It was foretold that on 12/10/2008 @ 12:46:38 GMT-0400 (which was
13:46:38 where I live) Christian Montoya would write:
<snipped a bit>
CM> You can find all plugins on this page of the wiki:
Is the liquid plugin already compatible with IE6? Last time i checked
it didn't work in IE6.
--
Best regards,
Lukie
-------------------------------------------
Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.
"You have not really failed or been defeated unless you believe it."
--------------------------------------------
jibbajabba
looks like it works in terms of layout: http://www.designbyfire.com/liquid_blueprint/tests/sample.html
Christian Montoya
In order to have gutters within each column, the plugin relies on the
first child selector:
.column>div
IE6 doesn't support that. I'm not sure what would be the Right Way(tm)
to do this plugin, but I think the way it's done isn't going to cut
it.
Lukie
It was foretold that on 13/10/2008 @ 06:43:51 GMT-0700 (PDT) (which
was 10:43:51 where I live) jibbajabba would write:
<snipped a bit>
j> What isn't working in IE6 exactly? The test page at Design By Fire
j> looks like it works in terms of layout
Last time i looked at the BP testpage with the liquid plugin, there
were float drops all over the place in IE.
Mind you, i'm not talking about the designbyfire testcase. Just had a
look at it and there it works fine.
--
Best regards,
Lukie
-------------------------------------------
Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.
"The best computer is a man, and it's the only one that can be
mass-produced by unskilled labour." - Wernher Von Braun.
--------------------------------------------
Lukie
It was foretold that on 13/10/2008 @ 10:37:04 GMT-0400 (which was
11:37:04 where I live) Christian Montoya would write:
<snipped a bit>
CM> In order to have gutters within each column, the plugin relies on the
CM> first child selector:
.column>>div
CM> IE6 doesn't support that. I'm not sure what would be the Right Way(tm)
CM> to do this plugin, but I think the way it's done isn't going to cut
CM> it.
The first child selector is used to hide rules from IE6. What if you
set it up with a rule for IE6 and feed the other browsers what they
need using the first child selector?
--
Best regards,
Lukie
-------------------------------------------
Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.
"To exercise is human; not to is divine." - Robert Orben.
--------------------------------------------
jibbajabba
http://www.designbyfire.com/liquid_blueprint/blueprint/lib/ie.css
Has anyone had a look at that file and the IE fixes and determined if
it makes liquid layout bombproof?
Christian Montoya
>
> Design By Fire adds this file using conditional comments to fix IE6:
>
> http://www.designbyfire.com/liquid_blueprint/blueprint/lib/ie.css
>
> Has anyone had a look at that file and the IE fixes and determined if
> it makes liquid layout bombproof?
>
Ah OK, it's the classic 3px float jog. That's a solid fix, except for
being written as a hack. We could put that into the base ie6.css that
Blueprint comes with since I'm sure it would prevent other float
problems.
Italo Maia
normal layout? They seem the same to me.
On 14 out, 10:09, "Christian Montoya" <siro...@gmail.com> wrote:
Christian Montoya
>
> I don't get it. What is the difference between liquid layout and
> normal layout? They seem the same to me.
>
I think you need to make your browser winder smaller to see the effect.
Aaron Barker
solution. I have already commented on a previous thread with the
pertinent parts being:
The problem comes with each level deeper you go, the percentages are
wrong.
If on the first level I had a "span-12, span-6, span-6" the percentage
equivalent would be "50% 25% 25%"
If inside the span-12 you then broke it into "span-6, span-6" again,
the span-6 would now need to be 50%
If the span-6 was in a span-18 instead, it would need to be 33%
Basically I would need to figure out the correct percentage of a span-
# when it is inside any span-# that is larger then itself. When I
move an additional level deeper, I would need to refigure yet again.
As you can see this ends up with hundreds of permutations and that
will naturally make the filesize grow significantly. I bounced this
off of a few others and we couldn't find any way around it... so
please call us on our stupidity if we are missing something.
So, while the above can techincally be overcome, the filesize would be
very prohibitive.
---- and then specific to the current implementation
Thanks for the link. I was really excited as I saw it work until I
looked a little closer. Unfortunately he did run into the issue I
described above about it getting complicated as you move additional
levels deeper.
His large left column is a span-15. Lower in the page he shows a 50/50
split which you would think should be a span-7 and span-8 (yes, not
really 50/50). He instead had to use a span-11 and span-12 to create
the layout he wanted because those are the span-* selectors that have
the 50%-ish width. So while yes, this got the job done... it's not
the nice and easy blueprint we know and love as you need to continue
to reference back to the CSS to see which span matches up with the
percentage you want a given block to take.
Props for getting that far and finding a way to make it work, and I
guess it's a good thing to have in the back pocket, but not a silver
bullet by any means as I can't just switch from fluid to fixed if I
wanted.
Copied from: http://groups.google.com/group/blueprintcss/browse_thread/thread/138dd9bcf2e679df/
Aaron
Lukie
It was foretold that on 15/10/2008 @ 03:20:04 GMT-0700 (PDT) (which
was 07:20:04 where I live) Italo Maia would write:
<snipped a bit>
IM> I don't get it. What is the difference between liquid layout and
IM> normal layout? They seem the same to me.
The term "liquid" implies that a website should flow smoothly into
whatever space it is given. If you use a high resolution monitor, this
may mean that you need to resize your browser a little, which most
people in that situation do. If you have a low resolution monitor, you
will still see the information, it will just be a little more compact.
If you do Liquid Design right, you should be able to make your pages
display on almost anything and still make sense to the user.
But it's not just about making a page 'flow' with the browser window.
The principle of Liquid Design goes hand in hand with the principles
of accessibility.
Not everyone has perfect vision, and many of your potential customers
may indeed be blind. If you build your site using relative font units
and percentage based widths for common elements, you'll already be
making life a lot easier for a portion of your visitors. Maybe even
many of them.
--
Best regards,
Lukie
-------------------------------------------
Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.
"If you want your dreams to come true, don't sleep." -Yiddish Proverb.
--------------------------------------------
Matthew Nuzum
> Not everyone has perfect vision, and many of your potential customers
> may indeed be blind. If you build your site using relative font units
> and percentage based widths for common elements, you'll already be
> making life a lot easier for a portion of your visitors. Maybe even
> many of them.
Resizable layouts don't help blind people since they can't see the
browser, but regarding low-vision users, which is where I think you
were going with this, I've noticed the newer browsers do full-layout
resizing when increasing the font-size.
So for example, if I use standard blueprint to create a 800 px wide
layout and in the middle of the layout is a 400px wide image and a
22px headline and I increase the font size* then the layout may
increase to 900px wide, the image to 450px wide and the heading 25px
high.
The measurements are made up but the interesting thing is that
proportionally they stay them same when I've actually tested it.
*I've tested this in IE7 and FF3 and get similar results in both.
For examples of this in FF3 see: http://code.bearfruit.org/~matt/tmp/resize/
This seems to change the way we design pages for accessibility. At
this point, I'm starting to feel like the only reason to make fluid
layouts is to keep people who have very wide monitors set at a low
resolution (under 100ppi) who use their browser maximized from
complaining. Considering the difference in ppi and total available
pixels on desktop/laptop computers and handheld devices I don't think
fluid layouts help, instead you need diff stylesheets for desktop and
small screen devices to properly serve them.
--
Matthew Nuzum
newz2000 on freenode
Christian Montoya
>
> This seems to change the way we design pages for accessibility. At
> this point, I'm starting to feel like the only reason to make fluid
> layouts is to keep people who have very wide monitors set at a low
> resolution (under 100ppi) who use their browser maximized from
> complaining. Considering the difference in ppi and total available
> pixels on desktop/laptop computers and handheld devices I don't think
> fluid layouts help, instead you need diff stylesheets for desktop and
> small screen devices to properly serve them.
>
This seems to be a hot topic this month. For anyone late to the show,
the following blog entry explains it very well:
http://mezzoblue.com/archives/2008/10/07/zoom/
I don't think zoom is the end-all for liquid design, but it certainly
makes it less rewarding.
On the part about making different stylesheets for different devices,
the general consensus is that the lack of standards focus in device &
software design has led us to a point where it is expected that you
will have to build different interfaces & stylesheets for every device
that you want to support, whether that's a desktop, iPhone or Wii.
Maybe someday we'll have BlueBerry & iBlueprint for mobile designers.
For now, I'm just watching the industry to see where things go.
Matthew Nuzum
> On the part about making different stylesheets for different devices,
> the general consensus is that the lack of standards focus in device &
> software design has led us to a point where it is expected that you
> will have to build different interfaces & stylesheets for every device
> that you want to support, whether that's a desktop, iPhone or Wii.
> Maybe someday we'll have BlueBerry & iBlueprint for mobile designers.
> For now, I'm just watching the industry to see where things go.
Looks like it may be this way:
<link type="text/css" rel="stylesheet" media="handheld, only screen
and (max-device-width: 480px)" href="/mobile-style.css" />
With this you can supposedly target stylesheets by screensize. Have
one for screens under 320 (non-iphone like devices) one 320 - 480
(iphones and sim) and then rules for non handhelds.
I've not actually used it, learned about this in the last couple weeks
from a friend who is starting to target mobile devices more and more.
I plan to play with this more later on in the winter when I have some free time.
Matthew Nuzum
> Looks like it may be this way:
> <link type="text/css" rel="stylesheet" media="handheld, only screen
> and (max-device-width: 480px)" href="/mobile-style.css" />
>
Lukie
It was foretold that on 15/10/2008 @ 12:00:23 GMT-0500 (which was
14:00:23 where I live) Matthew Nuzum would write:
<snipped a bit>
MN> Resizable layouts don't help blind people since they can't see the
MN> browser, but regarding low-vision users, which is where I think you
MN> were going with this, I've noticed the newer browsers do full-layout
MN> resizing when increasing the font-size.
Lol, should be low-vision indeed :-)
But if you do liquid design and change the font setting in your
browser (e.g. FF: textzoom), the layout will not break apart as
opposed to fixed layout:
take a look:
http://www.csszengarden.com/?cssfile=091/091.css
http://www.csszengarden.com/?cssfile=089/089.css
And you can't expect that everybody uses the default size of 16px on
their browser. So that's where the accessibility part comes creeping
around the corner (at least if the designer is bothered with this
aspect lol)
--
Best regards,
Lukie
-------------------------------------------
Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.
"The hardest thing in the world to understand is the income tax." -
Albert Einstein
--------------------------------------------
Keld
I'm using the liquid layout plugin and I was wondering if anyone as
the same problem as i do.
I have a two column layout that looks like this and I have set my
browser to 1024px wide:
<div class="container showgrid">
<div class="column span-5"><p>Some content for my left column</p></
div>
<div class="column span-19 last"><p>Some content for the content
column</p></div>
</div>
If I put span-19 on the right column, in 1024 it doesn't fit, it jumps
under the left col, so I have to work with 23 columns instead of 24 by
replacing the 19 by a 18. Is this normal? 1024 resolution should
support up to 960px;
Thank you for your help.