style-guide
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.
Primary
Coral / #f96361Secondary
yellow / #fdb557Blue
Blue / #6cb4c4Peach
Peach / #ffbfa6Dark
Dark / #303536Light
#f8f8f8Waring
yellow / #e8c35eDanger
#a94442Error
#ff2b00Success
Laguna / #06b5b7Main font family is the 'Gordita' font. It's already set-up and available in the following variants:
- Normal (default font)
- Normal Italic (use '.font-italic' class)
- Medium (500) (use '.font-weight-medium' class)
- Medium Italic (use '.font-weight-medium-italic' class)
- Bold (700) (use '.font-weight-bold' class)
- Bold Italic (use '.font-weight-bold-italic' class)
- Black (900) (use '.font-weight-bolder' class)
- Black Italic (use '.font-weight-bolder-italic' class)
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.
Basic headings
h1. heading
h2. heading
h3. heading
h4. heading
h5. heading
h6. heading
Other Font Size
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.
Font Size xl
Font Size lg
Font Size base
Font Size md
Font Size sm
Font Size xs
Display headings
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.
Display 1
Display 2
Display 3
Display 4
Styled headings
Uses the '.fancy-heading' class in any H1-H6 heading.
Fancy Heading
Fancy Heading Centered
Lead
Make a paragraph stand out by adding .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Font weight and italics
Quickly change the weight (boldness) of text or italicize text.
Bold text.
Bolder weight text (relative to the parent element).
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
All button classes (size, color, variant, border radius) can be mixed and matched.
Basic Button Link
Basic button styles
Button sizes
Button states
Active StateButton border radius variants
Button group
Text Field
Text Field + Icon
Text Area
States
Checkboxes
Switches
Radios
Badges
MOST POPULARNew This Month
Members Only
Low Stock
VMP Exclusive Pressing
Pagination
Basic Select
All selects and dropdowns can be modified with Bootstrap color and size classes.
Basic Dropdown
Colors
All theme colors are available.
Floating Dropdown
Enhanced Selects
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.
With option groups
With search
With icons
You can bring icons into the select options via the data-icon attribute.
Project already imports all icons from the Ionicons family. These icons have two variants, one Android style and one iOS style (thinner).
Additionally client provided the following custom icons. These icons are embedded into the project via the Icomoon service.
