search

guardian / pasteup

This project is now deprecated. Future development on the Guardian's design language can be found in dotcom-rendering
https://sites.google.com/a/guardian.co.uk/bootstrap/
Apache License 2.0
36 stars 11 forks source link

Create a grid system #2

Closed ahume closed 12 years ago

ahume commented 12 years ago

I was looking at the grid stuff in R2 yesterday (common/styles/grid-columns.css) and it seems to work pretty nicely for the 940px width main site. It's really simple to learn and use, and my feeling is we should port it into here as our initial fixed-width grid implementation.

Unless anyone thinks it's missing something vital, or isn't that useful?

jamesgorrie commented 12 years ago

I've got the basic one in there, but it'll need some work.

mattandrews commented 12 years ago

The grid is nice, every time I try switching to a "pure" 960.gs style one I get fed up having to wrap everything in rows.

One recent enhancement we made to the Guardian grid was alternate classnames using the convention "col-6" rather than "six-col", so we can programatically compute these. This should definitely be in the new one.

jamesgorrie commented 12 years ago

It is.

icodesido commented 12 years ago

Unless we want to revise the grid layout based on new resolution info.

mattandrews commented 12 years ago

That's a point, I guess it depends what we decide on doing for the "rebuild R2" project. Responsive grids etc

ahume commented 12 years ago

I guess a responsive grid must be coming down the line, but I think for now we're on a 940 grid for the bulk of our stuff, and this one works well. If anyone wants to create responsive-grid.css then that'd be neat.

Incidentally, I think there's a whole topic around decent grid systems for responsive design. IIRC Twitter's is just liquid that moves to a single column once you get to a 'mobile' kind of size which I don't think is good enough.

There's some interesting stuff here http://blog.responsivenews.co.uk/post/12511377569/responsive-css-that-scales

mattandrews commented 12 years ago

This is interesting. Bootstrap has 4 responsive grid states (with the baseline one being "mobile", eg single column). Skeleton (http://getskeleton.com/#grid) has 3 states, again using a single column "mobile" size. How else would we want this to work? Add more states for mobile-sized viewports so they can still use a rudimentary grid system?

mattandrews commented 12 years ago

Good roundup of the existing frameworks here too: http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

mattandrews commented 12 years ago

This is the first one I've found that scales all the way down: http://www.designinfluences.com/fluid960gs/16/fluid/none/

ahume commented 12 years ago

Closing - we have our 940 grid. Further discussion around responsive grids are ongoing.