All colors are available via Bootstrap classes. They work for both background and text.
Text Example: .text-[color]
Background Example: .bg-[color]
Read more here: Bootstrap Colors
If a new color is introduced in the future it must be brought to the project by a SASS variable ONLY so it can be available cross site.
Main font family is the 'Gordita' font. It's already set-up and available in the following variants:
All fonts are responsive by using Bootstrap's built-in responsive font sizes functionality.
Don't create custom media queries for font-sizes without any need.
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
Uses the '.fancy-heading' class in any H1-H6 heading.
Make a paragraph stand out by adding .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Quickly change the weight (boldness) of text or italicize text.
Bold text.
medium text.
Normal weight text.
Light weight text.
Italic text.
All button classes (size, color, variant, border radius) can be mixed and matched.
All selects and dropdowns can be modified with Bootstrap color and size classes.
All theme colors are available.
Project has specific needs for more enhanced selects that can't be covered from Bootstrap out of the box. We are using a specific plugin called 'Bootstrap Select' to bring enhanced dropdowns to the project. Dropdowns with support of icons, multiselect and search capabilities.
These selects accept all Bootstrap button size and color classes via the data-style attribute.
You can bring icons into the select options via the data-icon attribute.