Download & Extend

Grid CSS working as a responsive design

Project:Lucid
Version:7.x-1.x-dev
Component:Code
Category:task
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

The grid.css file is today taken from existing grid layouts using responsive design. It defines one container-16 and grids from 1 to 16.

Is this enough or do we need push, pull, prefix and suffix, which other themes are practicing? Is a 16 grid layout enough, or do we need a way to be able to choose between different grid.css files?

Comments

#1

one thing is for sure, keep the .alpha and .omega class definitions.
Same goes to prefix/suffix as those have been very useful a couple of times.

I've never had the need to use of push/pull either in responsive or fixed layout, I'd suggest you strip these off.

#2

Version:<none>» 7.x-1.x-dev

I'd go for a 24-grid setup. A 12-grid is sometimes too coarse. The problem with 16 is that it's not divisible by 3. A 48-grid is too fine-grained.

On the other hand, when designing for a demanding site with fine granularity it may not be a real problem to revise the grid system anyway?

"Nice-to-have" prefix, suffix, push and pull functionality can be kept in separate, optional files.

If the grid system pluggable, there are all sorts of good things to come:
- on-the-fly swap between wide/narrow fixed and/or fluid grids
- hybrid designs (adaptive for mobile, fluid up to 1280, 1144 thereafter. E.g. http://cssgrid.net/)

/Fredrik

#3

I reply myself as I've changed my mind. A 12-module grid will probably be the best choice.

However, I still think it would be cool (but perhaps not wise) to include optional CSS to enable simple swapping (manual or @media-driven) between different grids.

For example: choice between narrow gutter in 960.gs versus wide gutter in 978.gs/Golden grids.
Module+gutter sizes for these systems are 60+20, 70+10 and 54+30 px.
Another example: users with wide screens could have a wide layout with e.g. 1140.gs (60+30 px).

There would be layout-problems with a exchangable/pluggable grid system as sizes for generated images are coded into Nodestream.
- If the grid module width can vary, generated image sizes will not have a perfect fit. For example, the width of a "grid-4" image is 300px in 960.gs, 306px in 978.gs, 310px in Golden gs and 340px in 1140.gs. Should you generate the image from the largest grid and scale it down on the display? Not perfect.

- For sites with strict layout demands, one grid would be chosen and adhered to for all users, to conserve the layout. However, There's still a problem that grid module width vary widely when layout is adapted for smaller screens.

- Even on flexible sites some content, like ads, are more width-sensitive. Most width-sensitive content is probably found in aside-regions, you could ensure that aside-widths are kept constant even when adapting layout/grid sizes. Correspondingly, it would be possible to adapt and increase the width of only the main content at high resolutions. But I'm digressing.

Disclaimer: I'm not a hard-core themer or designer. I realize these issues may be non-issues.