NEW! LIMITED RELEASE SOAP  — FREEDOM FRESH GET IT NOW

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
Orange / #de7c00
Secondary
maroon / #b3c2bf
Green
Green / #b3c2bf
Brown
Brown / #b3c2bf
Crean
Cream / #b3c2bf
Black
Black / #2c2824
Brown 100
#f4f4f3
Brown 200
#eaeae8
Brown 300
#e9e7e4
Brown 400
#e9e7e4
Brown 500
#e9e7e4
Brown 600
#e9e7e4
Brown 700
#e9e7e4
Brown 800
#e9e7e4
Brown 900
#e9e7e4
Waring
yellow / #e8c35e
Danger
#a94442
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)
  • 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)
  • ExtraBold (800) (use '.font-weight-bolder' class)
  • ExtraBold Italic (use '.font-weight-bolder-italic' class)
  • Font Family: Metropolis (font-family-base)
  • Font Family: Roboto (font-family-roboto)
  • Font Family: FF Market (font-family-ff-market)
  • Font Family: PlayBall (font-family-playball)
  • Font Family: BebasNeue (font-family-bebasNeue)

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 (50px)

h2. heading (45px)

h3. heading (30px)

h4. heading (24px)

h5. heading (20px)
h6. heading (16px)

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 (54px)

Display 4 (36px)

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

Shop Now

shop Now

Paragraph Text Link

Primary Link

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

icon-list-ol
icon-bag-icon
icon-tropics_spice
icon-tropic-red
icon-frown
icon-featuring_goat
icon-christmas
icon-gripper_step2
icon-gripper__step3
icon-gripper_step1
icon-soap
icon-snugly
icon-water_element
icon-water_drop
icon-wheat
icon-leaf
icon-no_exfoliation
icon-oak_moss
icon-rinse
icon-sailing_ship
icon-sandalwood
icon-scent_cedar
icon-scent_floral
icon-scent_forest
icon-scent_natural
icon-scrub
icon-shea
icon-featuring_mint
icon-featuring_pine
icon-featuring_salt
icon-grapefruit
icon-exfoliation_mint
icon-exfoliation_oatmeal
icon-exfoliation-oatmeal-green-3
icon-featuring_cedar
icon-featuring_hemp
icon-lather
icon-deciduous_tree
icon-euc-leaf
icon-shea_butter
icon-bowl
icon-calendar_day
icon-calendar_week
icon-cedarwood
icon-icon-stars
icon-mailbox
icon-foot-print
icon-envelope
icon-tag
icon-monthly
icon-quarterly
icon-toggle
icon-cart
icon-angle-down
icon-angle-left
icon-angle-right
icon-angle-up
icon-check
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up
icon-plus
icon-minus
icon-cross-circle
icon-cross
icon-flag
icon-Glorious-Lather
icon-ico-call
icon-champion
icon-no-chemical
icon-no-glycerin
icon-Masculine-scents
icon-plants-oil
icon-preservatives
icon-chemicals-added
icon-question-circle
icon-search
icon-star-fill
icon-star-half
icon-star
icon-twitter-square
icon-twitter
icon-user
icon-pinterest-square
icon-pinterest
icon-youtube-square
icon-youtube
icon-google-plus-square
icon-google-plus-g
icon-facebook
icon-facebook-f
icon-instagram
icon-linkedin
Shadow 1 (.shadow-1)
Shadow 2 (.shadow-2)
Shadow 3 (.shadow-3)
Shadow 4 (.shadow-4)
Shadow 5 (.shadow-5)