{"action":"opened","issue":{"url":"https://api.github.com/repos/fuzz-productions/Mortar-JS/issues/7","repository_url":"https://api.github.com/repos/fuzz-productions/Mortar-JS","labels_url":"https://api.github.com/repos/fuzz-productions/Mortar-JS/issues/7/labels{/name}","comments_url":"https://api.github.com/repos/fuzz-productions/Mortar-JS/issues/7/comments","events_url":"https://api.github.com/repos/fuzz-productions/Mortar-JS/issues/7/events","html_url":"https://github.com/fuzz-productions/Mortar-JS/issues/7","id":141066059,"number":7,"title":"Component styles should be pulled into their own partials and audited","user":{"login":"Kyle-Mendes","id":6400039,"avatar_url":"https://avatars.githubusercontent.com/u/6400039?v=3","gravatar_id":"","url":"https://api.github.com/users/Kyle-Mendes","html_url":"https://github.com/Kyle-Mendes","followers_url":"https://api.github.com/users/Kyle-Mendes/followers","following_url":"https://api.github.com/users/Kyle-Mendes/following{/other_user}","gists_url":"https://api.github.com/users/Kyle-Mendes/gists{/gist_id}","starred_url":"https://api.github.com/users/Kyle-Mendes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Kyle-Mendes/subscriptions","organizations_url":"https://api.github.com/users/Kyle-Mendes/orgs","repos_url":"https://api.github.com/users/Kyle-Mendes/repos","events_url":"https://api.github.com/users/Kyle-Mendes/events{/privacy}","received_events_url":"https://api.github.com/users/Kyle-Mendes/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/fuzz-productions/Mortar-JS/labels/enhancement","name":"enhancement","color":"84b6eb"}],"state":"open","locked":false,"assignee":{"login":"vagh27","id":2664316,"avatar_url":"https://avatars.githubusercontent.com/u/2664316?v=3","gravatar_id":"","url":"https://api.github.com/users/vagh27","html_url":"https://github.com/vagh27","followers_url":"https://api.github.com/users/vagh27/followers","following_url":"https://api.github.com/users/vagh27/following{/other_user}","gists_url":"https://api.github.com/users/vagh27/gists{/gist_id}","starred_url":"https://api.github.com/users/vagh27/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vagh27/subscriptions","organizations_url":"https://api.github.com/users/vagh27/orgs","repos_url":"https://api.github.com/users/vagh27/repos","events_url":"https://api.github.com/users/vagh27/events{/privacy}","received_events_url":"https://api.github.com/users/vagh27/received_events","type":"User","site_admin":false},"milestone":null,"comments":0,"created_at":"2016-03-15T18:49:52Z","updated_at":"2016-03-15T18:49:52Z","closed_at":null,"body":"This will take some significant restructuring of the CSS.\r\n\r\nBasically, every component should have their own scss partial: `_<component>.scss`.  This should contain all the styles to make that component (and only that component) work.  \r\n\r\nThen, each component needs to have className namespacing to ensure conflict-less styling and easy overwriting: `<Component className=\"mortar-{component-type}-{component} />`\r\n\r\nFinally, components that have styles that trickle down to their children (Forms, for example) need to be cleaned up and have some sort of className that trickles them down.  `<Br.Form.Input className=\"mortar-form-element mortar-form-input` />\r\n\r\nThe general idea is that all the components will have styles living in their own partials.  `_DropdownSelect.scss` for example.  From there, they will be imported into the `/components/_all.scss` partial, which is in turn imported into `main.scss`\r\n```\r\n|-- main.scss\r\n|-- components\r\n|   |-- _all.scss\r\n|   L__ form\r\n|       L__ _DropdownSelect.scss\r\n```\r\n\r\nThe component's partial should have all of its styles live completely separately from all other components. So, all classes and ids should only reference that component (I didn't do this in the work pushed to this branch yet).  \r\n\r\nAnything that needs to be shared with other components / the CMS in general should live in `/utils/...` or `/base/...`.\r\n\r\n```\r\n|-- main.scss\r\n|-- base\r\n|   L__ _all.scss\r\n|-- components\r\n|   |-- _all.scss\r\n|   L__ form\r\n|       L__ _DropdownSelect.scss\r\nL__ utils\r\n    L__ _all.scss\r\n```\r\n\r\n**Requirements**\r\n* [ ] Componenetized scss partials.\r\n* [ ] className Namespacing in the component files\r\n* [ ] Parent component namespacing and trickle-down in the scss"}}