Getting Started - Installation | Crossroads Digital Design Kit

The following guidelines assume you have a functioning application with support for consuming NPM dependencies and compiling SCSS files at runtime.

Installing crds-styles is a two step process.

The first step involves installing crds-styles and updating your application to consume the styles provided by it. The second step requires an update to your build process so that the physical assets (SVGs) included in crds-styles get copied into your dist/ directory during a build.

Install the Styles

Execute the following command to update your application dependencies...

npm install crds-styles --save-dev

This will update the devDependencies section of your package.json file with an entry for the crds-styles package and install the new require in your local node_modules directory.

crds-styles already includes the entire Bootstrap CSS library in it’s manifest, so there’s no need to add that package as a separate dependency.

Next, import crds-styles by adding the following line within your application’s SCSS manifest file...

@import 'crds-styles/assets/stylesheets/bootstrap';

Update Your Build Process

To render the icons provided by crds-styles, the precompiled SVGs must be publicly accessible to your users.

In order to make them available across environments, we recommend copying those assets from the node_modules/crds-styles/assets directory during the build process so they can be served right alongside your application’s other bundled assets.

An example configuration for Webpack builds might look like this…

var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        context: './node_modules/crds-styles/assets/svgs/',
        from: '*.svg',
        to: 'assets/svgs'
      }
    ])
  ]
}

Crossroads has standardized on Webpack v1 at the time of this writing. If you’re using another task-runner (Angular-CLI, Gulp, etc.) to compile your application, the process may look a little different.

Restart your application and you’re done. You can now take advantage of all the styles, selectors and various patterns illustrated throughout the DDK and/or official Bootstrap documentation.