From Design Mockup to Code

Objective

Follow the steps below to build efficiently and consistently with the Bolt Design System.

1. Know every Bolt component

Go through https://boltdesignsystem.com/ and study each Bolt component. Make sure you understand what they do and what customization options each component has.

2. Indicate things in a design mockup as Bolt components

Take a look at the overall layout, see if anything on the layout looks exactly like an existing Bolt component or resembles closely to it.

3. Build a prototype with just Bolt components

Take what you found in step 2 and actually build out the layout. Use semantic HTML placeholders for anything that absolutely doesn't resemble any component. For example, if the thing is some kind of list, use vanilla ol or ul as a placeholder.

4. Compare discrepancies with a designer

If the prototype you built looks vastly different than the design mockup, take it to the designer and sit with them to compare the discrepancies. The designer should have a good idea of what components to use. If not, the designer will tell you to use overrides or build something new.

4.1. Customize the component

Each component has customization options, the schema table on the component's Pattern Lab page should indicate everything that you can customize. Play around with all the options. See Customize Component with Schema page.

4.2. Apply utility overrides

When playing around with the customization options of a component doesn't get you what the designer wants, resort to use utilities. Try to use only a few and not override everything that a component does. See Override with Utility Classes page.

4.3. Build something new

If customization options and utilities can't do the job, resort to build a one-off snowflake (if the thing is not going to be used anywhere else) or a new Bolt component. If you have time to officially build out a new Bolt component, please consult the Bolt team.

4.4. Submit new component to Bolt

If you built something new that is reusable, let the Bolt team know. Submit a formal JIRA ticket to Bolt's backlog or a pull request to the Bolt repo if you are confident with your code. Bolt team will review and add it officially to the design system.

5. Polish your build

Based on your discussion with the designer, polish it up for a production version.