Colors

 

#005a2b
$main-color
#0c121c
$almost-black
#000
$black
#9e1b32
$red
#444
$dark-gray
#4a4e54
$dark-gray-2
#b2b2b2
$medium-gray
#898c8f
$medium-gray-2
#e4e8e8
$gray-blue
#f5f4f2
$light-gray
#e9ecec
$light-gray-2

 

Headers

 

This is an H1 tag.

This is an H2 tag.

This is an H3 tag.

This is an H4 tag.

This is an H5 tag.
This is an H6 tag.

 

Headers

 

Default Link Black Link Light Grey Link

 

Inputs

 

 

Textarea

 

 

Radio Buttons

 

Radio Button 1

Radio Button 2

Disabled Radio Button

Disabled Radio Button - Checked

 

Checkboxes

 

Checkbox

Disabled Checkbox

Disabled Checkbox - Checked

 

 

 

Disabled Dropdown

 

 

Buttons

 

 

Alerts

 

Error
Alert
Success
Notice

 

Video

how to use:

    <div class="video">
      <div class="video-wrapper">
          <iframe src="http://www.youtube.com/embed/8ItNE_DX6Cc?showinfo=0&iv_load_policy=3&controls=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>

 

Images

…

how to use: there is PictureFill JSimplemented so you can use srcset with picture HTML5 tag and it will be supported in all browsers:

    <picture>
  <source srcset="http://scottjehl.github.io/picturefill/examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="http://scottjehl.github.io/picturefill/examples/images/art-large.jpg" media="(min-width: 800px)">
  <img srcset="http://scottjehl.github.io/picturefill/examples/images/art-medium.jpg" alt="…">
</picture>

 

Accordion

 

  • Accordion Item
  • Another Item

 

Tabs

 

  • Accordion Item
  • Another Item

 

Cards

 

Clothing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.

Lifestyle & Gifts

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.

Special Collections

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

 

Qty buttons

how to use:

<div class="field qty">
    <label class="label" for="cart-13142-qty">
        <span>Quantity</span>
    </label>
    <div class="control qty">
        <button class="button button--minus">&#10134;</button>
        <input name="cart[][qty]" value="1" type="number" size="4" title="Qty" class="input-text qty" maxlength="12" />
        <button class="button button--plus">&#10133;</button>
    </div>
</div>

 

Tables

 

Order #DateShip ToTotalStatus
100000068 05/04/14 Marc Acosta $1024.45 Pending
100000068 05/04/14 Marc Acosta $1024.45 Pending
100000068 05/04/14 Marc Acosta $1024.45 Pending

 

Responsive Tables

 

Movie Title Genre Year Gross
Star Wars Adventure, Sci-fi 1977 $460,935,665
Howard The Duck "Comedy" 1986 $16,295,774
American Graffiti Comedy, Drama 1973 $115,000,000

 

 

Sections