Financial-Times / o-grid

Responsive grid system
http://registry.origami.ft.com/components/o-grid
94 stars 17 forks source link

Flexible gutters #93

Closed charypar closed 9 years ago

charypar commented 9 years ago

We've been talking about this for a while and here it finally is - the flexible gutter grid. For those who never heard of it, this came out of next-front-page and the realisation that we need an extra breakpoint at around 1440px for people on 1920 by 1080 screens (which is quite a few, I can find the numbers if anyone's interested).

With such a big spread between the top and the bottom breakpoint, fixed-width gutters no longer work. Based on the prototype we did for Next front page, this updates o-grid to use the same geometry while trying to keep everything as close to original as I possibly could.

The major change is that the layouts are now defined by constant width and the columns/gutters are sized relatively - the default at 1200 stays the same. Because of the way the calculations work (and to keep my sanity), I changed all the default breakpoints to be one gutter - 10px - narrower (thus being divisible by 12) and the extra gutter space before the first and after the last column are now a half gutter, not a full one. For backwards compatibility it would be possible to add a half-gutter padding on the o-grid-row to get back up to the original dimensions, but the column and gutter definitions get a bit awkward in relation to the layout definition (e.g. column = 90/1200, gutter = 10/1200, layout = 1210px. What.).

As a new thing, the columns also have a flexible padding above and below them to repeat the grid rhythm vertically (as a side effect, the test in demos looks slightly different - the white space between rows is gone in favour of the column defined spacing).

Unless everyone is very much against the general idea of this, we need to figure out how to roll this out without breaking every user of o-grid (hopefully just a major revision). But if the changes are a bit too radical, there is the option of forking as n-grid, test on Next and merge back to o-grid later on.

/cc @kaelig @keirog @commuterjoy

To Do

charypar commented 9 years ago

@kaelig @keirog @commuterjoy This is now basically done, still need to fix a flexbox issue on Firefox, but that's outside o-grid, so from my end the change is good to go. Would you please poke holes in it, so we can decide what to do about it asap?

charypar commented 9 years ago

@kaelig ok otherwise? What are the next steps? Do I tag the latest commit with a 4.0.0-beta1?

kaelig commented 9 years ago

I thought you were going with a branch to make cross-product updates easier?

charypar commented 9 years ago

I'm hoping not many cross product updates will be necessary and at the same time, the control of having versions - i.e. not deploying across all products at the same time seems useful. I believe that was also @matthew-andrews's preference.

In general I'm not quite clear on the process a pull request to o-grid goes through, that's why I ask what needs to be done to get this work finished.

kaelig commented 9 years ago

About the versioning thing: shouldn't a grid be consistent across all products?

kaelig commented 9 years ago

No worries, I've released v4.0.0-beta.1, feel free to release subsequent betas.

Note that it doesn't guarantee a v4.0.0 gold release (we might manage to make it a v3.x.x if it doesn't break backwards compatibility).

charypar commented 9 years ago

@kaelig I'd think about the consistency as eventual. When we find an issue, rather than jumping straight in and pushing a new, supposedly fixed version on everyone, I'd rather tag a patch release and let everyone upgrade and retest. It seems more ok to me to have a slightly old version of the grid, than a broken product with the latest version.

kaelig commented 9 years ago

Quick update for those who are reading this thread: we have discussed an alternative to flexible gutters and we're testing it. More to come very soon.

kaelig commented 9 years ago

Closing this PR as another v4 is under development.