A css module compatible version of purecss.
You will need to use react-css-modules to make use of the class names as purecss classes are not camelCase.
It would be possible to make a version compatible to just css modules, however most implementations of a virtual dom should have a higher order component for allowing normal class names and this will be the future direction for css modules.
It could also be an approach to rewrite the current style names in pure to be more compatible with css modules, see issue #1.
npm install pure-css --save-dev
Simply import your pure css module
import { buttons, grids } from 'pure-css'
Then use it for styling your elements.
<div styleName='pure-g'>
</div>Check out the full working example here
import React from 'react'
import CSSModules from 'react-css-modules'
import { buttons, grids } from 'pure-css'
let styles = {}
Object.assign(styles, grids, buttons)
class Test extends React.Component {
render () {
return (
<div styleName='pure-g'>
<div styleName="pure-u-1">
<button styleName='pure-button'>A button in a grid</button>
</div>
</div>
);
}
}
export default CSSModules(Test, styles);