{"action":"created","comment":{"url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments/52628399","id":52628399,"diff_hunk":"@@ -0,0 +1,122 @@\n+<!DOCTYPE html>\n+\n+<!--\n+edX Pattern Library: Boilerplate HTML Template: Header + Footer\n+\n+NOTES:\n+\n+* base template with the addition of how to handle an app-centric header/footer semantically.\n+* base template with the addition of how to handle different types of navigation (user vs. app-centric).\n+* base template with addition of how to start organizing main vs. supplementary/aside content\n+* this assumes that the main and aside content are next to each other in the document's flow.\n+  This does not necessarily have to be the case, but the same markup could be used in more complex cases.\n+-->\n+<html class=\"no-js\" lang=\"en\">\n+    <head>\n+        <meta charset=\"utf-8\">\n+        <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n+\n+        <base href=\"{base path}\">\n+\n+        <!-- place favicon.ico in the root directory -->\n+        <link rel=\"shortcut icon\" href=\"{favicon path}\">\n+        <!-- place touch icon in the root directory -->\n+        <link rel=\"apple-touch-icon\" href=\"{icon path}\">\n+\n+        <!-- view/page metadata -->\n+        <title>{page/view's title}</title>\n+        <meta name=\"description\" content=\"\">\n+\n+        <!-- place primary assets (needed for or to support base view/page rendering) here -->\n+        <link rel=\"stylesheet\" href=\"{main css path}\">\n+        <script src=\"{main js path}\"></script>\n+    </head>\n+\n+    <body class=\"{app/site-section-name} {view-name} {stateful-class}\">\n+        <!-- CASE: if needed, provide a message for older versions of IE -->\n+        <!--[if lt IE 9]>\n+            <p class=\"alert alert-browserupgrade\">You are using an <strong>outdated</strong> browser.\n+            Please <a href=\"http://browsehappy.com/\">upgrade your browser</a> to improve your experience.</p>\n+        <![endif]-->\n+\n+        <!-- wrapper for all UI rendered within the page/view -->\n+        <div class=\"wrapper-view\">\n+\n+            <!--\n+              NOTE: wrapper elements are only needed when they need to manage the grid or\n+              larger view/page layout aspects (e.g. spanning the whole viewport)\n+            -->\n+            <div class=\"wrapper-header-app\">\n+                <header class=\"header-app\" aria-label=\"Page\">\n+                    <!-- example: app logo/title -->\n+                    <h1 class=\"header-app-title\">\n+                        <a class=\"logo\" href=\"{app or company home url}\">\n+                            <img class=\"logo-img\" src=\"{path/to/logo-img.svg}\" alt=\"{app/site name}\" />\n+                            <!-- example: alternate app/site name (if not a graphical logo) -->\n+                            <!-- {app/site name} -->\n+                        </a>\n+                    </h1>\n+                    <!-- insert header content here -->\n+\n+                    <!--\n+                      NOTE: simplified user account navigation example. This would be more complex\n+                      in reality (with dropdowns, etc.)\n+                    -->\n+                    <div class=\"wrapper-navigation\">\n+                        <nav class=\"nav-account\" id=\"nav-account\" aria-label=\"User\">\n+                            <a href=\"{url}\">\n+                                {username}\n+                                <span class=\"sr-only\">'s settings/profile</span>\n+                            </a>\n+                        </nav>\n+                    </div>\n+                </header>\n+            </div>\n+\n+            <!--\n+              NOTE: simplified course navigation example.\n+            -->\n+            <div class=\"wrapper-navigation\">\n+                <nav class=\"nav-app\" id=\"nav-app\" aria-label=\"Course\">\n+                    <a href=\"{url}\">Course Home</a>\n+                    <a href=\"{url}\">Course Content</a>\n+                    <a href=\"{url}\">Discussions</a>\n+                    <a href=\"{url}\">Assignments</a>\n+                    <a href=\"{url}\">Assets &amp; Utilities</a>\n+                    <a href=\"{url}\">My Progress</a>\n+                </nav>\n+            </div>\n+\n+            <!--\n+              NOTE: wrapper elements are only needed when they need to manage the grid or\n+              larger view/page layout aspects (e.g. spanning the whole viewport)\n+            -->\n+            <div class=\"wrapper-content\">\n+                <main class=\"content-main\" id=\"content-main\" aria-label=\"Main\">\n+                    <!-- insert main content here -->\n+                </main>\n+\n+                <aside class=\"content-aside\" id=\"content-aside\">","path":"pattern-library/html/boilerplate-header+footer+content+nav.html","position":99,"original_position":99,"commit_id":"dcac5427ca45b44ebdae72af779dad4a5dcd1b8c","original_commit_id":"dcac5427ca45b44ebdae72af779dad4a5dcd1b8c","user":{"login":"cptvitamin","id":444368,"avatar_url":"https://avatars.githubusercontent.com/u/444368?v=3","gravatar_id":"","url":"https://api.github.com/users/cptvitamin","html_url":"https://github.com/cptvitamin","followers_url":"https://api.github.com/users/cptvitamin/followers","following_url":"https://api.github.com/users/cptvitamin/following{/other_user}","gists_url":"https://api.github.com/users/cptvitamin/gists{/gist_id}","starred_url":"https://api.github.com/users/cptvitamin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cptvitamin/subscriptions","organizations_url":"https://api.github.com/users/cptvitamin/orgs","repos_url":"https://api.github.com/users/cptvitamin/repos","events_url":"https://api.github.com/users/cptvitamin/events{/privacy}","received_events_url":"https://api.github.com/users/cptvitamin/received_events","type":"User","site_admin":false},"body":"Do we want to add an HTML comment here that reminds users to add an aria-label that describes the content/purpose of the aside?","created_at":"2016-02-11T16:42:24Z","updated_at":"2016-02-11T16:42:24Z","html_url":"https://github.com/edx/ux-pattern-library/pull/262#discussion_r52628399","pull_request_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/262","_links":{"self":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments/52628399"},"html":{"href":"https://github.com/edx/ux-pattern-library/pull/262#discussion_r52628399"},"pull_request":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/262"}}},"pull_request":{"url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/262","id":56642551,"html_url":"https://github.com/edx/ux-pattern-library/pull/262","diff_url":"https://github.com/edx/ux-pattern-library/pull/262.diff","patch_url":"https://github.com/edx/ux-pattern-library/pull/262.patch","issue_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/262","number":262,"state":"open","locked":false,"title":"HTML Boilerplates - For Kickstarting using the UXPL","user":{"login":"talbs","id":163763,"avatar_url":"https://avatars.githubusercontent.com/u/163763?v=3","gravatar_id":"","url":"https://api.github.com/users/talbs","html_url":"https://github.com/talbs","followers_url":"https://api.github.com/users/talbs/followers","following_url":"https://api.github.com/users/talbs/following{/other_user}","gists_url":"https://api.github.com/users/talbs/gists{/gist_id}","starred_url":"https://api.github.com/users/talbs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/talbs/subscriptions","organizations_url":"https://api.github.com/users/talbs/orgs","repos_url":"https://api.github.com/users/talbs/repos","events_url":"https://api.github.com/users/talbs/events{/privacy}","received_events_url":"https://api.github.com/users/talbs/received_events","type":"User","site_admin":false},"body":"**This work adds in some basic example HTML boilerplates with the purpose of:**\r\n\r\n* Communicating how to apply the HTML Styleguide (https://github.com/edx/ux-pattern-library/wiki/Styleguide:-HTML) into base cases\r\n* Giving developers and template-creators a starting point for how to organize their DOM and what basic properties, settings, and elements to start with\r\n* Showing different options for different configuration and base UI rendering support (e.g. favicon, touch icon, IE/older browser warning). These should be removed/used on a case-by-case basis.\r\n\r\n**What this work does not do:**\r\n* Create production-ready templates for apps - these still need to be adjusted to fit the flow/content/settings for each application\r\n* Point to production ready assets (CSS, JS) - links and references need to be replaced with each app's real URLs/URIs\r\n\r\n- - -\r\n\r\n##### Reviewers\r\n\r\n* [x] FED and General Knowledge/Use - @dsjen and @andy-armstrong \r\n* [x] A11y - @cptvitamin \r\n","created_at":"2016-01-20T17:47:07Z","updated_at":"2016-02-11T16:42:24Z","closed_at":null,"merged_at":null,"merge_commit_sha":"509ece947d6b0a8f5e63875e6290127d89cb4daa","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/262/commits","review_comments_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/262/comments","review_comment_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments{/number}","comments_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/262/comments","statuses_url":"https://api.github.com/repos/edx/ux-pattern-library/statuses/dcac5427ca45b44ebdae72af779dad4a5dcd1b8c","head":{"label":"edx:talbs/html-boilerplates","ref":"talbs/html-boilerplates","sha":"dcac5427ca45b44ebdae72af779dad4a5dcd1b8c","user":{"login":"edx","id":3179841,"avatar_url":"https://avatars.githubusercontent.com/u/3179841?v=3","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"repo":{"id":29666334,"name":"ux-pattern-library","full_name":"edx/ux-pattern-library","owner":{"login":"edx","id":3179841,"avatar_url":"https://avatars.githubusercontent.com/u/3179841?v=3","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/edx/ux-pattern-library","description":"The (working) Visual, UI, and Front End Styleguide for edX.","fork":false,"url":"https://api.github.com/repos/edx/ux-pattern-library","forks_url":"https://api.github.com/repos/edx/ux-pattern-library/forks","keys_url":"https://api.github.com/repos/edx/ux-pattern-library/keys{/key_id}","collaborators_url":"https://api.github.com/repos/edx/ux-pattern-library/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/edx/ux-pattern-library/teams","hooks_url":"https://api.github.com/repos/edx/ux-pattern-library/hooks","issue_events_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/events{/number}","events_url":"https://api.github.com/repos/edx/ux-pattern-library/events","assignees_url":"https://api.github.com/repos/edx/ux-pattern-library/assignees{/user}","branches_url":"https://api.github.com/repos/edx/ux-pattern-library/branches{/branch}","tags_url":"https://api.github.com/repos/edx/ux-pattern-library/tags","blobs_url":"https://api.github.com/repos/edx/ux-pattern-library/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/edx/ux-pattern-library/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/edx/ux-pattern-library/git/refs{/sha}","trees_url":"https://api.github.com/repos/edx/ux-pattern-library/git/trees{/sha}","statuses_url":"https://api.github.com/repos/edx/ux-pattern-library/statuses/{sha}","languages_url":"https://api.github.com/repos/edx/ux-pattern-library/languages","stargazers_url":"https://api.github.com/repos/edx/ux-pattern-library/stargazers","contributors_url":"https://api.github.com/repos/edx/ux-pattern-library/contributors","subscribers_url":"https://api.github.com/repos/edx/ux-pattern-library/subscribers","subscription_url":"https://api.github.com/repos/edx/ux-pattern-library/subscription","commits_url":"https://api.github.com/repos/edx/ux-pattern-library/commits{/sha}","git_commits_url":"https://api.github.com/repos/edx/ux-pattern-library/git/commits{/sha}","comments_url":"https://api.github.com/repos/edx/ux-pattern-library/comments{/number}","issue_comment_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/comments{/number}","contents_url":"https://api.github.com/repos/edx/ux-pattern-library/contents/{+path}","compare_url":"https://api.github.com/repos/edx/ux-pattern-library/compare/{base}...{head}","merges_url":"https://api.github.com/repos/edx/ux-pattern-library/merges","archive_url":"https://api.github.com/repos/edx/ux-pattern-library/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/edx/ux-pattern-library/downloads","issues_url":"https://api.github.com/repos/edx/ux-pattern-library/issues{/number}","pulls_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls{/number}","milestones_url":"https://api.github.com/repos/edx/ux-pattern-library/milestones{/number}","notifications_url":"https://api.github.com/repos/edx/ux-pattern-library/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/edx/ux-pattern-library/labels{/name}","releases_url":"https://api.github.com/repos/edx/ux-pattern-library/releases{/id}","deployments_url":"https://api.github.com/repos/edx/ux-pattern-library/deployments","created_at":"2015-01-22T07:19:42Z","updated_at":"2016-02-11T13:15:39Z","pushed_at":"2016-02-11T15:36:30Z","git_url":"git://github.com/edx/ux-pattern-library.git","ssh_url":"git@github.com:edx/ux-pattern-library.git","clone_url":"https://github.com/edx/ux-pattern-library.git","svn_url":"https://github.com/edx/ux-pattern-library","homepage":"http://ux.edx.org","size":6384,"stargazers_count":217,"watchers_count":217,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":28,"mirror_url":null,"open_issues_count":7,"forks":28,"open_issues":7,"watchers":217,"default_branch":"master"}},"base":{"label":"edx:master","ref":"master","sha":"1a1269d7267fced848ebed54241bb2ae68f70d00","user":{"login":"edx","id":3179841,"avatar_url":"https://avatars.githubusercontent.com/u/3179841?v=3","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"repo":{"id":29666334,"name":"ux-pattern-library","full_name":"edx/ux-pattern-library","owner":{"login":"edx","id":3179841,"avatar_url":"https://avatars.githubusercontent.com/u/3179841?v=3","gravatar_id":"","url":"https://api.github.com/users/edx","html_url":"https://github.com/edx","followers_url":"https://api.github.com/users/edx/followers","following_url":"https://api.github.com/users/edx/following{/other_user}","gists_url":"https://api.github.com/users/edx/gists{/gist_id}","starred_url":"https://api.github.com/users/edx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edx/subscriptions","organizations_url":"https://api.github.com/users/edx/orgs","repos_url":"https://api.github.com/users/edx/repos","events_url":"https://api.github.com/users/edx/events{/privacy}","received_events_url":"https://api.github.com/users/edx/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/edx/ux-pattern-library","description":"The (working) Visual, UI, and Front End Styleguide for edX.","fork":false,"url":"https://api.github.com/repos/edx/ux-pattern-library","forks_url":"https://api.github.com/repos/edx/ux-pattern-library/forks","keys_url":"https://api.github.com/repos/edx/ux-pattern-library/keys{/key_id}","collaborators_url":"https://api.github.com/repos/edx/ux-pattern-library/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/edx/ux-pattern-library/teams","hooks_url":"https://api.github.com/repos/edx/ux-pattern-library/hooks","issue_events_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/events{/number}","events_url":"https://api.github.com/repos/edx/ux-pattern-library/events","assignees_url":"https://api.github.com/repos/edx/ux-pattern-library/assignees{/user}","branches_url":"https://api.github.com/repos/edx/ux-pattern-library/branches{/branch}","tags_url":"https://api.github.com/repos/edx/ux-pattern-library/tags","blobs_url":"https://api.github.com/repos/edx/ux-pattern-library/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/edx/ux-pattern-library/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/edx/ux-pattern-library/git/refs{/sha}","trees_url":"https://api.github.com/repos/edx/ux-pattern-library/git/trees{/sha}","statuses_url":"https://api.github.com/repos/edx/ux-pattern-library/statuses/{sha}","languages_url":"https://api.github.com/repos/edx/ux-pattern-library/languages","stargazers_url":"https://api.github.com/repos/edx/ux-pattern-library/stargazers","contributors_url":"https://api.github.com/repos/edx/ux-pattern-library/contributors","subscribers_url":"https://api.github.com/repos/edx/ux-pattern-library/subscribers","subscription_url":"https://api.github.com/repos/edx/ux-pattern-library/subscription","commits_url":"https://api.github.com/repos/edx/ux-pattern-library/commits{/sha}","git_commits_url":"https://api.github.com/repos/edx/ux-pattern-library/git/commits{/sha}","comments_url":"https://api.github.com/repos/edx/ux-pattern-library/comments{/number}","issue_comment_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/comments{/number}","contents_url":"https://api.github.com/repos/edx/ux-pattern-library/contents/{+path}","compare_url":"https://api.github.com/repos/edx/ux-pattern-library/compare/{base}...{head}","merges_url":"https://api.github.com/repos/edx/ux-pattern-library/merges","archive_url":"https://api.github.com/repos/edx/ux-pattern-library/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/edx/ux-pattern-library/downloads","issues_url":"https://api.github.com/repos/edx/ux-pattern-library/issues{/number}","pulls_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls{/number}","milestones_url":"https://api.github.com/repos/edx/ux-pattern-library/milestones{/number}","notifications_url":"https://api.github.com/repos/edx/ux-pattern-library/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/edx/ux-pattern-library/labels{/name}","releases_url":"https://api.github.com/repos/edx/ux-pattern-library/releases{/id}","deployments_url":"https://api.github.com/repos/edx/ux-pattern-library/deployments","created_at":"2015-01-22T07:19:42Z","updated_at":"2016-02-11T13:15:39Z","pushed_at":"2016-02-11T15:36:30Z","git_url":"git://github.com/edx/ux-pattern-library.git","ssh_url":"git@github.com:edx/ux-pattern-library.git","clone_url":"https://github.com/edx/ux-pattern-library.git","svn_url":"https://github.com/edx/ux-pattern-library","homepage":"http://ux.edx.org","size":6384,"stargazers_count":217,"watchers_count":217,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":28,"mirror_url":null,"open_issues_count":7,"forks":28,"open_issues":7,"watchers":217,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/262"},"html":{"href":"https://github.com/edx/ux-pattern-library/pull/262"},"issue":{"href":"https://api.github.com/repos/edx/ux-pattern-library/issues/262"},"comments":{"href":"https://api.github.com/repos/edx/ux-pattern-library/issues/262/comments"},"review_comments":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/262/comments"},"review_comment":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/262/commits"},"statuses":{"href":"https://api.github.com/repos/edx/ux-pattern-library/statuses/dcac5427ca45b44ebdae72af779dad4a5dcd1b8c"}}}}