pure-css

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.

Version

1.0.1 uses purecss 0.6.0

Installation

npm install pure-css --save-dev

Usage

Simply import your pure css module

import { buttons, grids } from 'pure-css'

Then use it for styling your elements.

<div styleName='pure-g'>
</div>

Example

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);

License

MIT