{"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":1,"created_at":"2015-02-03T02:32:38Z","updated_at":"2015-02-03T09:00:28Z","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 45 lines of code (_grid.scss) and _layout.scss reduced by 43 loc => 2 loc more for 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 ($on-palm) < 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 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).\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/72615597","html_url":"https://github.com/jekyll/jekyll/pull/3404#issuecomment-72615597","issue_url":"https://api.github.com/repos/jekyll/jekyll/issues/3404","id":72615597,"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-03T09:00:28Z","updated_at":"2015-02-03T09:00:28Z","body":"I'm really not set on the idea to introduce a full grid system into the site template. It's meant to be super simple and the grid in the footer already seems somewhat overkilly. \r\n\r\nAgainst what every grid system states, I think they're not simple to use for new users. "}}