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 + Link
Black / #000Secondary
Blue / #0e2240Green
Green / #066Orange
Orange / #e26703Skin
#f7f1eaGray 100 / Light
#f8f9faGray 200
#ebebebGray 300
#e1e1e1Gray 400
#d5d5d5Gray 500
#b9b9b9Gray 600
#818181Gray 700
#666666Gray 800 / Dark
#2e2f3bGray 900
#292a36Danger
#dc3545Success
#066All 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.
Main font family is the 'Montserrat' font. It's already set-up and available in the following variants:
- Normal (default font)
- Normal Italic
- Medium (500) (use '.font-weight-medium' class)
- Medium Italic
- Semibold (600) (use '.font-weight-semibold' class)
- Semibold Italic
- Bold (700) (use '.font-weight-bold' class)
- Bold Italic (use '.font-weight-bold-italic' class)
Basic headings
h1. heading
h2. heading
h3. heading
h4. heading
h5. heading
h6. heading
Medium Font Size
Small Font Size
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
Secondary font family is the 'Cormorant' font. It's already set-up and available in the following variants:
- Normal (default font)
- Normal Italic
- Medium (500) (use '.font-weight-medium' class)
- Medium Italic
- Semibold (600) (use '.font-weight-semibold' class)
- Semibold Italic
- Bold (700) (use '.font-weight-bold' class)
- Bold Italic (use '.font-weight-bold-italic' class)
Basic headings
h1. heading
h2. heading
h3. heading
h4. heading
h5. heading
h6. heading
Medium Font Size
Small Font Size
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
Standard Button Font is "Montserrat", sans-serif".
Text is uppercase and letter spacing is 1.5px .
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
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.
This is content style for all over paragraph text, margin between two paragraphs. This will be common for whole site for consistancy and over all design/look for website.
Standard font size is 14px(1 rem) in all over site.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Shadow 1 (.shadow-1)
Shadow 2 (.shadow-2)
Shadow 3 (.shadow-3)
Shadow 4 (.shadow-4)
Shadow 5 (.shadow-5)
