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

Open Menu
Close Menu
Edit on Github

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.