cosmo-ui

cosmo-ui-components

Common React components for designing user interfaces

Installation

npm install -D cosmo-ui

This project assumes you are using a module bundler that allows you to require scss files such as webpack.

Any css created by the cosmo-ui components will be compiled into your own bundled css, and you will have the opportunity to overwrite it before it is compiled. As such, you must configure your module bundler to allow scss files to be required. It is recommended that you use webpack 2 with css modules as follows:

const extractSASS = new ExtractTextPlugin('/[name].css')

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                loader: extractSASS.extract(['css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]', 'postcss-loader', 'sass-loader'])
            }
        ]
    },
    plugins: [
        extractSASS
    ]
}

Configure the sass variables

The default variables are located at src/styles/_variables.scss. Any of these variables names can be overridden using the following steps:

1. add a "styles" alias to your webpack config to specify which folder contains your own styles. e.g.

alias: {
    styles: './path/to/my/styles/folder',
}

Now everytime you try to import something from the "styles" folder, webpack will refer to this location.

1. Inside your styles folder, add a file called _variables.scss.

2. Inside the variables file, you can now modify the variables as you wish. When you overwrite a variable be sure to remove the !default tag from the end.

This works because behind the scenes each component will attempt to import 2 variable files:

@import "~styles/variables";
@import "../variables";

The first is your custom variables file. The second is the default fallback.