{"action":"created","comment":{"url":"https://api.github.com/repos/DockYard/reefpoints/pulls/comments/67008354","id":67008354,"diff_hunk":"@@ -0,0 +1,245 @@\n+---\n+layout: post\n+title: \"narwin-pack a PostCSS package\"\n+social: true\n+author: Cory Tanner\n+twitter: \"ctannerweb\"\n+summary: \"After DockYard’s recent transition to PostCSS, we realized that we needed a bit more plugin organization. So we created narwin-pack. Here’s an overview of the plugins that make up narwin-pack and why our UXD team chose each PostCSS plugin.\"\n+published: true\n+tags: PostCSS, CSS\n+---\n+\n+In my last blog post, [Why DockYard transitioned to PostCSS](https://dockyard.com/blog/2016/02/11/transition-to-postcss), I explained why our UXD team adopted [PostCSS](https://github.com/postcss/postcss) into our development process.\n+\n+During the transition process we realized it would be best to only use PostCSS plugins that meet two criteria:\n+- Encourages DRY CSS\n+- Simplifies our development process\n+\n+That’s when [narwin-pack](https://github.com/DockYard/narwin-pack) was born, An easy-to-use PostCSS package that holds all six of our plugins in one easy-to-use package.\n+\n+Having many plugins bundled into one package that can easily be included in our projects is valuable to our team. It gives our UXD team a structured environment in which to develop CSS.\n+\n+If another UX developer wants to add a plugin to narwin-pack a discussion is had within the narwin-pack repository and we discuss the pros and cons of using that plugin. If everyone agrees that a plugin is needed then it will be added to narwin-pack.\n+\n+PostCSS has options for hundreds of plugins that you can include in your project. Having only one package to use for our projects provides consistency, knowing that every developeri within out team will be using the same plugins.\n+\n+The plugins in narwin-pack are as follows:\n+\n+- [postcss-partial-import](https://github.com/jonathantneal/postcss-partial-import)\n+- [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties)\n+- [postcss-nested](https://github.com/postcss/postcss-nested)\n+- [postcss-calc](https://github.com/postcss/postcss-calc)\n+- [autoprefixer](https://github.com/postcss/autoprefixer)\n+- [postcss-svg-fragments](https://github.com/jonathantneal/postcss-svg-fragments)\n+\n+# 1. postcss-partial-import\n+\n+The postcss-partial-import plugin provides a modular CSS file structure. You can have multiple CSS files and then with the help of postcss-partial-import we merge all our CSS files into one central file that the browser will use.\n+\n+The ability to have multiple CSS files but only reference one CSS file in our HTML is important for page performance. The browser now only has to ask the server for one CSS file. At the same time using multiple CSS files lets us modularly organize our CSS based on BEM [naming conventions](https://github.com/DockYard/styleguides/blob/master/ux-dev/class-naming-conventions.md) and SMACSS file architectures.\n+\n+Modular CSS file structure:\n+\n+```css\n+styles/\n+    modules/\n+        header.css\n+        footer.css\n+        nav.css\n+    base.css\n+    load.css\n+    layout.css\n+    type.css\n+```\n+Using this CSS architecture we can now add all of those CSS files into one central CSS file. Our CSS file with `@imports` to the other CSS files could look like the following:\n+\n+```css\n+@import: \"load.css\";\n+@import: \"type.css\";\n+\n+@import: \"modules/header.css\";\n+@import: \"modules/footer.css\";\n+```\n+The plugin will recognize the `@import` and add the contents of the referenced CSS files into this one CSS file.\n+\n+![](http://i.imgur.com/x6596A7.jpg)\n+\n+# 2. postcss-custom-properties\n+\n+Who doesn’t love using variables!\n+\n+The use of variables in CSS has been a hot topic lately, and eventually all browsers support will them. Firefox and chrome already have [support ](http://caniuse.com/#search=variables), but we are still waiting on Edge and mobile browser support. Until all browsers support variables, we will need a plugin.","path":"source/posts/2016-05-27-narwin-pack-the-postcss-package.md","position":71,"original_position":71,"commit_id":"50d3b64dbf8295e28e3cb74014c53cbc28907a2e","original_commit_id":"50d3b64dbf8295e28e3cb74014c53cbc28907a2e","user":{"login":"acacheung","id":1054686,"avatar_url":"https://avatars.githubusercontent.com/u/1054686?v=3","gravatar_id":"","url":"https://api.github.com/users/acacheung","html_url":"https://github.com/acacheung","followers_url":"https://api.github.com/users/acacheung/followers","following_url":"https://api.github.com/users/acacheung/following{/other_user}","gists_url":"https://api.github.com/users/acacheung/gists{/gist_id}","starred_url":"https://api.github.com/users/acacheung/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/acacheung/subscriptions","organizations_url":"https://api.github.com/users/acacheung/orgs","repos_url":"https://api.github.com/users/acacheung/repos","events_url":"https://api.github.com/users/acacheung/events{/privacy}","received_events_url":"https://api.github.com/users/acacheung/received_events","type":"User","site_admin":false},"body":"@Ctannerweb \"all browsers support will them\" has words ordered incorrectly. also i'm not sure if this is true?","created_at":"2016-06-14T16:43:00Z","updated_at":"2016-06-14T16:43:00Z","html_url":"https://github.com/DockYard/reefpoints/pull/507#discussion_r67008354","pull_request_url":"https://api.github.com/repos/DockYard/reefpoints/pulls/507","_links":{"self":{"href":"https://api.github.com/repos/DockYard/reefpoints/pulls/comments/67008354"},"html":{"href":"https://github.com/DockYard/reefpoints/pull/507#discussion_r67008354"},"pull_request":{"href":"https://api.github.com/repos/DockYard/reefpoints/pulls/507"}}},"pull_request":{"url":"https://api.github.com/repos/DockYard/reefpoints/pulls/507","id":70917187,"html_url":"https://github.com/DockYard/reefpoints/pull/507","diff_url":"https://github.com/DockYard/reefpoints/pull/507.diff","patch_url":"https://github.com/DockYard/reefpoints/pull/507.patch","issue_url":"https://api.github.com/repos/DockYard/reefpoints/issues/507","number":507,"state":"closed","locked":false,"title":"Add narwin-pack blog post","user":{"login":"Ctannerweb","id":8336499,"avatar_url":"https://avatars.githubusercontent.com/u/8336499?v=3","gravatar_id":"","url":"https://api.github.com/users/Ctannerweb","html_url":"https://github.com/Ctannerweb","followers_url":"https://api.github.com/users/Ctannerweb/followers","following_url":"https://api.github.com/users/Ctannerweb/following{/other_user}","gists_url":"https://api.github.com/users/Ctannerweb/gists{/gist_id}","starred_url":"https://api.github.com/users/Ctannerweb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Ctannerweb/subscriptions","organizations_url":"https://api.github.com/users/Ctannerweb/orgs","repos_url":"https://api.github.com/users/Ctannerweb/repos","events_url":"https://api.github.com/users/Ctannerweb/events{/privacy}","received_events_url":"https://api.github.com/users/Ctannerweb/received_events","type":"User","site_admin":false},"body":"","created_at":"2016-05-20T21:05:08Z","updated_at":"2016-06-14T16:43:00Z","closed_at":"2016-06-07T07:00:49Z","merged_at":"2016-06-07T07:00:49Z","merge_commit_sha":"a7a8878d9367fab86111d41b50da8d40ebefa159","assignee":{"login":"Ctannerweb","id":8336499,"avatar_url":"https://avatars.githubusercontent.com/u/8336499?v=3","gravatar_id":"","url":"https://api.github.com/users/Ctannerweb","html_url":"https://github.com/Ctannerweb","followers_url":"https://api.github.com/users/Ctannerweb/followers","following_url":"https://api.github.com/users/Ctannerweb/following{/other_user}","gists_url":"https://api.github.com/users/Ctannerweb/gists{/gist_id}","starred_url":"https://api.github.com/users/Ctannerweb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Ctannerweb/subscriptions","organizations_url":"https://api.github.com/users/Ctannerweb/orgs","repos_url":"https://api.github.com/users/Ctannerweb/repos","events_url":"https://api.github.com/users/Ctannerweb/events{/privacy}","received_events_url":"https://api.github.com/users/Ctannerweb/received_events","type":"User","site_admin":false},"milestone":null,"commits_url":"https://api.github.com/repos/DockYard/reefpoints/pulls/507/commits","review_comments_url":"https://api.github.com/repos/DockYard/reefpoints/pulls/507/comments","review_comment_url":"https://api.github.com/repos/DockYard/reefpoints/pulls/comments{/number}","comments_url":"https://api.github.com/repos/DockYard/reefpoints/issues/507/comments","statuses_url":"https://api.github.com/repos/DockYard/reefpoints/statuses/50d3b64dbf8295e28e3cb74014c53cbc28907a2e","head":{"label":"DockYard:ct-narwin-pack-plugins","ref":"ct-narwin-pack-plugins","sha":"50d3b64dbf8295e28e3cb74014c53cbc28907a2e","user":{"login":"DockYard","id":873981,"avatar_url":"https://avatars.githubusercontent.com/u/873981?v=3","gravatar_id":"","url":"https://api.github.com/users/DockYard","html_url":"https://github.com/DockYard","followers_url":"https://api.github.com/users/DockYard/followers","following_url":"https://api.github.com/users/DockYard/following{/other_user}","gists_url":"https://api.github.com/users/DockYard/gists{/gist_id}","starred_url":"https://api.github.com/users/DockYard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DockYard/subscriptions","organizations_url":"https://api.github.com/users/DockYard/orgs","repos_url":"https://api.github.com/users/DockYard/repos","events_url":"https://api.github.com/users/DockYard/events{/privacy}","received_events_url":"https://api.github.com/users/DockYard/received_events","type":"Organization","site_admin":false},"repo":{"id":2262874,"name":"reefpoints","full_name":"DockYard/reefpoints","owner":{"login":"DockYard","id":873981,"avatar_url":"https://avatars.githubusercontent.com/u/873981?v=3","gravatar_id":"","url":"https://api.github.com/users/DockYard","html_url":"https://github.com/DockYard","followers_url":"https://api.github.com/users/DockYard/followers","following_url":"https://api.github.com/users/DockYard/following{/other_user}","gists_url":"https://api.github.com/users/DockYard/gists{/gist_id}","starred_url":"https://api.github.com/users/DockYard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DockYard/subscriptions","organizations_url":"https://api.github.com/users/DockYard/orgs","repos_url":"https://api.github.com/users/DockYard/repos","events_url":"https://api.github.com/users/DockYard/events{/privacy}","received_events_url":"https://api.github.com/users/DockYard/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/DockYard/reefpoints","description":"DockYard Blog","fork":false,"url":"https://api.github.com/repos/DockYard/reefpoints","forks_url":"https://api.github.com/repos/DockYard/reefpoints/forks","keys_url":"https://api.github.com/repos/DockYard/reefpoints/keys{/key_id}","collaborators_url":"https://api.github.com/repos/DockYard/reefpoints/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/DockYard/reefpoints/teams","hooks_url":"https://api.github.com/repos/DockYard/reefpoints/hooks","issue_events_url":"https://api.github.com/repos/DockYard/reefpoints/issues/events{/number}","events_url":"https://api.github.com/repos/DockYard/reefpoints/events","assignees_url":"https://api.github.com/repos/DockYard/reefpoints/assignees{/user}","branches_url":"https://api.github.com/repos/DockYard/reefpoints/branches{/branch}","tags_url":"https://api.github.com/repos/DockYard/reefpoints/tags","blobs_url":"https://api.github.com/repos/DockYard/reefpoints/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/DockYard/reefpoints/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/DockYard/reefpoints/git/refs{/sha}","trees_url":"https://api.github.com/repos/DockYard/reefpoints/git/trees{/sha}","statuses_url":"https://api.github.com/repos/DockYard/reefpoints/statuses/{sha}","languages_url":"https://api.github.com/repos/DockYard/reefpoints/languages","stargazers_url":"https://api.github.com/repos/DockYard/reefpoints/stargazers","contributors_url":"https://api.github.com/repos/DockYard/reefpoints/contributors","subscribers_url":"https://api.github.com/repos/DockYard/reefpoints/subscribers","subscription_url":"https://api.github.com/repos/DockYard/reefpoints/subscription","commits_url":"https://api.github.com/repos/DockYard/reefpoints/commits{/sha}","git_commits_url":"https://api.github.com/repos/DockYard/reefpoints/git/commits{/sha}","comments_url":"https://api.github.com/repos/DockYard/reefpoints/comments{/number}","issue_comment_url":"https://api.github.com/repos/DockYard/reefpoints/issues/comments{/number}","contents_url":"https://api.github.com/repos/DockYard/reefpoints/contents/{+path}","compare_url":"https://api.github.com/repos/DockYard/reefpoints/compare/{base}...{head}","merges_url":"https://api.github.com/repos/DockYard/reefpoints/merges","archive_url":"https://api.github.com/repos/DockYard/reefpoints/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/DockYard/reefpoints/downloads","issues_url":"https://api.github.com/repos/DockYard/reefpoints/issues{/number}","pulls_url":"https://api.github.com/repos/DockYard/reefpoints/pulls{/number}","milestones_url":"https://api.github.com/repos/DockYard/reefpoints/milestones{/number}","notifications_url":"https://api.github.com/repos/DockYard/reefpoints/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/DockYard/reefpoints/labels{/name}","releases_url":"https://api.github.com/repos/DockYard/reefpoints/releases{/id}","deployments_url":"https://api.github.com/repos/DockYard/reefpoints/deployments","created_at":"2011-08-24T16:55:40Z","updated_at":"2016-03-22T14:45:00Z","pushed_at":"2016-06-14T15:58:26Z","git_url":"git://github.com/DockYard/reefpoints.git","ssh_url":"git@github.com:DockYard/reefpoints.git","clone_url":"https://github.com/DockYard/reefpoints.git","svn_url":"https://github.com/DockYard/reefpoints","homepage":"https://dockyard.com/blog","size":23804,"stargazers_count":38,"watchers_count":38,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":64,"mirror_url":null,"open_issues_count":12,"forks":64,"open_issues":12,"watchers":38,"default_branch":"master"}},"base":{"label":"DockYard:master","ref":"master","sha":"b17de8e3f4a72baaad5e7b8dd386232ab3c01a2a","user":{"login":"DockYard","id":873981,"avatar_url":"https://avatars.githubusercontent.com/u/873981?v=3","gravatar_id":"","url":"https://api.github.com/users/DockYard","html_url":"https://github.com/DockYard","followers_url":"https://api.github.com/users/DockYard/followers","following_url":"https://api.github.com/users/DockYard/following{/other_user}","gists_url":"https://api.github.com/users/DockYard/gists{/gist_id}","starred_url":"https://api.github.com/users/DockYard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DockYard/subscriptions","organizations_url":"https://api.github.com/users/DockYard/orgs","repos_url":"https://api.github.com/users/DockYard/repos","events_url":"https://api.github.com/users/DockYard/events{/privacy}","received_events_url":"https://api.github.com/users/DockYard/received_events","type":"Organization","site_admin":false},"repo":{"id":2262874,"name":"reefpoints","full_name":"DockYard/reefpoints","owner":{"login":"DockYard","id":873981,"avatar_url":"https://avatars.githubusercontent.com/u/873981?v=3","gravatar_id":"","url":"https://api.github.com/users/DockYard","html_url":"https://github.com/DockYard","followers_url":"https://api.github.com/users/DockYard/followers","following_url":"https://api.github.com/users/DockYard/following{/other_user}","gists_url":"https://api.github.com/users/DockYard/gists{/gist_id}","starred_url":"https://api.github.com/users/DockYard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DockYard/subscriptions","organizations_url":"https://api.github.com/users/DockYard/orgs","repos_url":"https://api.github.com/users/DockYard/repos","events_url":"https://api.github.com/users/DockYard/events{/privacy}","received_events_url":"https://api.github.com/users/DockYard/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/DockYard/reefpoints","description":"DockYard Blog","fork":false,"url":"https://api.github.com/repos/DockYard/reefpoints","forks_url":"https://api.github.com/repos/DockYard/reefpoints/forks","keys_url":"https://api.github.com/repos/DockYard/reefpoints/keys{/key_id}","collaborators_url":"https://api.github.com/repos/DockYard/reefpoints/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/DockYard/reefpoints/teams","hooks_url":"https://api.github.com/repos/DockYard/reefpoints/hooks","issue_events_url":"https://api.github.com/repos/DockYard/reefpoints/issues/events{/number}","events_url":"https://api.github.com/repos/DockYard/reefpoints/events","assignees_url":"https://api.github.com/repos/DockYard/reefpoints/assignees{/user}","branches_url":"https://api.github.com/repos/DockYard/reefpoints/branches{/branch}","tags_url":"https://api.github.com/repos/DockYard/reefpoints/tags","blobs_url":"https://api.github.com/repos/DockYard/reefpoints/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/DockYard/reefpoints/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/DockYard/reefpoints/git/refs{/sha}","trees_url":"https://api.github.com/repos/DockYard/reefpoints/git/trees{/sha}","statuses_url":"https://api.github.com/repos/DockYard/reefpoints/statuses/{sha}","languages_url":"https://api.github.com/repos/DockYard/reefpoints/languages","stargazers_url":"https://api.github.com/repos/DockYard/reefpoints/stargazers","contributors_url":"https://api.github.com/repos/DockYard/reefpoints/contributors","subscribers_url":"https://api.github.com/repos/DockYard/reefpoints/subscribers","subscription_url":"https://api.github.com/repos/DockYard/reefpoints/subscription","commits_url":"https://api.github.com/repos/DockYard/reefpoints/commits{/sha}","git_commits_url":"https://api.github.com/repos/DockYard/reefpoints/git/commits{/sha}","comments_url":"https://api.github.com/repos/DockYard/reefpoints/comments{/number}","issue_comment_url":"https://api.github.com/repos/DockYard/reefpoints/issues/comments{/number}","contents_url":"https://api.github.com/repos/DockYard/reefpoints/contents/{+path}","compare_url":"https://api.github.com/repos/DockYard/reefpoints/compare/{base}...{head}","merges_url":"https://api.github.com/repos/DockYard/reefpoints/merges","archive_url":"https://api.github.com/repos/DockYard/reefpoints/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/DockYard/reefpoints/downloads","issues_url":"https://api.github.com/repos/DockYard/reefpoints/issues{/number}","pulls_url":"https://api.github.com/repos/DockYard/reefpoints/pulls{/number}","milestones_url":"https://api.github.com/repos/DockYard/reefpoints/milestones{/number}","notifications_url":"https://api.github.com/repos/DockYard/reefpoints/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/DockYard/reefpoints/labels{/name}","releases_url":"https://api.github.com/repos/DockYard/reefpoints/releases{/id}","deployments_url":"https://api.github.com/repos/DockYard/reefpoints/deployments","created_at":"2011-08-24T16:55:40Z","updated_at":"2016-03-22T14:45:00Z","pushed_at":"2016-06-14T15:58:26Z","git_url":"git://github.com/DockYard/reefpoints.git","ssh_url":"git@github.com:DockYard/reefpoints.git","clone_url":"https://github.com/DockYard/reefpoints.git","svn_url":"https://github.com/DockYard/reefpoints","homepage":"https://dockyard.com/blog","size":23804,"stargazers_count":38,"watchers_count":38,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":64,"mirror_url":null,"open_issues_count":12,"forks":64,"open_issues":12,"watchers":38,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/DockYard/reefpoints/pulls/507"},"html":{"href":"https://github.com/DockYard/reefpoints/pull/507"},"issue":{"href":"https://api.github.com/repos/DockYard/reefpoints/issues/507"},"comments":{"href":"https://api.github.com/repos/DockYard/reefpoints/issues/507/comments"},"review_comments":{"href":"https://api.github.com/repos/DockYard/reefpoints/pulls/507/comments"},"review_comment":{"href":"https://api.github.com/repos/DockYard/reefpoints/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/DockYard/reefpoints/pulls/507/commits"},"statuses":{"href":"https://api.github.com/repos/DockYard/reefpoints/statuses/50d3b64dbf8295e28e3cb74014c53cbc28907a2e"}}}}
{"actor":{"display_login":"acacheung"}}