Highbeam Design System

Under Construction

Highbeam Design System is built by Brad Siefert and the Earlybird/Highbeam team. It's the design principles and user interface elements that make up our products. It's meant to be a reference guide to quickly and consistently create web apps for our clients.

Framework

This design system is built on top of Bootstrap v5, which is still in its alpha phase. There are many updates to come, but I don't think it will break much (if any) of this design system. I've tried my best to, if at all possible, update SCSS variables first, then write custom CSS to augment those changes. I think this will help to make updates to go more smoothly. The variables-highbeam.scss file has the same order of variables as Bootstrap v5's variables.scss file to make it easier to compare the two files.

There are many ways to use a front-end framework like Bootstrap and I've tried to stay as true to the "Bootstrap way" of building components. There will be some custom classes and small differences, but overall, it should be well within the standards of someone who has used Bootstrap's framework before.

I will not be copying Bootstrap's wonderful documentation line for line. I'm focusing on clearly defining the UI elements and components to be explained and copied for use in your web apps. Please consult Bootstrap's documentation for more information about utilities, classes, and their design principles.

Release Notes