{"action":"created","issue":{"url":"https://api.github.com/repos/axa-ch/style-guide/issues/289","labels_url":"https://api.github.com/repos/axa-ch/style-guide/issues/289/labels{/name}","comments_url":"https://api.github.com/repos/axa-ch/style-guide/issues/289/comments","events_url":"https://api.github.com/repos/axa-ch/style-guide/issues/289/events","html_url":"https://github.com/axa-ch/style-guide/pull/289","id":99920144,"number":289,"title":"Bring responsive back to our docs!","user":{"login":"davidknezic","id":198988,"avatar_url":"https://avatars.githubusercontent.com/u/198988?v=3","gravatar_id":"","url":"https://api.github.com/users/davidknezic","html_url":"https://github.com/davidknezic","followers_url":"https://api.github.com/users/davidknezic/followers","following_url":"https://api.github.com/users/davidknezic/following{/other_user}","gists_url":"https://api.github.com/users/davidknezic/gists{/gist_id}","starred_url":"https://api.github.com/users/davidknezic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidknezic/subscriptions","organizations_url":"https://api.github.com/users/davidknezic/orgs","repos_url":"https://api.github.com/users/davidknezic/repos","events_url":"https://api.github.com/users/davidknezic/events{/privacy}","received_events_url":"https://api.github.com/users/davidknezic/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/axa-ch/style-guide/labels/improvement","name":"improvement","color":"84b6eb"}],"state":"closed","locked":false,"assignee":{"login":"davidknezic","id":198988,"avatar_url":"https://avatars.githubusercontent.com/u/198988?v=3","gravatar_id":"","url":"https://api.github.com/users/davidknezic","html_url":"https://github.com/davidknezic","followers_url":"https://api.github.com/users/davidknezic/followers","following_url":"https://api.github.com/users/davidknezic/following{/other_user}","gists_url":"https://api.github.com/users/davidknezic/gists{/gist_id}","starred_url":"https://api.github.com/users/davidknezic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidknezic/subscriptions","organizations_url":"https://api.github.com/users/davidknezic/orgs","repos_url":"https://api.github.com/users/davidknezic/repos","events_url":"https://api.github.com/users/davidknezic/events{/privacy}","received_events_url":"https://api.github.com/users/davidknezic/received_events","type":"User","site_admin":false},"milestone":null,"comments":3,"created_at":"2015-08-09T19:02:29Z","updated_at":"2015-10-09T12:53:30Z","closed_at":"2015-10-09T12:52:47Z","pull_request":{"url":"https://api.github.com/repos/axa-ch/style-guide/pulls/289","html_url":"https://github.com/axa-ch/style-guide/pull/289","diff_url":"https://github.com/axa-ch/style-guide/pull/289.diff","patch_url":"https://github.com/axa-ch/style-guide/pull/289.patch"},"body":"Just recently (using my smartphone) I wanted to take a look at some specific recommendations in our Web Style Guide. It was a mess browsing the site in desktop mode. Felt like 10yrs ago. :tired_face: \r\n\r\nThat's why I was thinking about how to bring responsiveness back to our style guide docs. Without interferring with our fancy examples resizer, of course.\r\n\r\nI thought if we only provide resizing options for the **same or smaller** viewports than your browser is currently in, we should be fine. Nobody wants to see the desktop header on mobile anyway.\r\n\r\n![ggxrcqgnkn](https://cloud.githubusercontent.com/assets/198988/9156334/c1157d3c-3ed6-11e5-8232-a19f2f456a7c.gif)\r\n\r\nCool thing, you have an example in `desktop` viewport and you shrink your browser. The example will automatically switch into `tablet` and then `mobile` viewport. When you stretch your browser back, it will go back to `desktop`. It's because it remembers what viewport you explicitly selected. :star2: \r\n\r\n![1cx746kioa](https://cloud.githubusercontent.com/assets/198988/9156359/650b3440-3ed7-11e5-9422-65a6d79113ce.gif)\r\n\r\nThis pr also reduces boilerplate that was necessary to build examples. Thanks to @backflip's groundwork we can do it like this. :muscle:\r\n\r\n```jade\r\n+example('/components/demos/loading-spinner.html')\r\n```\r\n\r\nStill, there are some things missing:\r\n\r\n* [x] change resizing animations to CSS transitions instead jQuery magic\r\n* [x] bring back mobile menu\r\n* [x] hide mobile toggle on mobile altogether\r\n* [ ] add a `.respond()` mixin mode for the widths between mobile and tablet\r\n* [ ] bring @Agatai's brackets back\r\n\r\nBut I'd first want to hear from you about the idea of bringing responsive back to our docs! @elessar-ch @sventschui "},"comment":{"url":"https://api.github.com/repos/axa-ch/style-guide/issues/comments/146860888","html_url":"https://github.com/axa-ch/style-guide/pull/289#issuecomment-146860888","issue_url":"https://api.github.com/repos/axa-ch/style-guide/issues/289","id":146860888,"user":{"login":"davidknezic","id":198988,"avatar_url":"https://avatars.githubusercontent.com/u/198988?v=3","gravatar_id":"","url":"https://api.github.com/users/davidknezic","html_url":"https://github.com/davidknezic","followers_url":"https://api.github.com/users/davidknezic/followers","following_url":"https://api.github.com/users/davidknezic/following{/other_user}","gists_url":"https://api.github.com/users/davidknezic/gists{/gist_id}","starred_url":"https://api.github.com/users/davidknezic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidknezic/subscriptions","organizations_url":"https://api.github.com/users/davidknezic/orgs","repos_url":"https://api.github.com/users/davidknezic/repos","events_url":"https://api.github.com/users/davidknezic/events{/privacy}","received_events_url":"https://api.github.com/users/davidknezic/received_events","type":"User","site_admin":false},"created_at":"2015-10-09T12:53:30Z","updated_at":"2015-10-09T12:53:30Z","body":":tada: "}}