Build a New Component

Objective

Create something reusable that the Bolt Design System doesn't offer. Consider the following when building a new component.

1. Make sure it's not for a one-off scenario

Think about what you are building, is it for a specific page or layout? Can it work elsewhere? If you think it's reusable, go ahead and continue.

2. Build a component the official way

Pull down the master branch of Bolt and follow the official instructions.

View an example twig file.

3. Name your CSS using BEM convention

BEM stands for block element modifier, the TL:DR is to name all your CSS as such: .block__element--modifier. You can read more about it here.

4. Name your CSS using Bolt prefix

In addition to using the BEM convention, also prefix it with .c-bolt-.

Example

.c-bolt-button { ... }
.c-bolt-button--primary { ... }
.c-bolt-button--secondary { ... }
.c-bolt-button__text { ... }
.c-bolt-button__text--uppercase { ... }
.c-bolt-button__text--capitalize { ... }

5. Use a class, don't style naked elements

Always use classes for your CSS, do not just style generic HTML tags. The classes will encapsulate everything you define for the component and prevent them from bleeding into other things.

This is bad!

p {
  font-size: 24px;
  color: red;
}

This is also bad!

.c-bolt-button > span {
  background-color: red;
}

6. Create a schema

Think about customization, what options do your want to enable for the consumers? Some common options include color, spacing, and alignment. Create a schema for all the customization options.

7. Submit to the Bolt team

Once you are done, you need to tell the Bolt team about it.

7.1. Create a formal JIRA ticket

Write ticket and add it to the Bolt backlog.

7.2. Create a pull request

By creating a pull request on Github, you will notify the Bolt team. Request one of the Bolt developers to review your code right in the Github interface.