{"action":"created","issue":{"url":"https://api.github.com/repos/cfpb/capital-framework/issues/340","repository_url":"https://api.github.com/repos/cfpb/capital-framework","labels_url":"https://api.github.com/repos/cfpb/capital-framework/issues/340/labels{/name}","comments_url":"https://api.github.com/repos/cfpb/capital-framework/issues/340/comments","events_url":"https://api.github.com/repos/cfpb/capital-framework/issues/340/events","html_url":"https://github.com/cfpb/capital-framework/issues/340","id":166092567,"number":340,"title":"Atomic Design Workflow","user":{"login":"jimmynotjim","id":1280430,"avatar_url":"https://avatars.githubusercontent.com/u/1280430?v=3","gravatar_id":"","url":"https://api.github.com/users/jimmynotjim","html_url":"https://github.com/jimmynotjim","followers_url":"https://api.github.com/users/jimmynotjim/followers","following_url":"https://api.github.com/users/jimmynotjim/following{/other_user}","gists_url":"https://api.github.com/users/jimmynotjim/gists{/gist_id}","starred_url":"https://api.github.com/users/jimmynotjim/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jimmynotjim/subscriptions","organizations_url":"https://api.github.com/users/jimmynotjim/orgs","repos_url":"https://api.github.com/users/jimmynotjim/repos","events_url":"https://api.github.com/users/jimmynotjim/events{/privacy}","received_events_url":"https://api.github.com/users/jimmynotjim/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/cfpb/capital-framework/labels/atomic%20design","name":"atomic design","color":"c2e0c6"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-07-18T13:24:28Z","updated_at":"2016-07-20T17:07:13Z","closed_at":null,"body":"Helpful instructions and tips for converting existing components to Atomic Design Organization\r\n\r\n__Install CF Sandbox__\r\n\r\n1. Follow the [installation instructions](https://github.com/jimmynotjim/capital-framework-sandbox#installation).\r\n2. Click around to ensure the local server is rendering the sandbox correctly.\r\n3. Stop the server (ctrl+c).\r\n\r\n__Link your component__\r\n\r\n1. Navigate to the root of your component (not the CF repo) \r\n\r\n   `cd capital-framework/src/cf-pagination`\r\n2. Run the NPM Link command\r\n\r\n   `npm link`\r\n3. In a new tab navigate to the root of CF Sandbox\r\n\r\n   `cd capital-framework-sandbox`\r\n4. Run the component NPM Link command\r\n\r\n   `npm link cf-pagination`\r\n5. Run the Gulp styles command\r\n\r\n   `gulp styles`\r\n6. Start the server and check out the changes\r\n\r\n   `npm start`\r\n\r\n_When you’re done working on or reviewing a component, run `npm unlink component-name && npm install component-name`_\r\n\r\n__Building your component__\r\n\r\n1. In CF Sandbox create a new preview branch, start the server, and adjust markup as needed\r\n\r\n  ```sh\r\n  cd /capital-framework-sandbox\r\n  git checkout -b cf-pagination-example\r\n  npm start\r\n  ```\r\n2. Checkout the v4 branch of CF\r\n\r\n  ```sh\r\n  cd /capital-framework\r\n  git checkout prerelease-ver-4\r\n  ```\r\n3. Create a new branch for your atomic component\r\n\r\n  ```sh\r\ngit checkout -b atomic/pagination\r\n```\r\n4. Save your changes\r\n5. When you save, CF Sandbox will build the files (may still need a manual page refresh)\r\n\r\n__Code organization__\r\n\r\nBoth prefixing and organizing elements by their type is the easiest way to keep track of them. All elements should be prefixed by the first letter of it's type (ex `m-pagination`) and placed in a corresponding directory (ex. `/src/molecules/pagination.less`). To save yourself the trouble of moving things multiple times, we found it easiest to break up the component in it's top level stylesheet, then move each class to it's appropriate sub-directory.\r\n\r\n__Questions__\r\n\r\nFeel free to ask questions or post your own tips here or in the Atomic Design channel.\r\n"},"comment":{"url":"https://api.github.com/repos/cfpb/capital-framework/issues/comments/234014575","html_url":"https://github.com/cfpb/capital-framework/issues/340#issuecomment-234014575","issue_url":"https://api.github.com/repos/cfpb/capital-framework/issues/340","id":234014575,"user":{"login":"jimmynotjim","id":1280430,"avatar_url":"https://avatars.githubusercontent.com/u/1280430?v=3","gravatar_id":"","url":"https://api.github.com/users/jimmynotjim","html_url":"https://github.com/jimmynotjim","followers_url":"https://api.github.com/users/jimmynotjim/followers","following_url":"https://api.github.com/users/jimmynotjim/following{/other_user}","gists_url":"https://api.github.com/users/jimmynotjim/gists{/gist_id}","starred_url":"https://api.github.com/users/jimmynotjim/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jimmynotjim/subscriptions","organizations_url":"https://api.github.com/users/jimmynotjim/orgs","repos_url":"https://api.github.com/users/jimmynotjim/repos","events_url":"https://api.github.com/users/jimmynotjim/events{/privacy}","received_events_url":"https://api.github.com/users/jimmynotjim/received_events","type":"User","site_admin":false},"created_at":"2016-07-20T17:07:13Z","updated_at":"2016-07-20T17:07:13Z","body":"Ans and I discussed what should and shouldn't be updated to an atomic element during the workshop today. The guidelines we came up with are:\r\n\r\n- If it can't stand on it's own as an element, for example a paragraph or list item have minimal styles added to them and don't need a class name every time they are used, but a button is more complex and so it should be atomized.\r\n- If it's not a utility, utilities are adjustments and helpers, not elements that can stand on their own, and don't need to be atomized (another example are the layout styles, though we discussed those should probably get a `u-` prefix).\r\n\r\nDoes everyone agree, disagree, fall somewhere in the middle? I'm sure we'll discover more instances as we move along, so feel free to discuss here as that happens."}}
{"actor":{"display_login":"jimmynotjim"}}