Layout Holy Grail

I’m looking for a CSS-based, XHTML 1.0 Strict Compliant, multi-layout holy grail. May as well reach for the stars, neh?

This is where I am. Sample:

I started with Yahoo Grids, with their decent CSS Reset code (although I’m looking hard at Meyer‘s CSS reset method.

The problem with resets (for me) is hey, whaddayaknow, I’m not a designer. So I’m looking for the next step after the reset: the rebuild. I’ve always liked the Flexible Layout by Tonico Strasser, so I scoffed his elements.css as a template to set default margins, padding, borders, and what-have-you. I also referenced buildup.css by Joel Friesen (no relation that I know of) and Andrew Quinton. This provided a pretty decent starting point, as far as I could tell.

Okay, cool, this seems to be working… and then I read Switchy McLayout from A List Apart. Damn damn damn.

So I hack Yahoo Grids up a bit and come up with the CSS layout I linked above.

Version 0.1
Minimum Browser Sizes

In its current version, the following are minimum browser sizes. Latest browser versions are expected.

OmniWeb 5.5.1: 154px
Firefox 180px
Internet Explorer 7.0: 265px
Opera 7.01+ : 85px
Safari 2.0.4: 377px

Current resolutions:

screen_hi: 1024+ — full three-column centred for 1024w
screen_med: 800-1024 — full three-column centred for 800w
screen_lo: 640-800 — single column left-aligned for 640w
screen_ultralow: 320-640 — single column scalable
pda: <320 — single column scalable

Integrated footnoteLinks by Aaron Gustavson from . It fires from layoutswitching.js in the window.onload spot.

Browser Problems:

iCab 3.03 renders all the content, but only looks as expected at screen_lo and lower.
Netscape 4 shows none of the CSS (by design) but fails to use the “skip to nav” feature properly.
Opera 5 inappropriately crops some content from the left side. Does not resize when the browser resizes: defaults to screen_hi at 1024
Opera 6 does not resize: defaults to screen_hi at 1024

Tested the Blackberry 8100 via simulator
– works as expected.

If there is no javascript, it currently defaults to screen_hi.
It should probably default to something more scalable…

Version 0.2
Changed default layout (for no javascript) to screen_ultralow which is fully liquid, single-column.

Version 0.3
Added Sortable Tables from Stuart Langridge to universl.js.

see the colophon for current updates.

4 thoughts on “Layout Holy Grail”

  1. nice. some tricky stuff there, but since I mostly work with designers that design for print etc, and are always asking me if i can actually build what they’ve designed (sure, no problem most of the time), I don’t see myself introducing the concept of multiple page-width designs to them (or myself).

    I’ll stick with my Management System Management Systems for now 😉 but I’m very interested in this whole multi-layout business.

  2. Good to hear from you — where did the pants go?!

    To me (and some others) working with print designers is a handicap, not an asset. Fixed-pixel widths? Heck, anything that forces the user into our mold? Gak!

    I know, I can say this because I’m crap at design. Honest, I like good design, if/when I can recognise it. 😉 So at the very least, can we have flexible/liquid/jello designs for our poor users? Please?

Comments are closed.