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
Green / #85C444
Secondary
Coral / #b3c2bf
Dark
Black / #313132
Yellow
Yellow / #FFE360
Info
Blue / #6CC6D1
Gray
gray-100 / #F9F9F9
Light Pink
light-pink / #fff0ed
Light Blue
light-blue / #DAF1F3
Light Yellow
light-yellow / #FFFAE1
Light Green
light-green / #E8F4DB
warning
yellow / #FFE360
Danger
red / #dc3545
Success
green / #85C444
Gray 200
gray-200 / #EAEAEA
Gray 300
gray-300 / #E0E0E0
Gray 400
gray-400 / #CBCBCC
Gray 500
gray-500 / #B7B7B7
Gray 600
gray-600 / #6c757d
Gray 700
gray-700 / #989898
Gray 800
gray-800 / #656565
Gray 900
gray-900 / #1B1B1C

Main font family is the 'Red Hat Text' 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)
  • Semibold (600) (use '.font-weight-semibold' class)
  • Semibold Italic (use '.font-weight-semibold-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 (40px)

h2. heading (32px)

h2. heading (16px)

h3. heading (28px)

h4. heading (26px)

h4. heading (20px)

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

Shop Now

Paragraph Text Link

Primary Link

Basic button styles

Button styles 1

Button sizes

Button states

Active State

Button border radius variants

Button group

Text Field
Text Field + Icon
Text Area
States
Checkboxes
Switches
Radios
Badges
on sale

free shipping
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

icon-account
icon-search
icon-cart
icon-close
Shopping Cart

Your cart is currently empty.

All subscriptions SHIP FREE! FREE TRAINING KIT and POO BAGS with your first subscription order.