BrightTALK's Style Guide
This project houses all BrightTALK's digital elements, from simple buttons to error alerts, built on the shoulders of Boootstrap.
What this application does not do, is provide styled elements as functional components. Some basic code is available, but the BrightTALK Component Guide is the place to go for functional components, built with React. If you require a different implementation of functional components (for example, in Angular) this needs to be built and it is advised that the Style Guide sits at the core of your styles to remain on brand.
Bootstrap 4 is the very foundation on which the Style Guide is built. This means that plugging the Style Guide into an existing site is problematic, due to the top-level element styles it applies.
The Style Guide is built with Sass, and therefore you can cherry-pick which styles you want to use. Be aware however, there are some style rules you will need to implement yourself to fully support the look at feel, such as box model.
Currently there is no up-to-date online Style Guide. To browse the styles locally, first clone the project:
git clone email@example.com:brighttalktech/style-guide.git
Run the the Docker container:
Finally, visit http://localhost/demo/.
Adding the Style Guide to your application
yarn add git+ssh://firstname.lastname@example.org/brighttalktech/style-guide.git
The simplest way to use the styles is to include the dist/ files in your project. This has the compiled css, fonts and images you need to hit the ground running.
Alternatively, you can use the precompiled scss files and integrate them into your application's css build or css process. These files are located in src/scss.
Need to modify a style or introduce a new style altogether? See our contributing guidelines.