{"action":"created","issue":{"url":"https://api.github.com/repos/WebDevStudios/wd_s/issues/121","labels_url":"https://api.github.com/repos/WebDevStudios/wd_s/issues/121/labels{/name}","comments_url":"https://api.github.com/repos/WebDevStudios/wd_s/issues/121/comments","events_url":"https://api.github.com/repos/WebDevStudios/wd_s/issues/121/events","html_url":"https://github.com/WebDevStudios/wd_s/issues/121","id":118437448,"number":121,"title":"Drop custom \"wider-than\" mixin for Neat's \"media\" mixin.","user":{"login":"gregrickaby","id":200280,"avatar_url":"https://avatars.githubusercontent.com/u/200280?v=3","gravatar_id":"","url":"https://api.github.com/users/gregrickaby","html_url":"https://github.com/gregrickaby","followers_url":"https://api.github.com/users/gregrickaby/followers","following_url":"https://api.github.com/users/gregrickaby/following{/other_user}","gists_url":"https://api.github.com/users/gregrickaby/gists{/gist_id}","starred_url":"https://api.github.com/users/gregrickaby/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gregrickaby/subscriptions","organizations_url":"https://api.github.com/users/gregrickaby/orgs","repos_url":"https://api.github.com/users/gregrickaby/repos","events_url":"https://api.github.com/users/gregrickaby/events{/privacy}","received_events_url":"https://api.github.com/users/gregrickaby/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/WebDevStudios/wd_s/labels/idea","name":"idea","color":"5319e7"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-11-23T18:02:27Z","updated_at":"2015-11-23T18:08:39Z","closed_at":null,"body":"Neat's [media](http://thoughtbot.github.io/neat-docs/latest/#media) mixin supports: _variables_, _min-width_, _max-width_, etc... basically any [media query](http://www.w3.org/TR/css3-mediaqueries/#media1]) can be passed through. \r\n\r\nBy default, `@include media()` uses `min-width` so:\r\n\r\n\r\n**This would be the normal WDS workflow**\r\n\r\nSass\r\n```sass\r\n.foo {\r\n    @include media($tablet-landscape) {\r\n         color: $color-black;\r\n    }\r\n}\r\n```\r\nCSS\r\n```css\r\n@media screen and (min-width: 64rem) {\r\n    .foo {\r\n       color: #000;\r\n    }\r\n}\r\n```\r\n\r\n**Plain 'ol pixels**\r\n\r\nSass\r\n```sass\r\n.foo {\r\n    @include media(768px) {\r\n         color: $color-black;\r\n    }\r\n}\r\n```\r\nCSS\r\n```css\r\n@media screen and (min-width: 768px) {\r\n    .foo {\r\n       color: #000;\r\n    }\r\n}\r\n```\r\n**Use max-width**\r\n\r\nSass\r\n```sass\r\n.foo {\r\n    @include media(max-width 768px) {\r\n       color: $color-black;\r\n    }\r\n}\r\n```\r\nCSS\r\n```css\r\n@media screen and (max-width: 768px) {\r\n    .foo {\r\n       color: #000;\r\n    }\r\n}\r\n```\r\n\r\n**Combine both min and max widths using variables**\r\n\r\nSass\r\n```sass\r\n.foo {\r\n    @include media(min-width $phone-portrait max-width $phone-landscape) {\r\n       color: $color-black;\r\n    }\r\n}\r\n```\r\nCSS\r\n```css\r\n@media screen and (min-width: 22.5rem) and (max-width: 40rem) {\r\n    .foo {\r\n       color: #000;\r\n    }\r\n}\r\n```\r\n\r\nSee it in action here: http://neat.bourbon.io/examples/"},"comment":{"url":"https://api.github.com/repos/WebDevStudios/wd_s/issues/comments/159015036","html_url":"https://github.com/WebDevStudios/wd_s/issues/121#issuecomment-159015036","issue_url":"https://api.github.com/repos/WebDevStudios/wd_s/issues/121","id":159015036,"user":{"login":"aubreypwd","id":1753298,"avatar_url":"https://avatars.githubusercontent.com/u/1753298?v=3","gravatar_id":"","url":"https://api.github.com/users/aubreypwd","html_url":"https://github.com/aubreypwd","followers_url":"https://api.github.com/users/aubreypwd/followers","following_url":"https://api.github.com/users/aubreypwd/following{/other_user}","gists_url":"https://api.github.com/users/aubreypwd/gists{/gist_id}","starred_url":"https://api.github.com/users/aubreypwd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aubreypwd/subscriptions","organizations_url":"https://api.github.com/users/aubreypwd/orgs","repos_url":"https://api.github.com/users/aubreypwd/repos","events_url":"https://api.github.com/users/aubreypwd/events{/privacy}","received_events_url":"https://api.github.com/users/aubreypwd/received_events","type":"User","site_admin":false},"created_at":"2015-11-23T18:08:39Z","updated_at":"2015-11-23T18:08:39Z","body":"+1 Also would fix #117 as the sizes would be a variable.\r\n"}}