{"action":"created","issue":{"url":"https://api.github.com/repos/Financial-Times/o-grid/issues/93","labels_url":"https://api.github.com/repos/Financial-Times/o-grid/issues/93/labels{/name}","comments_url":"https://api.github.com/repos/Financial-Times/o-grid/issues/93/comments","events_url":"https://api.github.com/repos/Financial-Times/o-grid/issues/93/events","html_url":"https://github.com/Financial-Times/o-grid/pull/93","id":96367936,"number":93,"title":"Flexible gutters","user":{"login":"charypar","id":1517854,"avatar_url":"https://avatars.githubusercontent.com/u/1517854?v=3","gravatar_id":"","url":"https://api.github.com/users/charypar","html_url":"https://github.com/charypar","followers_url":"https://api.github.com/users/charypar/followers","following_url":"https://api.github.com/users/charypar/following{/other_user}","gists_url":"https://api.github.com/users/charypar/gists{/gist_id}","starred_url":"https://api.github.com/users/charypar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/charypar/subscriptions","organizations_url":"https://api.github.com/users/charypar/orgs","repos_url":"https://api.github.com/users/charypar/repos","events_url":"https://api.github.com/users/charypar/events{/privacy}","received_events_url":"https://api.github.com/users/charypar/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-07-21T17:05:56Z","updated_at":"2015-07-28T15:31:01Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/Financial-Times/o-grid/pulls/93","html_url":"https://github.com/Financial-Times/o-grid/pull/93","diff_url":"https://github.com/Financial-Times/o-grid/pull/93.diff","patch_url":"https://github.com/Financial-Times/o-grid/pull/93.patch"},"body":"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](/Financial-Times/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). \r\n\r\nWith 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.\r\n\r\nThe 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.).\r\n\r\nAs 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).\r\n\r\nUnless 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.\r\n\r\n/cc @kaelig @keirog @commuterjoy \r\n\r\n# To Do\r\n\r\n- [x] Flexible gutters as well as columns\r\n- [x] Keep the same metrics at 1200\r\n- [x] Update the geometry tests\r\n- [x] Make row spaces gutter height\r\n- [x] Add a test case to show how to do same-height columns with flex box (and resolve differences between Gecko and WebKit)\r\n- [x] Switch next-front-page to this o-grid branch and make sure everything works (Financial-Times/next-front-page#129)\r\n- [ ] Plan versioning or forking as n-grid"},"comment":{"url":"https://api.github.com/repos/Financial-Times/o-grid/issues/comments/125655013","html_url":"https://github.com/Financial-Times/o-grid/pull/93#issuecomment-125655013","issue_url":"https://api.github.com/repos/Financial-Times/o-grid/issues/93","id":125655013,"user":{"login":"kaelig","id":85783,"avatar_url":"https://avatars.githubusercontent.com/u/85783?v=3","gravatar_id":"","url":"https://api.github.com/users/kaelig","html_url":"https://github.com/kaelig","followers_url":"https://api.github.com/users/kaelig/followers","following_url":"https://api.github.com/users/kaelig/following{/other_user}","gists_url":"https://api.github.com/users/kaelig/gists{/gist_id}","starred_url":"https://api.github.com/users/kaelig/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kaelig/subscriptions","organizations_url":"https://api.github.com/users/kaelig/orgs","repos_url":"https://api.github.com/users/kaelig/repos","events_url":"https://api.github.com/users/kaelig/events{/privacy}","received_events_url":"https://api.github.com/users/kaelig/received_events","type":"User","site_admin":false},"created_at":"2015-07-28T15:31:01Z","updated_at":"2015-07-28T15:31:01Z","body":"No worries, I've released v4.0.0-beta.1, feel free to release subsequent betas.\r\n\r\nNote 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)."}}