brighttalk/style-guide repository overview

⁠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

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.

⁠Browsing styles

Currently there is no up-to-date online Style Guide. To browse the styles locally, first clone the project: git clone [email protected]:brighttalktech/style-guide.git

Install dependencies:

yarn install

Run the the Docker container: docker-compose up

Finally, visit http://localhost/demo/⁠.

⁠Adding the Style Guide to your application

yarn add git+ssh://[email protected]/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.

⁠Contributing

Need to modify a style or introduce a new style altogether? See our contributing guidelines⁠.