{"action":"created","comment":{"url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments/40710625","id":40710625,"diff_hunk":"@@ -35,7 +35,7 @@ module.exports = {\n \n         // documentation site\n         pldoc_src:              pldoc_src + '/static/sass',\n-        pldoc_src_files:        pldoc_src + '/static/sass/**/*.scss'\n+        pldoc_src_files:        pldoc_src + '/static/sass/**/*'","path":"gulp/config.js","position":5,"original_position":5,"commit_id":"b147615bd2eb933fdeb6de5831806bc6719dc908","original_commit_id":"b147615bd2eb933fdeb6de5831806bc6719dc908","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":"Why was this changed as part of this work?","created_at":"2015-09-29T18:36:55Z","updated_at":"2015-09-29T18:36:55Z","html_url":"https://github.com/edx/ux-pattern-library/pull/173#discussion_r40710625","pull_request_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/173","_links":{"self":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/comments/40710625"},"html":{"href":"https://github.com/edx/ux-pattern-library/pull/173#discussion_r40710625"},"pull_request":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/173"}}},"pull_request":{"url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/173","id":46296993,"html_url":"https://github.com/edx/ux-pattern-library/pull/173","diff_url":"https://github.com/edx/ux-pattern-library/pull/173.diff","patch_url":"https://github.com/edx/ux-pattern-library/pull/173.patch","issue_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/173","number":173,"state":"open","locked":false,"title":"New font icons, Modernizr, and A Font Garde","user":{"login":"clrux","id":2112024,"avatar_url":"https://avatars.githubusercontent.com/u/2112024?v=3","gravatar_id":"","url":"https://api.github.com/users/clrux","html_url":"https://github.com/clrux","followers_url":"https://api.github.com/users/clrux/followers","following_url":"https://api.github.com/users/clrux/following{/other_user}","gists_url":"https://api.github.com/users/clrux/gists{/gist_id}","starred_url":"https://api.github.com/users/clrux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/clrux/subscriptions","organizations_url":"https://api.github.com/users/clrux/orgs","repos_url":"https://api.github.com/users/clrux/repos","events_url":"https://api.github.com/users/clrux/events{/privacy}","received_events_url":"https://api.github.com/users/clrux/received_events","type":"User","site_admin":false},"body":"This is work in progress...\r\n\r\n## Todos\r\n\r\n* fix an issue where `AFontGarde` sometimes doesn't load on page load, which causes the rendering of icons to fail despite being capable.\r\n\r\n## Accessible icon font and fallbacks\r\n\r\nOur pattern library previously used SVG paths for icons. While this method was accessible, it required a bunch of markup and the SVG paths were difficult to scale alongside text using font size. Going back even further, we used CSS-based icon fonts that relied on the `:before` pseudo attribute, and while incredibly easy to use, broke if `@font-face` wasn't available or if the font icons didn't load. Users would end up with unhelpful glyph boxes. This was especially painful in instances where the icon was the only indication of the action.\r\n\r\n### A Font Garde + Modernizr\r\n\r\nThe approach we're using here comes from The Filament Group's blog post [\"Bulletproof Accessible Icon Fonts\"](https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html) and uses feature detection plus a nifty piece of JavaScript to check if the font icons load. If they do, a class is appended to the `html` of the document and the icon fonts render using that class. If the test fails, fallbacks are displayed instead.\r\n\r\n#### Simplified markup\r\n\r\nRather than referencing an SVG and its definitions file, we now use one of the following fallback options:\r\n\r\n##### Critical icons that fallback to text\r\n```\r\n<span class=\"icon-fallback-text\">\r\n    <span class=\"icon icon-video-camera\" aria-hidden=\"true\"></span>\r\n    <span class=\"text\">Video</span>\r\n</span>\r\n```\r\n\r\n##### Critical icons that fallback to an image\r\n```\r\n<span class=\"icon-fallback-img\">\r\n    <span class=\"icon icon-video-camera\" aria-hidden=\"true\"></span>\r\n    <span class=\"text\">Video</span>\r\n</span>\r\n```\r\n\r\n#### When font icons are available\r\n\r\nWhen the tests pass, the name of the icon font (`.edx-icons` in our case) is appended to the `html` of the document, alongside a couple of Modernizr check classnames that are used by the `afontgarde.js` file indirectly.\r\n\r\nWe then style our icon fonts to rely on this class if it's present:\r\n\r\n```\r\n.edx-icons .icon {\r\n    font-family: $icon-font;\r\n    ...\r\n}\r\n\r\n.edx-icons .icon-linkedin-square:before {\r\n    content: \"\\e600\";\r\n}\r\n...\r\n```\r\n\r\n#### When font icons are _not_ available\r\n\r\nIf the font icon doesn't load, if `@font-face` isn't available in the browser, or if the user chooses not to let the site use its available stylesheets, we don't want random, unhelpful glyph boxes. Since our icon fonts look for the appended `html` class they won't load, giving us a chance to create fallbacks.\r\n\r\n##### Critical icons that fallback to text\r\n\r\nJust the text in `text` is displayed. The icon itself is hidden.\r\n\r\n##### Critical icons that fallback to an image\r\n\r\nWe create separate rules to use CSS background images instead, like the following:\r\n\r\n```\r\n.icon-linkedin-square {\r\n    background: url('path-to-image') no-repeat;\r\n}\r\n```\r\n\r\n## Notable changes\r\n\r\nThere were a number of changes in this update. A summary of them is as follows:\r\n\r\n* removed the SVG icons and their definitions file\r\n* added a new icon font set (generated with the same settings file at Icomoon)\r\n* added a new `afontgarde` package to Bower\r\n* added a new `modernizr` package to Bower\r\n* added both of the above to the compile and load\r\n* updated all of the example icons\r\n* updated the sizing script to update font size\r\n\r\n### Post-Icomoon required changes\r\n\r\nWhile we are able to utilize _most_ of the stock icons from Icomoon, we do need to make a few easy changes in order for this process to work.\r\n\r\n* Icomoon spits out a `.css` file which I copied and placed into the `_icons.scss` partial.\r\n* `.edx-icons` will need to be added in front of every `.icon` in that same partial\r\n* place any fallbacks at the bottom\r\n\r\n## Browser testing\r\n\r\nThis work was checked in the following browsers:\r\n\r\n| Platform | Browser | Version | Passed |\r\n|----------|---------|---------|--------|\r\n| Mac      | Chrome  | 45      | Yes    |\r\n|          | Safari  | 8       | Yes    |\r\n|          | Firefox | 40      | Yes *  |\r\n| Windows  | Chrome  | 45      | Yes    |\r\n|          | Firefox | 40      | Yes *    |\r\n|          | IE      | 10      | - *    |\r\n|          | IE      | 11      | - *    |\r\n\r\n_* A note about Firefox: Firefox has a known bug where it doesn't load or download local fonts. So, previewing the fonts with `@font-face` disabled will result in the fallbacks being triggered. You'll need to view this from a server to see it in action.\r\n\r\n## Reviewers\r\n\r\n- [ ] @talbs (Sass and overall overallness)","created_at":"2015-09-29T16:00:59Z","updated_at":"2015-09-29T18:36:55Z","closed_at":null,"merged_at":null,"merge_commit_sha":"27d61d94c96d9d9b20756186bb85c15d74d54787","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/173/commits","review_comments_url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/173/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/173/comments","statuses_url":"https://api.github.com/repos/edx/ux-pattern-library/statuses/b147615bd2eb933fdeb6de5831806bc6719dc908","head":{"label":"edx:clrux/svg-icons","ref":"clrux/svg-icons","sha":"b147615bd2eb933fdeb6de5831806bc6719dc908","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}","created_at":"2015-01-22T07:19:42Z","updated_at":"2015-09-13T16:07:48Z","pushed_at":"2015-09-29T17:26:50Z","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":7433,"stargazers_count":30,"watchers_count":30,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":8,"mirror_url":null,"open_issues_count":4,"forks":8,"open_issues":4,"watchers":30,"default_branch":"master"}},"base":{"label":"edx:master","ref":"master","sha":"895555937fada4ae49dee8d01176d2e6596c9f21","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}","created_at":"2015-01-22T07:19:42Z","updated_at":"2015-09-13T16:07:48Z","pushed_at":"2015-09-29T17:26:50Z","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":7433,"stargazers_count":30,"watchers_count":30,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":8,"mirror_url":null,"open_issues_count":4,"forks":8,"open_issues":4,"watchers":30,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/173"},"html":{"href":"https://github.com/edx/ux-pattern-library/pull/173"},"issue":{"href":"https://api.github.com/repos/edx/ux-pattern-library/issues/173"},"comments":{"href":"https://api.github.com/repos/edx/ux-pattern-library/issues/173/comments"},"review_comments":{"href":"https://api.github.com/repos/edx/ux-pattern-library/pulls/173/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/173/commits"},"statuses":{"href":"https://api.github.com/repos/edx/ux-pattern-library/statuses/b147615bd2eb933fdeb6de5831806bc6719dc908"}}}}