React components based on ZURB Foundation Sites using CSS modules.
Take a look at the Component Reference for an overview of
the available components with their props
and current status.
To use these components you need an assets build process (Webpack, Browserify, etc) with Sass and CSS Modules support.
- Install package:
npm install fain --save
- Install peer dependencies:
npm install foundation-sites react --save
- Setup CSS modules in your
assets build process configuration.
- Enable the
camelCase
option - Add the
node_modules
dir to yoursass.includePaths
- Enable the
Use sass-loader with css-loader.
// webpack.config.js
module.exports = {
// ...
loaders: [
//...
{
test: \/.scss?$/,
loader: [
'style-loader',
'css-loader?camelCase=1',
`sass-loader?includePaths[]=${path.resolve('./node_modules')}`
]
},
//...
],
//...
};
Themability for components is available using Foundation SASS variables.
Prepend your _settings.scss
to the files that will load the fain components.
// webpack.config.js
// ...
function getSassSettings() {
var data = fs.readFileSync(path.resolve('./styles/_settings.scss'));
return global.encodeURIComponent(data.toString('utf-8'));
}
// ...
module.exports = {
// ...
loaders: [
//...
{
test: \/.scss?$/,
loader: [
'style-loader',
'css-loader?camelCase=1',
`sass-loader?data=${getSassSettings()}&includePaths[]=${path.resolve('./node_modules')}`
]
},
//...
],
// ...
};
TODO: add babel examples of prepending a settings file
import React, { PropTypes } from 'react';
import Button from 'fain/controls/Button';
function Root() {
render() {
return (
<div>
<Button
color="primary"
size="large"
>Sign In</Button>
</div>
);
}
}
export default Root;
For more examples, head over to the Component Reference.