Build a One Off Snowflake

Objective

Create something new that's not offered by the Bolt Design System, and it is supposed to be used for an edge case or one particular page. Keep the following in mind when you are building a snowflake.

1. Make sure there is absolutely no existing component that satisfies your needs

This goes without saying but it is always good to double check first on https://boltdesignsystem.com/.

2. Make sure this is for a one-off scenario

If you think there is reusability, stop right now. It is not a snowflake, you would want to build a new component.

3. Write your CSS with unique prefix

Since a snowflake does not and should not belong to Bolt, do not use the .c-bolt prefix. You can prefix it with something like .c-base. See full list of prefixes and namespaces.

4. Build with Bolt settings and tools

Bolt settings and tools consist of many common base styles, such as:

• margin
• padding
• breakpoints
• colors
• typography
• spacing
• shadows
• z-index

Even though you are building a snowflake, you can still use these settings (SCSS and CSS variables) and tools (SCSS functions and mixins) from Bolt. This way, whatever you build still feels consistent with the design system. Another benefit would be internationalization support, take Japanese for example, Bolt has specific leading, font-size, and spacing system for it. If you build with Bolt settings and tools, everything will translate well visually. Settings and tools are located in /packages/core/styles.

5. Do not build with Bolt utilities

I hope I've said it enough times that you'd get the point.

6. If you are second guessing yourself and think this isn't a one-off scenario

Submit your code and demo to the Bolt team. Create a formal JIRA ticket to request this to be added as an official Bolt component.