fain's Introduction

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 your sass.includePaths

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;