Installation

How to install and start using Remix CSS.

At its core, Remix CSS is really just a set of LessCSS stylesheets that can be used in conjunction with your own styles. Integrating the Remix CSS styles should be done via a theme file (located in the root directory of the Remix CSS folder). The theme file is basically a collection of LessCSS variables (see the theming section for more information).

Install via NPM

Installing via NPM is very easy. Simply run the following command in your terminal.

$ npm install --save remix-css

This will add the remix-css folder to your node_modules folder.

Import the Theme File

To use the entire Remix CSS style library, import a theme file into your main stylesheet. You can either create your own theme file or use the default theme included in the root directory of the Remix CSS package folder.

To import the theme file, use a standard LessCSS import and add your own styles below it...

@import './node_modules/remix-css/default.theme.less';

Using the Webpack Resolver

When using the less-loader with Webpack, the webpack resolver is used for your imports by default unless you use the paths option. It's recommended to avoid using the paths option so the Webpack resolver can be used along with the alias option.

When using the Webpack resolver with the less-loader, remember to use the ~ with your import statements to point to packages in the node_modules folder. So if you create your own theme file locally when using the Remix CSS package, you can import the Remix CSS styles at the bottom of it using the following path...

@import '~remix-css/src/less/styles.less';