{"action":"opened","issue":{"url":"https://api.github.com/repos/gajus/react-css-modules/issues/57","labels_url":"https://api.github.com/repos/gajus/react-css-modules/issues/57/labels{/name}","comments_url":"https://api.github.com/repos/gajus/react-css-modules/issues/57/comments","events_url":"https://api.github.com/repos/gajus/react-css-modules/issues/57/events","html_url":"https://github.com/gajus/react-css-modules/issues/57","id":115251756,"number":57,"title":"Working with a CSS framework","user":{"login":"mr-wildcard","id":6979207,"avatar_url":"https://avatars.githubusercontent.com/u/6979207?v=3","gravatar_id":"","url":"https://api.github.com/users/mr-wildcard","html_url":"https://github.com/mr-wildcard","followers_url":"https://api.github.com/users/mr-wildcard/followers","following_url":"https://api.github.com/users/mr-wildcard/following{/other_user}","gists_url":"https://api.github.com/users/mr-wildcard/gists{/gist_id}","starred_url":"https://api.github.com/users/mr-wildcard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mr-wildcard/subscriptions","organizations_url":"https://api.github.com/users/mr-wildcard/orgs","repos_url":"https://api.github.com/users/mr-wildcard/repos","events_url":"https://api.github.com/users/mr-wildcard/events{/privacy}","received_events_url":"https://api.github.com/users/mr-wildcard/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-11-05T10:17:12Z","updated_at":"2015-11-05T10:17:12Z","closed_at":null,"body":"This isn't directly related to react-css-modules, but I'm working on project with a similar stack and I'm planning to use CSS Modules.\r\nI'm having difficulty wrapping my head around how to combine CSS modules in conjunction with a CSS framework like Foundation ou TB.\r\n\r\nSay I have this stateless component function:\r\n\r\n```javascript\r\nvar Header = () => (\r\n\t<header styleName=\"root\">\r\n\t\t<div className=\"small-10 columns\">\r\n\t\t\t<img styleName=\"logo\" src=\"/images/logo.png\" alt=\"Logo\" />\r\n\t\t</div>\r\n\t\t<div className=\"small-2 columns\">\r\n\t\t\t<a href=\"/logout\" styleName=\"logout\" className=\"button tiny\">\r\n\t\t\t\t<i className=\"icon-logout\"></i>\r\n\t\t\t\tLogout\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</header>\r\n);\r\n```\r\n\r\nAll `styleName`'s are correctly scoped to my component. But, `small-10`, `columns`, `button`, `tiny` are Foundation's classes, `icon-logout` comes from a custom fontello build. These classes are used pretty much everywhere in my project. \r\n\r\nI could simply append another `<link href=\"my-custom-foundation-build.css\" rel=\"stylesheet\"/>` into the `<head>` of my document, but I feel like this is not what CSS modules are trying to teach me :)\r\n\r\nWhat is the recommended way to deal with this ?\r\n\r\n"}}