Current Display: Mobile (below Tablet Portrait)

Current Display: Tablet Portrait

Current Display: Desktop (Tablet Landscape and up)

Smashbox Styleguide


Table of Contents


Standard Headings

Heading 1

Heading 2

Heading 3

Heading 4


Hero Headings and Text

This includes all of the possible combinations available in the CMS

Current Font Face Options:
  • Knockout 29

  • Knockout 47

  • Knockout 49

  • Monospace (Courier New)


Current Font Size Options - Knockout 29:

  • Small
    line 2
  • Medium
    line 2
  • Large
    line 2
  • X Large
    line 2
  • XX Large
    line 2

Current Font Size Options - Knockout 47:

  • Small
    line 2
  • Medium
    line 2
  • Large
    line 2
  • X Large
    line 2
  • XX Large
    line 2

X Large font--knockout47
line wrap

Current Font Size Options - Knockout 49:

  • Small
    line 2
  • Medium
    line 2
  • Large
    line 2
  • X Large
    line 2
  • XX Large
    line 2

Current Font Size Options - Monospace (Courier New):

  • Small
    line 2
  • Medium
    line 2
  • Large
    line 2
  • X Large
    line 2
  • XX Large
    line 2

Headings with Text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 3

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 4

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Figure-Caption

A placeholder figure image.
The figcaption element example

Details-Summary

The summary element example

The details example text. It may be styled differently based on what browser or operating system you are using.

Validation Text

ERROR - Donec ullamcorper nulla non metus auctor fringilla.

WARNING - Etiam porta sem malesuada magna mollis euismod.

Success! - Maecenas sed diam eget risus varius blandit sit amet non magna.

Inverted text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


Text Elements

The a element and external a element examples

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The data element example

The del element example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The example

The u element example

The var element example


List Types

Ordered List

numerical

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 3.1
    2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2.2
    3. List Item 3.3
  4. List Item 4

Uppercase

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4

Lowercase

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4

Uppercase Roman Numerals

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4

Lowercase Roman Numerals

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4

Unordered List

Unstyled

  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.1
    • List Item 3.2
      • List Item 3.2.1
      • List Item 3.2.2
    • List Item 3.3
  • List Item 4

Disc

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

Definition List

Definition Term 1
Definition Description 1
Definition Term 2
Definition Description 2

Site Colors

Variable names and use cases listed below:

Border and Rule color (dark gray)

* All Text Form Box Outlines (including arrows)
* Rule colors (separators under headers, etc.)
* new var $border is available - $border: 1px solid $color-border;
$dark-gray: #696969 !default;
$color-border: $dark_gray;
$dark-gray: #696969 !default;
$color-border: $dark_gray;

Text variant color (medium gray)

* Form placeholder
* H4 elements
$medium-gray: #999999 !default;
$color-text-gray: $medium_gray;

Shaded Background (light gray)

* All light gray backgrounds (Product images, checkout, my account boxes)
$light-gray: #f4f4f4 !default;
$color-bg: $light_gray;

basic colors

$black: #000000 !default;
$color-black: $black;
$white: #ffffff !default;
$color-white: $white;
$red: #e20400 !default;
$color-red: $red;

validation colors

$color-success: $black;
$color-error: $red;
$color-warning: $black;

transparent colors

NOTE need to finalize

$color-transparent--white: rgba(255, 255, 255, 0.80) !default;
$color-transparent--black: rgba(0, 0, 0, 0.25) !default;
$color-transparent--dark-black: rgba(0, 0, 0, 0.33);
$color-overlay--dark: rgba(0, 0, 0, 0.80) !default;

Tables

This is a table caption
Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
A row with a cell spanning all 3 columns
Table Footer 1Table Footer 2Table Footer 3

Forms - Adaptive Placeholders Usage Guide

smashbox_base/js/site/adaptive_placeholders.js
Works automatically on the following form fields:

  input[type="text"]
  input[type="email"]
  input[type="tel"]
  input[type="number"]
  input[type="password"]
  textarea

Excluding ADPL: Add class "no-adpl" directly to the form field to disable Adaptive Placeholders. (see below)


code:
  <input type="text" placeholder="I am placeholder" class="no-adpl" />

The form field MUST have one of the following:

1. A 'placeholder' attribute plus an ID.
(If the form field does not have a sibling <label> tag, it must have a placeholder and id attribute set (then it will generate a label tag).)

code:
  <input type="password" placeholder="Password" id="styleguide-login-form--password" />

OR

2. An ID on the field PLUS a label with a matching 'for' attribute and a placeholder attribute on the label.



code:
  <label for="styleguide2-login-form--password" placeholder="Password">Password</label>
  <input type="password" id="styleguide2-login-form--password" />

file: smashbox_base/scss/global/_adaptive-placeholders.scss
Once Advanced Placeholders are applied to form fields, they will get class "adpl--processed" which uses the mixin "adaptive-placeholder"

scss code:

.adpl {
  &--processed {
    @at-root input#{&} {
      @include adaptive-placeholder((height:map-get($ap-default, height), margin:map-get($ap-default, margin)));
    }
    @at-root textarea#{&} {
      @include adaptive-placeholder((height:map-get($ap-default, textarea-height), textarea:true));
    }
  }
}

Form Elements



The Fieldset:

Legend

The Form:

Simple Select Element:
Radio Buttons:
Checkboxes:

HTML5-specific Form Elements

       



Full Form Examples

Inverted Colors

Sign Up


Smashbox Custom CTA Buttons

Light Button

Disabled Button

Block Button