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
Azure / #0069ff
White
#ffffff
Black
#000000
Alt Black
Midnight / #001533
Light Gray
#001533
Gray
#001533
Alert
Mandarin / #001533
Seagrass
#009193
Berry
#6b3780
Cherrywood
#ce6851
Aqua
#7effDB
Lemon
#ffd601
Sky
#98d2f9
Neon
#8f2df5
Laguna
#06b5b7
Candy
#ffabc8
Violet
#8884ff
Cobalt
#0000ff
Danger
#a94442
Strawberry
#ff2f92
Lavender
#d2c4f9
Navy
#253d9e
Gold
#f5ab00
Coral
#fe5157
Caution
Lemon / #ffd601
Error
#ff2b00
Success
Laguna / #06b5b7

Main 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)
  • Bold (700) (use '.font-weight-bold' class)
  • Bold Italic (use '.font-weight-bold-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

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 styles

Button sizes

Button states

Active State

Button border radius variants

Button group

Text Field
Text Field + Icon
Text Area
States
Checkboxes
Switches
Radios
Badges
MOST POPULAR
New 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.

Full list of other options.

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.

Custom Icons

vmp-icon-arrow-down
vmp-icon-arrow-left
vmp-icon-arrow-right
vmp-icon-arrow-up
vmp-icon-back
vmp-icon-forward
vmp-icon-calendar
vmp-icon-cart
vmp-icon-chat
vmp-icon-cocktail
vmp-icon-copy
vmp-icon-crown
vmp-icon-delete
vmp-icon-dial
vmp-icon-dribbble
vmp-icon-edit
vmp-icon-facebook
vmp-icon-google
vmp-icon-guitar
vmp-icon-hamburger
vmp-icon-heart
vmp-icon-instagram
vmp-icon-levels
vmp-icon-lightning
vmp-icon-lock
vmp-icon-logomark
vmp-icon-mic
vmp-icon-minus
vmp-icon-music
vmp-icon-notifications
vmp-icon-overflow
vmp-icon-pinterest
vmp-icon-play
vmp-icon-play-coloured
vmp-icon-plus
vmp-icon-power
vmp-icon-preferences
vmp-icon-progress
vmp-icon-record
vmp-icon-record-coloured
vmp-icon-record-classics
vmp-icon-record-essentials
vmp-icon-record-rap-hip-hop
vmp-icon-remove
vmp-icon-required
vmp-icon-resizer
vmp-icon-retro-mic
vmp-icon-search
vmp-icon-send
vmp-icon-settings
vmp-icon-skype
vmp-icon-slack
vmp-icon-speaker
vmp-icon-spotify
vmp-icon-star
vmp-icon-star-filled
vmp-icon-star-filled-coloured
vmp-icon-stylus
vmp-icon-success
vmp-icon-track
vmp-icon-twitter
vmp-icon-user
vmp-icon-youtube
Shadow 1 (.shadow-1)
Shadow 2 (.shadow-2)
Shadow 3 (.shadow-3)
Shadow 4 (.shadow-4)
Shadow 5 (.shadow-5)
Shopping Cart

Your cart is currently empty.

Continue Browsing
${ accountModal.body }
Free shipping for members
Safe & secure checkout
International shipping
Quality guarantee