{"action":"created","issue":{"url":"https://api.github.com/repos/cloudfour/drizzle-builder/issues/94","repository_url":"https://api.github.com/repos/cloudfour/drizzle-builder","labels_url":"https://api.github.com/repos/cloudfour/drizzle-builder/issues/94/labels{/name}","comments_url":"https://api.github.com/repos/cloudfour/drizzle-builder/issues/94/comments","events_url":"https://api.github.com/repos/cloudfour/drizzle-builder/issues/94/events","html_url":"https://github.com/cloudfour/drizzle-builder/pull/94","id":155892667,"number":94,"title":"Feature: Add `{{ns}}` helper and tests","user":{"login":"erikjung","id":61204,"avatar_url":"https://avatars.githubusercontent.com/u/61204?v=3","gravatar_id":"","url":"https://api.github.com/users/erikjung","html_url":"https://github.com/erikjung","followers_url":"https://api.github.com/users/erikjung/followers","following_url":"https://api.github.com/users/erikjung/following{/other_user}","gists_url":"https://api.github.com/users/erikjung/gists{/gist_id}","starred_url":"https://api.github.com/users/erikjung/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/erikjung/subscriptions","organizations_url":"https://api.github.com/users/erikjung/orgs","repos_url":"https://api.github.com/users/erikjung/repos","events_url":"https://api.github.com/users/erikjung/events{/privacy}","received_events_url":"https://api.github.com/users/erikjung/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"mrgerardorodriguez","id":459757,"avatar_url":"https://avatars.githubusercontent.com/u/459757?v=3","gravatar_id":"","url":"https://api.github.com/users/mrgerardorodriguez","html_url":"https://github.com/mrgerardorodriguez","followers_url":"https://api.github.com/users/mrgerardorodriguez/followers","following_url":"https://api.github.com/users/mrgerardorodriguez/following{/other_user}","gists_url":"https://api.github.com/users/mrgerardorodriguez/gists{/gist_id}","starred_url":"https://api.github.com/users/mrgerardorodriguez/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mrgerardorodriguez/subscriptions","organizations_url":"https://api.github.com/users/mrgerardorodriguez/orgs","repos_url":"https://api.github.com/users/mrgerardorodriguez/repos","events_url":"https://api.github.com/users/mrgerardorodriguez/events{/privacy}","received_events_url":"https://api.github.com/users/mrgerardorodriguez/received_events","type":"User","site_admin":false},"milestone":null,"comments":9,"created_at":"2016-05-20T05:59:09Z","updated_at":"2016-05-23T18:04:01Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/cloudfour/drizzle-builder/pulls/94","html_url":"https://github.com/cloudfour/drizzle-builder/pull/94","diff_url":"https://github.com/cloudfour/drizzle-builder/pull/94.diff","patch_url":"https://github.com/cloudfour/drizzle-builder/pull/94.patch"},"body":"Looking into the feasibility of using PostHTML to automatically prefix classes in HTML with `drizzle-` made me realize a challenge I hadn't considered. \r\n\r\nBecause it would need to be done after the Handlebars rendering, there would be no way to differentiate Drizzle UI elements from patterns:\r\n\r\n```html\r\n<!-- <drizzle> -->\r\n<div class=\"u-pad u-cf u-posRelative \">\r\n\r\n  <!-- <pattern> -->\r\n  <button class=\"Button Button--primary\">\r\n    Primary Button\r\n  </button>\r\n  <!-- </pattern> -->\r\n\r\n</div>\r\n<!-- </drizzle> -->\r\n```\r\n\r\nAll of the classes (even the pattern ones) would end up with the prefix. The PostHTML [plugin](https://github.com/stevenbenisek/posthtml-prefix-class) provides a way to ignore certain classes, but it doesn't seem applicable because the class naming schemes of both the patterns and the Drizzle UI are typically identical.\r\n\r\nSo, I thought another solution might be to rely on a Handlebars helper for the prefixing.\r\n\r\nIt works like this:\r\n\r\n```hbs\r\n{{ns \"some space-separated words\" prefix=\"ABC-\"}}\r\n{{!  ABC-some ABC-space-separated ABC-words  }}\r\n```\r\n\r\n```hbs\r\n<div class=\"{{ns 'u-pad u-cf u-posRelative' prefix='drizzle-'}}\"> \r\n  <button class=\"Button Button--primary\">\r\n    Primary Button\r\n  </button>\r\n</div>\r\n\r\n{{!\r\n<div class=\"drizzle-u-pad drizzle-u-cf drizzle-u-posRelative\">\r\n  <button class=\"Button Button--primary\">\r\n    Primary Button\r\n  </button>\r\n</div>\r\n}}\r\n```\r\n\r\nThe `drizzle-` prefix is set as a default so it isn't needed each time.\r\n\r\n/CC @tylersticka @saralohr @nicolemors "},"comment":{"url":"https://api.github.com/repos/cloudfour/drizzle-builder/issues/comments/221048309","html_url":"https://github.com/cloudfour/drizzle-builder/pull/94#issuecomment-221048309","issue_url":"https://api.github.com/repos/cloudfour/drizzle-builder/issues/94","id":221048309,"user":{"login":"mrgerardorodriguez","id":459757,"avatar_url":"https://avatars.githubusercontent.com/u/459757?v=3","gravatar_id":"","url":"https://api.github.com/users/mrgerardorodriguez","html_url":"https://github.com/mrgerardorodriguez","followers_url":"https://api.github.com/users/mrgerardorodriguez/followers","following_url":"https://api.github.com/users/mrgerardorodriguez/following{/other_user}","gists_url":"https://api.github.com/users/mrgerardorodriguez/gists{/gist_id}","starred_url":"https://api.github.com/users/mrgerardorodriguez/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mrgerardorodriguez/subscriptions","organizations_url":"https://api.github.com/users/mrgerardorodriguez/orgs","repos_url":"https://api.github.com/users/mrgerardorodriguez/repos","events_url":"https://api.github.com/users/mrgerardorodriguez/events{/privacy}","received_events_url":"https://api.github.com/users/mrgerardorodriguez/received_events","type":"User","site_admin":false},"created_at":"2016-05-23T18:04:01Z","updated_at":"2016-05-23T18:04:01Z","body":"👍 "}}
{"actor":{"display_login":"mrgerardorodriguez"}}