{"action":"created","issue":{"url":"https://api.github.com/repos/ten4design/ten4-framework/issues/61","labels_url":"https://api.github.com/repos/ten4design/ten4-framework/issues/61/labels{/name}","comments_url":"https://api.github.com/repos/ten4design/ten4-framework/issues/61/comments","events_url":"https://api.github.com/repos/ten4design/ten4-framework/issues/61/events","html_url":"https://github.com/ten4design/ten4-framework/issues/61","id":95464421,"number":61,"title":"Add fourth breakpoint by default","user":{"login":"lukepearce","id":1732601,"avatar_url":"https://avatars.githubusercontent.com/u/1732601?v=3","gravatar_id":"","url":"https://api.github.com/users/lukepearce","html_url":"https://github.com/lukepearce","followers_url":"https://api.github.com/users/lukepearce/followers","following_url":"https://api.github.com/users/lukepearce/following{/other_user}","gists_url":"https://api.github.com/users/lukepearce/gists{/gist_id}","starred_url":"https://api.github.com/users/lukepearce/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lukepearce/subscriptions","organizations_url":"https://api.github.com/users/lukepearce/orgs","repos_url":"https://api.github.com/users/lukepearce/repos","events_url":"https://api.github.com/users/lukepearce/events{/privacy}","received_events_url":"https://api.github.com/users/lukepearce/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":11,"created_at":"2015-07-16T15:49:40Z","updated_at":"2015-07-16T16:26:49Z","closed_at":null,"body":"Our responsive game is weak at the moment. An iPad in landscape can't look good with our default desktop layout.. Lets add a fourth breakpoint for smaller laptop screens.\r\n\r\nI'm going to implement on flowers so\r\n\r\n```\r\npalm: <500px\r\nhand: >500px <900px\r\nlap:  >900px <1200px\r\ndesk: >1200px\r\n```"},"comment":{"url":"https://api.github.com/repos/ten4design/ten4-framework/issues/comments/122010822","html_url":"https://github.com/ten4design/ten4-framework/issues/61#issuecomment-122010822","issue_url":"https://api.github.com/repos/ten4design/ten4-framework/issues/61","id":122010822,"user":{"login":"lukepearce","id":1732601,"avatar_url":"https://avatars.githubusercontent.com/u/1732601?v=3","gravatar_id":"","url":"https://api.github.com/users/lukepearce","html_url":"https://github.com/lukepearce","followers_url":"https://api.github.com/users/lukepearce/followers","following_url":"https://api.github.com/users/lukepearce/following{/other_user}","gists_url":"https://api.github.com/users/lukepearce/gists{/gist_id}","starred_url":"https://api.github.com/users/lukepearce/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lukepearce/subscriptions","organizations_url":"https://api.github.com/users/lukepearce/orgs","repos_url":"https://api.github.com/users/lukepearce/repos","events_url":"https://api.github.com/users/lukepearce/events{/privacy}","received_events_url":"https://api.github.com/users/lukepearce/received_events","type":"User","site_admin":false},"created_at":"2015-07-16T16:26:49Z","updated_at":"2015-07-16T16:26:49Z","body":"UPDATE: turns out I forgot that you can't `@extend` inside `@includes` but because the rules we want to \"extend\" are super simple we'd just add variables for our width values.\r\n\r\n---\r\n\r\nIts grid layout but its also \"one/two/three/four sizes fits all\" mindset. The `@extend` method would work like so:\r\n\r\nHow it is currently (ignore syntax errors!)\r\n\r\n```html\r\n<row>\r\n  <desk-6-12>\r\n  <desk-6-12>\r\n</row>\r\n```\r\n\r\n```scss\r\n.desk-6-12 {\r\n  width: 50%;\r\n}\r\n```\r\n\r\n`@extend` method\r\n\r\n```html\r\n<row>\r\n  <article__image>\r\n  <article__body>\r\n</row>\r\n```\r\n\r\n```scss\r\n.article__image {\r\n  @include media( lap ) {\r\n     width: $6-12\r\n  }\r\n  @include media( hand ) {\r\n     width: $4-12;\r\n  }\r\n```\r\n\r\nThis means we don't have shit tons of grid CSS and unlimited possibilities for very bespoke responsive layouts. You could prefix the classes like so `g--article__image` to differentiate between the layout and the style - for instance we don't ever attached any extra rules to divs with `desk-6-12` on etc."}}