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

JavaScript Architecture

Write with ES2015 (ES6)

  • JavaScript is written out using [ECMAScript 2015 features]( (let, const, import, arrow functions, etc) and transpiled via [Babel]( for precise cross browser compatibility.

📝 Note: Bolt ships with our own customized Babel config present and plugins to ensure our coding standards and conventions are transpired based on our current browser support.

  • Component-specific JavaScript should use [ES2015 Classes]( , allowing for object oriented-like features in JavaScript (constructors, inheritance, prototypes, mixins, etc) — see Custom Elements section below.

JavaScript Templating and Rendering

  • Dynamic JavaScript templating and client-side rendering is primarily handled via [Preact]( and [JSX](

    * Links a component’s appearance with the data getting passed into it. * As an added benefit, this allows us to tap into the plethora of off the shelf libraries, resources and tutorials that wouldn’t be possible via a custom in-house solution.

These docs will continue to be updated accordingly however it's clear that JSX and Template literal rendering options are a vital part of the direction we're heading in (more of just a question on whether that's via one or a small handful of options). 😉

Framework-less Custom Elements

  • Bolt components are written out as native browser custom elements through the help of [SkateJS](, a tiny JavaScript library that helps to simplify some of the syntax in writing components without the bloat from other libraries like Polymer.

  • This provides us with features and conventions found in most modern day JavaScript frameworks like [React]( , [Angular]( , [Preact]( or [Vue]( (constructors, built-in methods, properties, event listeners, etc) — without requiring a headless Drupal implementation or steep upfront costs.

@bolt/core For Shared Dependencies

  • JavaScript dependencies [shared across Bolt components]( (think 3rd party libraries like SkateJS or Preact, in addition to Bolt-specific helper functions), are centrally maintained and distributed via a single NPM package, `@bolt/core`.

Async JavaScript via import

  • Bolt supports [asynchronous JavaScript imports]( via [Webpack]( and Babel which allows chunks of JavaScript to be conditionally loaded in a way that is customizable, scalable and performant.

import(/* webpackMode: 'eager', webpackChunkName: 'bolt-button' */ '@bolt/components-button');

Polyfill Features, Not Browsers

  • @bolt/core also ships with a Polyfill loader to conditionally load JavaScript polyfills based on the features supported by the user’s browser
  • Older browsers get the compatibility they need and newer browsers aren’t bogged down by downloading and running unnecessary code.

Dynamic Data = More Maintainable, Consistent Components

  • Whenever possible, components should pull in and reference dynamic data created directly from the codebase when configuring what options or parameters a particular component should allow.
  • For example, our Icon component’s allowed icon sizes are directly tied in with the [JSON data]( exported from our spacing scale. Update the scale in one place, the related components are updated automatically.

Component-specific JavaScript Lives with the Component

  • This improves component maintainability and simplifies the consumption and integration by other developers. Other component-specific assets (Sass, Twig templates, Markdown docs, and so on) follow this convention as well.

JavaScript Coding Standards via Eslint

  • Bolt’s JavaScript coding standards use the gold standard of JavaScript linting, AirBnB’s eslint config, as a base and make a few tweaks accordingly.
  • For reference, the eslint-config-aribnb package has well over 65,000 stars on Github and currently is seeing over 2 million installs from NPM a month.