{"action":"created","issue":{"url":"https://api.github.com/repos/jekyll/jekyll/issues/3404","labels_url":"https://api.github.com/repos/jekyll/jekyll/issues/3404/labels{/name}","comments_url":"https://api.github.com/repos/jekyll/jekyll/issues/3404/comments","events_url":"https://api.github.com/repos/jekyll/jekyll/issues/3404/events","html_url":"https://github.com/jekyll/jekyll/pull/3404","id":56325457,"number":3404,"title":"Simple generic grid instead of footer specific code","user":{"login":"tkrotoff","id":643434,"avatar_url":"https://avatars.githubusercontent.com/u/643434?v=3","gravatar_id":"","url":"https://api.github.com/users/tkrotoff","html_url":"https://github.com/tkrotoff","followers_url":"https://api.github.com/users/tkrotoff/followers","following_url":"https://api.github.com/users/tkrotoff/following{/other_user}","gists_url":"https://api.github.com/users/tkrotoff/gists{/gist_id}","starred_url":"https://api.github.com/users/tkrotoff/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tkrotoff/subscriptions","organizations_url":"https://api.github.com/users/tkrotoff/orgs","repos_url":"https://api.github.com/users/tkrotoff/repos","events_url":"https://api.github.com/users/tkrotoff/events{/privacy}","received_events_url":"https://api.github.com/users/tkrotoff/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":11,"created_at":"2015-02-03T02:32:38Z","updated_at":"2015-02-11T16:06:38Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/jekyll/jekyll/pulls/3404","html_url":"https://github.com/jekyll/jekyll/pull/3404","diff_url":"https://github.com/jekyll/jekyll/pull/3404.diff","patch_url":"https://github.com/jekyll/jekyll/pull/3404.patch"},"body":"There is already a concept of \"grid\" for the footer but the code is very specific and cannot be re-used.\r\n\r\nThe idea is to make the grid generic by defining `.row` instead of `.footer-col-wrapper` and `.col-*-*` instead of `.footer-col-*`.\r\nThe end result is a new file of 44 lines of code (_grid.scss) and _layout.scss reduced by 44 loc => 0 loc added, better semantics and a simple reusable grid.\r\n\r\n## Example\r\n\r\nNow one can write code like this:\r\n```HTML\r\n<div class=\"row\">\r\n  <div class=\"col-sm-6 col-md-4\">\r\n    <h2>Heading</h2>\r\n    <p>...</p>\r\n  </div>\r\n\r\n  <div class=\"col-sm-6 col-md-4\">\r\n    <h2>Heading</h2>\r\n    <p>...</p>\r\n  </div>\r\n\r\n  <div class=\"col-sm-12 col-md-4\">\r\n    <h2>Heading</h2>\r\n    <p>...</p>\r\n  </div>\r\n</div>\r\n```\r\n\r\n- Result with window > 800px ($on-laptop):\r\n![](http://s1.postimg.org/wh84mfsjz/Screen_Shot_2015_02_03_at_02_33_51.png)\r\n\r\n- Result with 600px < window <  800px:\r\n![](http://s1.postimg.org/gk9cpq05r/Screen_Shot_2015_02_03_at_02_34_04.png)\r\n\r\n- Result with window < 600px ($on-palm)\r\n![](http://s8.postimg.org/nwy5xvagl/Screen_Shot_2015_02_03_at_02_46_18.png)\r\n\r\n## Current footer\r\n\r\nAs for the footer, the behavior is the same (3 columns then 2 then 1) at the exception of a few pixels: the grid contains 12 columns (customizable via $grid-columns) and cannot express the exact same % width as before.\r\nBefore:\r\n![](http://s13.postimg.org/wjhf173zb/Screen_Shot_2015_02_03_at_02_51_40.png)\r\n\r\nAfter:\r\n![](http://s13.postimg.org/9jarov65j/Screen_Shot_2015_02_03_at_02_51_52.png)\r\n\r\nPeople can now adjust the widths based on their footer content by simply modifying the HTML instead of _layout.scss.\r\n\r\n## Syntax\r\n\r\nThe syntax is identical to [Bootstrap grid](http://getbootstrap.com/css/#grid) at the exception of `col-lg-*` (> 1200px) (+ other advanced things) as it does not make sense with a $content-width of 800px. \r\nThus file _grid.scss can be replaced by Bootstrap grid, the HTML will behave and look the same.\r\n\r\n## Commits\r\n\r\nThe addition of the grid has been done in 2 commits: 256b8ad and 76b255c so it is easier to understand the mixins from the second commit.\r\n\r\n## Testing\r\n\r\nI've manually tested the grid by playing with several examples like the one from above under Chrome, Firefox, Safari (iOS 8.1 iPhone & iPad), Android 5 Chrome (Nexus 5), Opera 12, IE11 and IE9. (Under IE8 the columns stack up the way it does for the current footer - IE8 does not support media queries).\r\n\r\n## More screenshots\r\n\r\n- 1\r\n![](http://s12.postimg.org/xnsv7wp8d/Screen_Shot_2015_02_03_at_03_36_16.png)\r\n\r\n- 2\r\n![](http://s12.postimg.org/3kixtpbct/Screen_Shot_2015_02_03_at_03_36_44.png)\r\n\r\n- 3\r\n![](http://s12.postimg.org/tq5lii2f1/Screen_Shot_2015_02_03_at_03_39_39.png)"},"comment":{"url":"https://api.github.com/repos/jekyll/jekyll/issues/comments/73907423","html_url":"https://github.com/jekyll/jekyll/pull/3404#issuecomment-73907423","issue_url":"https://api.github.com/repos/jekyll/jekyll/issues/3404","id":73907423,"user":{"login":"kleinfreund","id":5774638,"avatar_url":"https://avatars.githubusercontent.com/u/5774638?v=3","gravatar_id":"","url":"https://api.github.com/users/kleinfreund","html_url":"https://github.com/kleinfreund","followers_url":"https://api.github.com/users/kleinfreund/followers","following_url":"https://api.github.com/users/kleinfreund/following{/other_user}","gists_url":"https://api.github.com/users/kleinfreund/gists{/gist_id}","starred_url":"https://api.github.com/users/kleinfreund/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kleinfreund/subscriptions","organizations_url":"https://api.github.com/users/kleinfreund/orgs","repos_url":"https://api.github.com/users/kleinfreund/repos","events_url":"https://api.github.com/users/kleinfreund/events{/privacy}","received_events_url":"https://api.github.com/users/kleinfreund/received_events","type":"User","site_admin":false},"created_at":"2015-02-11T16:06:38Z","updated_at":"2015-02-11T16:06:38Z","body":"> Do you suggest Bootstrap is terrible and its success not deserved?\r\n\r\nI believe he wanted to point out that a big user base doesn't necessarily come hand in hand with being flawless. It's also not the best strategy comparing Jekyll with Bootstrap here, because they are two different things.\r\n\r\nApart from that, the discussion here got quite out of hand. For the topics issue, I personally would favor a template without a grid system at all."}}