CMIIW, I think grid is a CSS

gausarts — Thu, 11 Jun 2009 18:34:45 +0000

CMIIW, I think grid is a CSS approach to table layout:) The beauty of grid system which makes it different from table is you may design a totally rigid box models or even out of the box ones just as easily.

pr0gr4mm3r wrote: I don't

webwiz — Mon, 11 May 2009 20:03:41 +0000

pr0gr4mm3r wrote:

I don't think that means that the layout has to be fluid enough to handle a 1680px widescreen all the way down to a 200px phone

FWIW that's exactly what I am attempting for the site I am working on now. Safari, Opera, and Chrome support media queries, as does Firefox 3.5, so that's what I'm using.

So far it seems to work well.

There are a lot of great

MartyThornley — Sun, 10 May 2009 00:14:00 +0000

There are a lot of great takes on the grid idea. While I try not to get too locked into any one way of thinking or approaching projects, I do use a Photoshop Template that has a series of grid overlays to help line up page elements.

I combined three or four .psd files that I found in my research about grids and recently made it all available on my site, complete with detailed instructions on how I use it.

You can find it here.

It uses a 10x10px and 60x60px grids to fit into a 960px wide layout. It also has 50x50 and 100x100 for a 1000px layout. It uses transparent overlays to divide the layout into 2,3,4,5,6,8 and 16 column layouts. On top of all that is a browser overlay to see what the design looks like on small monitors.

I tried to think of all of the factors that I need to keep in mind when starting a new design but I would love to hear feedback or ideas for improving it.

[Edited: Please keep personal links to the signature]

The beauty of CSS is that

webwiz — Wed, 29 Apr 2009 16:32:40 +0000

The beauty of CSS is that you have so many design choices. In addition to "fixed" and "fluid" designs, and the "elastic" (Fluid with min and max widths) there are several others.

You can offer multiple styles using alternative stylesheets or either client-side or server-side scripts as pr0gr4mm3r hints at. With media queries getting quite good support, you can even accomodate iPhones and pr0gr4mm3r's giant TV display in a single stylesheet.

Yet another design I have used is Mike Purvis's "Jello Mold"[1]. SImply by changing a percentage between 0 and 100 the layout varies from fixed through fluid and anything between.

To get back to the subject -- Megan's article -- the beauty of her proposal is its adaptability. Once you have calculated the sizes the way she suggests, simply by converting the interior widths from pixels to percents, you have the basis of an almost infinite number of use cases, far beyond the fixed widths that she uses in her example.

The article is great for beginners-- but not only.

[1] Features of the Jello Mold

decibel.places wrote: so,

Megan — Wed, 29 Apr 2009 15:24:27 +0000

decibel.places wrote:

so, why don't you guys have "email this article" "add this" and other viral tools?

We used to... can't remember when/why we took them off!

I'm pretty sure min/max

Megan — Wed, 29 Apr 2009 15:23:59 +0000

I'm pretty sure min/max width work in IE 7, just not IE 6 - or am I wrong??

By the way, if you're interesting in working with grids in a fluid layout there are a few articles that can help:

Fluid grids by Ethan Marcotte at A List Apart
Five simple steps to designing grid systems - Part 5 (Fluid grids) from Mark Boulton

It's just using the Ternary

pr0gr4mm3r — Wed, 29 Apr 2009 12:03:00 +0000

It's just using the Ternary Operator, which is also available in PHP:

<?php
// Example usage for: Ternary Operator
$action = (empty($_POST['action'])) ? 'default' : $_POST['action'];

// The above is identical to this if/else statement
if (empty($_POST['action'])) {
    $action = 'default';
} else {
    $action = $_POST['action'];
}

?>

..so the code in the prev post can be explained like this:

if document.body.clientWidth < 742
    740px
else
    if document.body.clientWidth  > 1202
        1200px
    else
        auto (fluid)
    end if
endif

Hmm, it's not too bad.

greg — Wed, 29 Apr 2009 10:07:34 +0000

Hmm, it's not too bad. Although I don't work with JS, so if it doesn't just work from a copy and paste then I'd be stumped (or forced to learn bits of JS, which I try to avoid)

I presume this wont work if they have JS disabled ?

This is the workaround for

pr0gr4mm3r — Wed, 29 Apr 2009 09:40:37 +0000

This is the workaround for IE:

width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");

It's not that bad really.

I read the article, and its

gadget_monkey — Wed, 29 Apr 2009 05:08:26 +0000

I read the article, and its quite helpful
to a web design newbie like me. I've been learning
how to work with grids these past few days
and the article helped a lot. thanks.