Style Guide

colors

#EEE
#DDD
#CCC
#AAA
#999
#666

Typography

Light Text - .light
Normal Text
Strong Text - strong
Italic Text - em
Ultrabold Text - .ultrabold

Heading Styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Link Styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Paragraph Link Example
Visited Link Example
Active Link Example
Hover Link Example

Paragraph Styles

This is a regular paragraph. Consectetur adipisicing 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 reprehcalloutit 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

This is an callout paragraph. Add the class .callout to a paragraph. Phasellus rutrum bibendum justo nec cursus. Maecenas posuere eros sit amet lorem volutpat varius. Sed ornare tincidunt ligula eu hendrerit. Morbi bibendum tellus vel nisl hendrerit blandit. Maecenas convallis, diam non tincidunt dignissim, nibh nisl venenatis purus, ac auctor risus diam id nibh.

List Styles

  1. OL Example
  2. OL Example
  3. OL Example
    1. Nested OL Example
    2. Nested OL Example
    3. Nested OL Example
  4. OL Example
  5. OL Example
  6. OL Example
  • UL Example
  • UL Example
  • UL Example
    • Nested OL Example
    • Nested OL Example
    • Nested OL Example
  • UL Example
  • UL Example
  • UL Example
Definition Term
Definition Description
Definition Description
How to make websites
CSS
HTML
Definition Term
Definition Description
Defintion Description

Long List

  • List Item in Long List. class: long_list
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List
  • List Item in Long List

Blockquote Styles

This is the Default Blockquote Style Example. Lorem ipsum dolor sit amet, consectetur adipisicing 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 reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is the left float Blockquote Style Example. Use classleft in a blockquote. Lorem ipsum dolor sit amet, consectetur adipisicing 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 reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is the right float Blockquote Style Example. Use classright in a blockquote. Lorem ipsum dolor sit amet, consectetur adipisicing 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 reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HR Styles

hrule1
hrule2
hrule3

WSM Inquiry Form

Button Styles

Refer to section 2.13 Buttons in the style guide section of style.css. To apply classes to buttons, you have to put the class name in the overall button section which turns it into a button, then also put the class name the primary, secondary, alt1, or alt2 section. Alternatively if available, you can apply the button class names to the element you want to be a button, but I recommend the latter.


button primary
Secondary Button
button secondary

button alt1

button alt2

WSM Button Styles

Product Detail


.wsm-prod-button
Choose Product Options
.view_option_sets
Show Tiered Pricing
.tiered_pricing

.wsm-prod-button.wsm-addtocart-button

.wsm-prod-button.wsm-addwishlist-button

.wsm-prod-button.wsm-inquiry-button

.wsm-prod-button.wsm-tellafriend-button

Cart


.wsm_interface_cart_btn

.wsm_interface_cart_btn.wsm_interface_cart_catalog_btn

.wsm_interface_cart_btn.wsm_interface_cart_checkout_btn
Estimate Shipping
Review Total
Suggested Items
.wsm_cart_anchors.wsm_cart_anchors_cart a

.wsm_interface_cart_btn.wsm_interface_cart_update_btn

.wsm_cart_btn.wsm_interface_cart_shipping_tool_button

Catalog


.wsm-cat-button

.wsm-cat-button.wsm-moreinfo-button

.wsm-cat-button.wsm-details-button

.wsm-cat-button.wsm-config-button

.wsm-cat-button.wsm-addtocartprice-button

.wsm-cat-button.wsm-addtocart-button

Checkout


.wsm_interface_btn
Next Step »
.wsm_checkout_next a

.wsm_interface_btn.wsm_interface_btn_checkout_submit

.wsm_interface_btn.wsm_interface_btn_checkout_login

Images

corgi!Shadow Bottom
corgi!3px white border with slight shadow
corgi!rounded corners, border-left w/c color

Panels

This is a regular panel that you can use to bring attention to certain items. Just add the class panel to the element.

This is an alternate panel that you can use to bring attention to certain items. Just add the class panel callout to the element.