Liquid Blueprint

6 Dec 2007 - 4:22am
3 years ago
12 replies
35138 reads
Andrei Herasimchuk
2004

Hey all.

For some of you who do web work and have heard of Blueprint, you'll
know it's an XHTML+CSS means for creating nicely structured grid
systems for layout work on the web. Based on some work we've been
doing at Involution Studios, I've made some modifications to
Blueprint so that it can be toggled from a fixed layout into a
liquid, stretch layout based on the browser window size.

I'll be writing up a blog post on Design by Fire hopefully sometime
this weekend that covers this approach in detail, but you can read a
summary of the changes at:
http://groups.google.com/group/blueprintcss/browse_thread/thread/
9e7fa0bb19fa9bf0

The fixed layout page:
http://www.designbyfire.com/liquid_blueprint/tests/sample.html

The liquid layout sample page in action:
http://www.designbyfire.com/liquid_blueprint/tests/liquid.html

The CSS:
http://www.designbyfire.com/liquid_blueprint/blueprint/lib/liquid.css

The Blueprint project page:
http://code.google.com/p/blueprintcss/

If this sort of thing interests you, join the Blueprint group on
Google Groups to keep up with the latest details.

--
Andrei Herasimchuk

Principal, Involution Studios
innovating the digital world

e. andrei at involutionstudios.com
c. +1 408 306 6422

Comments

6 Dec 2007 - 9:36am
gabefriedman
2007

Thanks for the work and the tip. I've used and like Blueprint - this
improves it.

Cheers,
Gabe Friedman

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=23298

6 Dec 2007 - 10:43am
Billy Cox
2007

Thanks a lot for the link. I am weaning myself from table-based layout to
css-based layout, and anything that can make it easier is great.

-----Original Message-----
The Blueprint project page: http://code.google.com/p/blueprintcss/

6 Dec 2007 - 5:28pm
Kyle Cooney
2006

I love Blueprint, and this is great addition. Thanks, Andrei.

On Dec 6, 2007 1:22 AM, Andrei Herasimchuk <andrei at involutionstudios.com>
wrote:

> Hey all.
>
> For some of you who do web work and have heard of Blueprint, you'll
> know it's an XHTML+CSS means for creating nicely structured grid
> systems for layout work on the web. Based on some work we've been
> doing at Involution Studios, I've made some modifications to
> Blueprint so that it can be toggled from a fixed layout into a
> liquid, stretch layout based on the browser window size.
>
> I'll be writing up a blog post on Design by Fire hopefully sometime
> this weekend that covers this approach in detail, but you can read a
> summary of the changes at:
> http://groups.google.com/group/blueprintcss/browse_thread/thread/
> 9e7fa0bb19fa9bf0
>
> The fixed layout page:
> http://www.designbyfire.com/liquid_blueprint/tests/sample.html
>
> The liquid layout sample page in action:
> http://www.designbyfire.com/liquid_blueprint/tests/liquid.html
>
> The CSS:
> http://www.designbyfire.com/liquid_blueprint/blueprint/lib/liquid.css
>
> The Blueprint project page:
> http://code.google.com/p/blueprintcss/
>
> If this sort of thing interests you, join the Blueprint group on
> Google Groups to keep up with the latest details.
>
> --
> Andrei Herasimchuk
>
> Principal, Involution Studios
> innovating the digital world
>
> e. andrei at involutionstudios.com
> c. +1 408 306 6422
>
>
> ________________________________________________________________
> *Come to IxDA Interaction08 | Savannah*
> February 8-10, 2008 in Savannah, GA, USA
> Register today: http://interaction08.ixda.org/
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

21 Jan 2008 - 11:33am
Oleg Krupnov
2008

Could someone please enlighten me, whether the heated debate regarding
Table-based layout vs. CSS-based layout is ultimately over? Is CSS the
winner, or it depends on concrete applications? What are the guidelines?

I'd hate to start a flame, just want to keep up with modern approaches.

Thanks!
--
View this message in context: http://www.nabble.com/Liquid-Blueprint-tp14188974p14999730.html
Sent from the ixda.org - discussion list mailing list archive at Nabble.com.

21 Jan 2008 - 8:35pm
Dan Harrelson
2007

I'd argue that the debate is long over. CSS-based layout wins.

Tables should not be used for layout, they should be used to display
tabular data (rows and columns).

CSS should be used for page layout.

...Dan

