{"action":"closed","issue":{"url":"https://api.github.com/repos/w3c/wai-quick-start/issues/226","labels_url":"https://api.github.com/repos/w3c/wai-quick-start/issues/226/labels{/name}","comments_url":"https://api.github.com/repos/w3c/wai-quick-start/issues/226/comments","events_url":"https://api.github.com/repos/w3c/wai-quick-start/issues/226/events","html_url":"https://github.com/w3c/wai-quick-start/issues/226","id":105683711,"number":226,"title":"Proposed general layout rules for examples.","user":{"login":"James-Green","id":13589074,"avatar_url":"https://avatars.githubusercontent.com/u/13589074?v=3","gravatar_id":"","url":"https://api.github.com/users/James-Green","html_url":"https://github.com/James-Green","followers_url":"https://api.github.com/users/James-Green/followers","following_url":"https://api.github.com/users/James-Green/following{/other_user}","gists_url":"https://api.github.com/users/James-Green/gists{/gist_id}","starred_url":"https://api.github.com/users/James-Green/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/James-Green/subscriptions","organizations_url":"https://api.github.com/users/James-Green/orgs","repos_url":"https://api.github.com/users/James-Green/repos","events_url":"https://api.github.com/users/James-Green/events{/privacy}","received_events_url":"https://api.github.com/users/James-Green/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/w3c/wai-quick-start/labels/Examples","name":"Examples","color":"eb6420"}],"state":"closed","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/w3c/wai-quick-start/milestones/2","html_url":"https://github.com/w3c/wai-quick-start/milestones/Phase%202","labels_url":"https://api.github.com/repos/w3c/wai-quick-start/milestones/2/labels","id":1316294,"number":2,"title":"Phase 2","description":"","creator":{"login":"iadawn","id":2444840,"avatar_url":"https://avatars.githubusercontent.com/u/2444840?v=3","gravatar_id":"","url":"https://api.github.com/users/iadawn","html_url":"https://github.com/iadawn","followers_url":"https://api.github.com/users/iadawn/followers","following_url":"https://api.github.com/users/iadawn/following{/other_user}","gists_url":"https://api.github.com/users/iadawn/gists{/gist_id}","starred_url":"https://api.github.com/users/iadawn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/iadawn/subscriptions","organizations_url":"https://api.github.com/users/iadawn/orgs","repos_url":"https://api.github.com/users/iadawn/repos","events_url":"https://api.github.com/users/iadawn/events{/privacy}","received_events_url":"https://api.github.com/users/iadawn/received_events","type":"User","site_admin":false},"open_issues":10,"closed_issues":4,"state":"open","created_at":"2015-09-21T13:42:29Z","updated_at":"2015-10-29T12:57:56Z","due_on":"2016-03-30T23:00:00Z","closed_at":null},"comments":3,"created_at":"2015-09-09T21:01:06Z","updated_at":"2015-10-29T12:57:56Z","closed_at":"2015-10-29T12:57:56Z","body":"In evaluating the various layouts for examples, I am seeing a few things being tried:\r\n* In Designing, I see some examples going full width, some a percentage, and others fixed right now... \r\n* In Writing, they are mostly pairs and trios that go 100% until they have to stack. \r\n* In Developing they are mostly 100% except for the label example (stays 556px until squished) and the sneaker that stops growing to 100% after it's about 1000px wide.\r\n\r\nI suggest that we categorize examples into sizes and keep them all consistent.  These suggestions are already more or less used in there in places, I just want to call them out as global rules and modify any examples not following the rules...\r\nFor example\r\n* \"small\" examples would always be 350px wide until stacking is forced or if possible given the content, until squished - following breakpoint rules as currently implemented.\r\n* \"medium\" examples would be 550px wide following same rules\r\n* as of now, I believe there is only one example that would at a minimum be large at 750px until wrapped or squished- that's the responsive design one.\r\n"}}