0.9.0 • Published 7 years ago
fain-src v0.9.0
fain
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.
Install
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
Webpack
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')}`
]
},
//...
],
//...
};
Customization
Themability for components is available using Foundation SASS variables.
Webpack
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
Usage
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.