On Jan 21, 2008, at 8:33 AM, Oleg Krupnov wrote:

>
> Could someone please enlighten me, whether the heated debate regarding
> Table-based layout vs. CSS-based layout is ultimately over? Is CSS the
> winner, or it depends on concrete applications? What are the
> guidelines?
>

22 Jan 2008 - 4:16am
Adrian Howard
2005

On 21 Jan 2008, at 16:33, Oleg Krupnov wrote:
[snip]
> Could someone please enlighten me, whether the heated debate regarding
> Table-based layout vs. CSS-based layout is ultimately over? Is CSS the
> winner, or it depends on concrete applications? What are the
> guidelines?
[snip]

Debate is over. CSS is the winner

(Apart from a very few places where CSS support doesn't work well
enough - e.g. HTML email)

Cheers,

Adrian

22 Jan 2008 - 4:55am
Bruno Figueiredo
2007

I agree that it's long over. I personally haven't seen a new project
coming out with tables for about 3 or 4 years now.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=24855

22 Jan 2008 - 8:37am
Scott McDaniel
2007

Well, unfortunately...
the debate's over as far as what's right, but many major CMS, Portal
and other generating systems
still are not only spitting out table-based design, but really
~unpleasant~ table-based design.

Some are making progress, but ugh!

Scott

On Tue, 22 Jan 2008 01:55:18, Bruno Figueiredo
<bruno.figueiredo at gmail.com> wrote:
> I agree that it's long over. I personally haven't seen a new project
> coming out with tables for about 3 or 4 years now.

--
As free as the wind
And hopefully learning - roxy music

22 Jan 2008 - 12:37pm
Dan Harrelson
2007

While it may _seem_ easier on first blush to layout a form with tables
(e.g. labels in left column, fields in right) it's usually less code
to layout the same form with CSS and pretty easy once you do it a
couple of times.

...Dan

On Jan 21, 2008, at 11:32 PM, Marco Plaisier wrote:

> I would like to add that forms are a gray area. It is possible to
> construct the layout of form pages with CSS, but it can easier to do
> with tables.

22 Jan 2008 - 1:10pm
Bill DeRouchey
2010

> On Jan 21, 2008, at 11:32 PM, Marco Plaisier wrote:
> > I would like to add that forms are a gray area. It is possible to
> > construct the layout of form pages with CSS, but it can easier to do
> > with tables.

On Jan 22, 2008 9:37 AM, Dan Harrelson <danh at adaptivepath.com> wrote:
> While it may _seem_ easier on first blush to layout a form with tables
> (e.g. labels in left column, fields in right) it's usually less code
> to layout the same form with CSS and pretty easy once you do it a
> couple of times.

And then maybe most importantly, it's easier to _redo_ the form or
page in CSS than with tables. Always assume you'll have to redo
something, because you will.

Bill

22 Jan 2008 - 1:47pm
bminihan
2007

I recall the greatest need to rely on tables for predictable form layout was
the disparity between browser CSS handling. Though still not perfect, I
agree that using CSS reliably for almost any form layout is much easier now
that several older browsers have fallen by the wayside (IE 5.x, Netscape <
6). It takes awhile to find or establish some best practices, but once you
do it's tough to justify using tables for anything.

In reviewing a recent design with my developer, we were walking through the
site and came across the only page with a table, displaying sortable columns
of data, and actually had to pause to say: "And I had to use a table here
because...well...it's a table...".

4 years ago, it would have been the opposite...

Bryan
http://www.bryanminihan.com

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Dan
Harrelson
Sent: Tuesday, January 22, 2008 12:37 PM
To: discuss at lists.interactiondesigners.com
Subject: Re: [IxDA Discuss] Liquid Blueprint

While it may _seem_ easier on first blush to layout a form with tables
(e.g. labels in left column, fields in right) it's usually less code
to layout the same form with CSS and pretty easy once you do it a
couple of times.

...Dan

14 Mar 2011 - 10:16pm
smag
2010

Well done. I hope Liquid Blueprint gets folded into the core Blueprint.

I read recently on the Blueprint group that some are eager to create a Blueprint-based system for dynamic layouts (for example, a design that switches from 3-col grid, to a 2 column grid, to a 1 column list as the screen size goes from 27 inch to a smartphone). Sounds pretty good to me. 

The alternative is usually to support 2-3 different themes, then redirect based on user agent/window size to one of them. This is more duplication, more effort to maintain.

Syndicate content Get the feed