{"action":"closed","issue":{"url":"https://api.github.com/repos/carrieforde/Alcatraz/issues/9","labels_url":"https://api.github.com/repos/carrieforde/Alcatraz/issues/9/labels{/name}","comments_url":"https://api.github.com/repos/carrieforde/Alcatraz/issues/9/comments","events_url":"https://api.github.com/repos/carrieforde/Alcatraz/issues/9/events","html_url":"https://github.com/carrieforde/Alcatraz/issues/9","id":118209710,"number":9,"title":"Remove Media Query Sass Variables","user":{"login":"BraadMartin","id":7003247,"avatar_url":"https://avatars.githubusercontent.com/u/7003247?v=3","gravatar_id":"","url":"https://api.github.com/users/BraadMartin","html_url":"https://github.com/BraadMartin","followers_url":"https://api.github.com/users/BraadMartin/followers","following_url":"https://api.github.com/users/BraadMartin/following{/other_user}","gists_url":"https://api.github.com/users/BraadMartin/gists{/gist_id}","starred_url":"https://api.github.com/users/BraadMartin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BraadMartin/subscriptions","organizations_url":"https://api.github.com/users/BraadMartin/orgs","repos_url":"https://api.github.com/users/BraadMartin/repos","events_url":"https://api.github.com/users/BraadMartin/events{/privacy}","received_events_url":"https://api.github.com/users/BraadMartin/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":{"login":"carrieforde","id":9504864,"avatar_url":"https://avatars.githubusercontent.com/u/9504864?v=3","gravatar_id":"","url":"https://api.github.com/users/carrieforde","html_url":"https://github.com/carrieforde","followers_url":"https://api.github.com/users/carrieforde/followers","following_url":"https://api.github.com/users/carrieforde/following{/other_user}","gists_url":"https://api.github.com/users/carrieforde/gists{/gist_id}","starred_url":"https://api.github.com/users/carrieforde/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/carrieforde/subscriptions","organizations_url":"https://api.github.com/users/carrieforde/orgs","repos_url":"https://api.github.com/users/carrieforde/repos","events_url":"https://api.github.com/users/carrieforde/events{/privacy}","received_events_url":"https://api.github.com/users/carrieforde/received_events","type":"User","site_admin":false},"milestone":null,"comments":4,"created_at":"2015-11-21T17:36:40Z","updated_at":"2015-11-24T05:40:21Z","closed_at":"2015-11-24T05:40:21Z","body":"I saw that the breakpoints have been updated, and I think we need further discussion.\r\n\r\nFirst for reference, here is what I had proposed:\r\n`$breakpoint__mobile-small: 360px;`\r\n`$breakpoint__mobile: 480px;`\r\n`$breakpoint__mobile-large: 600px;`\r\n`$breakpoint__tablet: 768px;`\r\n`$breakpoint__tablet-large: 900px;`\r\n`$breakpoint__desktop: 1024px;`\r\n`$breakpoint__desktop-large: 1440px;`\r\n\r\nAnd here is what Carrie has proposed:\r\n`$breakpoint__mobile-phone: \"(min-width: 400px)\";`\r\n`$breakpoint__small-tablet: \"(min-width: 540px)\";`\r\n`$breakpoint__tablet: \"(min-width: 768px)\";`\r\n`$breakpoint__desktop: \"(min-width: 960px)\";`\r\n`$breakpoint__desktop-large: \"(min-width: 1200px)\";`\r\n\r\nThe breakpoints that I chose were based on common device widths or they were ones that I've found critical to have as I've built many, many mobile-first websites. Here is a good list of common device widths for reference: http://mydevice.io/devices/\r\n\r\nFor example, 320px is the narrowest width that I usually care about supporting, because that is the width of the first iPhone. But now many mobile phones are 360px or 380px, and I think optimizing between 320-400px is critical to getting great mobile phone browsing experiences, so having a breakpoint at 360px is something I've had in almost every site I've developed for a while. In your case I think the spread between 320px and 400px is too big, and if you check the mydevice.io list you'll see that almost all of the common phones start at less than 400px, so without a breakpoint below 400px we have no way of distinguishing between the tiny 320px screens and the more common 360-380px screens.\r\n\r\nAs another example, 540px doesn't correspond to any common screen size that I can find. The older iPhones in landscape are 480px, and most newer devices are 640px. I've often found the gap between 480 and 640 to be too big, and also I don't usually make a lot of changes between 640 and 768, and there are some smaller tablets that start at 600, so that is why I usually end up with a breakpoint at 600px, but I'd support both 480px and 640px or 480px and 600px over a single breakpoint at 540px.\r\n\r\nAnother example, 960px isn't bad, but I think 1024px is a must because that is the landscape width of iPads and a pretty big list of other devices. Because 960 and 1024 are so close together, I usually end with a breakpoint at 900px, because to me that feels like a nice even split between 768 and 1024.\r\n\r\nThe 1200px breakpoint makes for nice math, but it also doesn't correspond to any known device sizes that I can find. I see 1024, 1280, and 1440 as the common device sizes in the range, and to me 1024 and above is desktop, so I consider 1024 and 1440 to be the most useful breakpoints in this range.\r\n\r\nI also don't like the inconsistency of naming between `desktop-large` and `small-tablet`. If we stick with `small-tablet`, I think it should be renamed `tablet-small`, but actually, I can't find a single common tablet that has a screen width of 540px, so maybe the breakpoint in this range should be `mobile-large`.\r\n\r\nAlong similar lines, I also think `mobile-phone` as a breakpoint name isn't ideal. iPods have mobile browsers these days but they aren't considered phones. I think our three main breakpoint identifiers should be `mobile`, `tablet`, and `desktop`, and all of our sub-sizes based off these should be `-large` or `-small`.\r\n\r\nFinally, I don't like that we're wrapping up the min-width statement with these variables. Yes, we're building a mobile first theme here, but that doesn't mean we can't include a max-width media query for certain things, and if we include the min-width statements in the variables then this isn't possible. An example of a max-width media query that I think makes sense is responsive table styling. If you try to use min-width queries to make tables responsive, you end up overwriting most of the browser's default table styling for mobile, then having to redefine all of the default table styling above mobile, leading to more code. This is why in Trestle, which is mobile-first, we use a max-width media query to include responsive table styling.\r\n\r\nIf we did want to create variables for the breakpoints that include min-width, I'd rather create extra $min-width-tablet variables that use the $breakpoint__tablet variables, that way we have easy access to both. I'm also realizing that we'll probably want to include our _variables.scss file in our child themes, and having these available outside of the min-width context would make much more sense there, as would having more breakpoints in general.\r\n\r\nLet's continue this discussion and see if we can come to a consensus. I'm open to changes to the breakpoints that I proposed, but I want to see them backed up by some reasoning and use cases, similar to what I've laid out here. :)"}}