These are the docs for a previous release of the Bolt Design System. Looking for the latest stable release, v2.25.0?

Getting Started

Create bolt config file

Create a file called .boltrc.js with:

module.exports = { buildDir: 'www/build', components: { global: [ ], individual: [ ], }, };

Install Build Tools

Ensure you have a package.json file, if not, run npm init.

npm install --save @bolt/build-tools

Add this to your package.json:

"scripts": {
+   "build": "bolt build",
+   "build:prod": "NODE_ENV=production bolt build",
+   "start": "bolt start"
}

Consider adding global styling

All global styles are kept in a single package, if you'd like it, run:

npm install --save @bolt/global

Then add it to .boltrc.js:

module.exports = {
  buildDir: 'www/build',
  components: {
    global: [
+     '@bolt/global', 
    ],
    individual: [
    ],
  },
};

Install Components

Install any Bolt Component via npm as it's docs suggest. If you were going to install the Card, you'd run:

npm install --save @bolt/components-card

Then add it to .boltrc.js:

module.exports = {
  buildDir: 'www/build',
  components: {
    global: [
      '@bolt/global', 
+     '@bolt/components-card', 
    ],
    individual: [
    ],
  },
};

Continue to do so with as many components as you'd like.

Build It

Run this to build:

npm run build

You can optionally run npm run build:prod for smaller files sizes - though it does take longer. CI should run this command.

All files will build to the directory you've configured as your buildDir.