{"action":"created","issue":{"url":"https://api.github.com/repos/PolymerElements/polymer-starter-kit/issues/94","labels_url":"https://api.github.com/repos/PolymerElements/polymer-starter-kit/issues/94/labels{/name}","comments_url":"https://api.github.com/repos/PolymerElements/polymer-starter-kit/issues/94/comments","events_url":"https://api.github.com/repos/PolymerElements/polymer-starter-kit/issues/94/events","html_url":"https://github.com/PolymerElements/polymer-starter-kit/issues/94","id":83584161,"number":94,"title":"Questions about @media queries","user":{"login":"kaelig","id":85783,"avatar_url":"https://avatars.githubusercontent.com/u/85783?v=3","gravatar_id":"","url":"https://api.github.com/users/kaelig","html_url":"https://github.com/kaelig","followers_url":"https://api.github.com/users/kaelig/followers","following_url":"https://api.github.com/users/kaelig/following{/other_user}","gists_url":"https://api.github.com/users/kaelig/gists{/gist_id}","starred_url":"https://api.github.com/users/kaelig/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kaelig/subscriptions","organizations_url":"https://api.github.com/users/kaelig/orgs","repos_url":"https://api.github.com/users/kaelig/repos","events_url":"https://api.github.com/users/kaelig/events{/privacy}","received_events_url":"https://api.github.com/users/kaelig/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/PolymerElements/polymer-starter-kit/labels/question","name":"question","color":"cc317c"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-06-01T16:16:07Z","updated_at":"2015-06-03T14:27:48Z","closed_at":null,"body":"## Double min-width and naming\r\n\r\nSeen in [app-theme.html#L224](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/app-theme.html#L224):\r\n\r\n```css\r\n/* desktop-xlarge */\r\n@media all and (min-width: 1601px) and (min-width: 1920px) { }\r\n```\r\n\r\n- `desktop-xlarge` is for 1920dp and up, according to the spec (not 1601px)\r\n- This code contains `min-width` twice, is it normal?\r\n\r\n## Breakpoint values\r\n\r\nThe Material spec is ambiguous about the value at which breakpoints start and end (599, 600, 601?) but having a breakpoint starting at 481dp seems strange since 480dp is a common screen width. It would probably make more sense to have `(min-width: 480px)` instead of `(min-width: 481px)`.\r\n\r\n## Encourage a mobile-first approach\r\n\r\nAs per @petele's [guidelines](https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/how-to-choose-breakpoints?hl=en): \r\n\r\n> Design for the smallest mobile device first, then progressively enhance the experience as more screen real estate becomes available.\r\n\r\nThere are multiple ways to encourage a mobile-first thinking, here is one:\r\n\r\n```css\r\n/* Default styles go here (explain the mobile-first approach) */\r\n…\r\n\r\n/**\r\n * [Description of the grid system]\r\n * Note: you may use max-width queries when necessary\r\n */\r\n\r\n/* handset-medium */\r\n@media (min-width: 360px) { }\r\n…\r\n\r\n/**\r\n * Layouts over 1600dp wide may let the layout grow until it \r\n * hits a max width. At this point, the grid may do one of the \r\n * following:\r\n *\r\n * - Become center aligned with increased margins\r\n * - Remain left aligned while the right margin grows\r\n * - Continue to grow while revealing additional content\r\n */\r\n@media (min-width: 1600px) { }\r\n/* x-large */\r\n@media (min-width: 1920px) { }\r\n```"},"comment":{"url":"https://api.github.com/repos/PolymerElements/polymer-starter-kit/issues/comments/108453631","html_url":"https://github.com/PolymerElements/polymer-starter-kit/issues/94#issuecomment-108453631","issue_url":"https://api.github.com/repos/PolymerElements/polymer-starter-kit/issues/94","id":108453631,"user":{"login":"kaelig","id":85783,"avatar_url":"https://avatars.githubusercontent.com/u/85783?v=3","gravatar_id":"","url":"https://api.github.com/users/kaelig","html_url":"https://github.com/kaelig","followers_url":"https://api.github.com/users/kaelig/followers","following_url":"https://api.github.com/users/kaelig/following{/other_user}","gists_url":"https://api.github.com/users/kaelig/gists{/gist_id}","starred_url":"https://api.github.com/users/kaelig/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kaelig/subscriptions","organizations_url":"https://api.github.com/users/kaelig/orgs","repos_url":"https://api.github.com/users/kaelig/repos","events_url":"https://api.github.com/users/kaelig/events{/privacy}","received_events_url":"https://api.github.com/users/kaelig/received_events","type":"User","site_admin":false},"created_at":"2015-06-03T14:27:48Z","updated_at":"2015-06-03T14:27:48Z","body":"It would be interesting to understand the thought process behind the grid a bit better because there are a few ambiguous things in the spec (about the number of columns and the min-max width values).\r\n\r\nI took a fresh look at it and I interpreted it as a hierarchy of breakpoints (major vs minor).\r\n\r\nHere's my interpretation (not sure how it would look like in code yet):\r\n\r\n```css\r\n/* Major breakpoints */\r\n\r\n/* 0-599       xsmall   */\r\n/* 600-1023    small    */\r\n/* 1024-1439   medium   */\r\n/* 1440-1919   large    */\r\n/* 1920+       xlarge   */\r\n\r\n\r\n/* Minor breakpoints (tweakpoints) */\r\n\r\n/* 0-359      small handset (portrait)                            xsmall */\r\n/* 360-399    medium handset (portrait)                           xsmall */\r\n/* 400-479    large handset (portrait)                            xsmall */\r\n/* 480-599    large handset (portrait) small handset (landscape)  xsmall */\r\n/* 600-719    small tablet (portrait) medium handset (landscape)  small  */\r\n/* 720-839    large tablet (portrait) large handset (landscape)   small  */\r\n/* 840-959    large tablet (portrait) large handset (landscape)   small  */\r\n/* 960-1023   small tablet (landscape)                            small  */\r\n/* 1024-1279  large tablet (landscape)                            medium */\r\n/* 1280-1439  large tablet (landscape)                            medium */\r\n/* 1440-1599                                                      large  */\r\n/* 1600-1919                                                      large  */\r\n```\r\n\r\nPutting it like this before coding it is interesting because it raises a few more questions:\r\n- what to do when 2 ranges have the same names (such as \"large tablet\")?\r\n- one range is very small (the 360-399px minor breakpoint), what are the use cases for this one?\r\n- the `#overlay` is given a min-width of 360px (to match the first breakpoint) on small screens but actually it probably should be full width and flexible until a certain range\r\n- Where should most important layout changes happen?\r\n\r\nThoughts?\r\n\r\nIt'd be great if we could write [custom media queries](http://dev.w3.org/csswg/mediaqueries-4/#custom-mq). Any idea when a polyfill might be coming?"}}