Mecca - Style guide

Overview

This style guide based on
FSD: FSD.pdf
Clickthrough: Clickthroughs

Grid system
  • Content width: 960px
  • Column width: 69px
  • Number of columns: 12
  • Full width: 972px

Font size based on 15px + links to 15px
panel desktop 10px
penel monbile 6px

Custom Font family
  • azo-bold
  • azo-medium
  • azo-light

Important NOTE

There are some changes here that needs to apply globally

  • Any "azo-meduim" font-family size 12px and 13px required to use "bold" font weight, due to font rendering issue
  • Product detail page, product title: will use azo-medium /18px no letter space
  • Any label that visually uppercase and bold will be use font: bold 1.083em azo-medium
  • All pages that has < div id="main"> required to add additional class "container" to it

Colour Palette

Colour Palette not available without javascript

Typography

Sample

Selector

Comments

Heading 1

h1 ~21px/40px, azo-bold,1px letter-spacing

Heading 1

h1.heading-line with middle line

Heading 2

h2 ~17px, azo-bold, 1px letter-spacing

Heading 2

h2.heading-line with middle line

Heading 3

h3 , .h3 ~18px, azo-medium, 1px letter-spacing
Used on Logged in pages, My Account, Gift Card

Heading 4

h4 , .h4 ~18px, azo-medium, NO letter-spacing
Only Product brand name on PDP + set + Store name
Heading 5
h5 , .h5 ~16px, azo-medium, 1px letter-spacing
Only on article headings page will have underline
Heading 6
h6 , .h6 ~13px, azo-medium, 1px letter-spacing
.product-name .name-link ~12px, azo-medium, NO letter-spacing

Paragraph

p ~12px/18px, arial
STANDARDLINK a ~12px, arial
a ~12px, azo-light

CustomerContentLink

p a Customer content, Link inside paragraph
Product caption - Red colour with fine... .caption ~12px, arial, italic PDP color caption
Forms caption - Street name and number...
form .caption ~11px, arial, right align
$999.99
.mini-cart-price,
.product-sales-price,
.price-sales
~16px, arial, bold
$999.99(10% off)
.save-value ~11px, arial (10% off)
$999.99
$999.99
.price-standard,
.price-standard,
.price-unadjusted
~11px, arial (
$999.99
)
20% off all blush .promotion-label ~11px, arial, Product list promotion
#category-level-1 a.refinement-link ~13px, azo-bold; letter-spacing: 1px
#category-level-1 a.active Nav level 1 active state
#category-level-2 a.refinement-link ~12px, arial
#category-level-2 a.active Nav level 2 active state

Buttons

Sample

Selector

Comments

button, .btn Default button styling
.btn.btn-primary
.btn.btn-secondary Mainly use for "add to bag", "checkout"
and "continue shopping"
.btn.btn-info
.disable, disabled="disabled" applied to class name "disable" or
attribute "disabled"
  • btn btn-success
  • btn btn-warning
  • btn btn-danger
Not in use

Button Size

Seclector

Comments

.btn.btn-block Full width of a parent element
.btn.btn-large 270px
.btn.btn-medium 210px
.btn 172px
.btn.btn-small 145px
.btn.btn-mini 50px

Button with icon

Seclector

Comments

.btn.btn-primary.btn-large + i.icon-right-arrow-white applied < i class="icon-right-arrow-white"> tag after "Text"
.btn.btn-secondary.btn-large + i.icon-right-arrow-white applied < i class="icon-right-arrow-white"> tag after "Text"
 delete
 clear filter
i.icon-cross applied < i class="icon-cross"> before "Text"
Checkout as a guess  i.icon-right-arrow-dark applied < i class="icon-right-arrow-dark"> before "Text"

icons classes

  •  i.icon-top-arrow-dark
  •  i.icon-right-arrow-dark
  •  i.icon-right-arrow-white
  •  i.icon-left-arrow-dark
  •  i.icon-cross
  •  i.icon-heart-white
  •  i.icon-heart-dark
  •  i.icon-store-locator
  •  i.icon-info
  •  i.icon-print
  •  i.icon-minibag
  •  i.icon-envelope
  •  i.icon-beauty-loop

Tables

Table with class name .table (default) within span9

Below is sample table of My Bag page

Product price Qty Total Price
Waximumâ„¢ Waxed Leather Protector, , small
$99.99
Philosophy
item # 1-123456
$99.99
pre-order/back order
The expected in stock date is
Mon 01 Jun 2015
qty
Total Price
$120
Waximumâ„¢ Waxed Leather Protector, , small
$99.99
Philosophy
item # 1-123456
$99.99
in stock
 remove
qty
Total Price
$342.34
$120
20% off all blush

Table with class name .table #cart-table within ID="cart-table" element

Below is sample table of Checkout step 3 page

Product Qty Price
Waximumâ„¢ Waxed Leather Protector, , small
Philosophy
item # 1-123456
qty 1
pre-order/back order
The expected in stock date is
Mon 01 Jun 2015
$120

Forms

Input sizes

.input-mini
.input-small
.input-medium
.input-large
.input-xlarge
.input-xxlarge
.input-block-level
display full width

Input, select and text area


Checkbox and Radios

Checkboxes and radios to be used default style


Inline Combinations

.form-inline + .input-append


form-horizontal

.form-horizontal + .input-large


.form-horizontal + .input-large + .input-small + .help-block.input-large

Password must be at least 6 characters in length


Error

Please enter a value for First Name

Panels

This section using .panel01 + .panel02 on parent elements

Using .input-block + .btn-block in the forms elements



Tabs

Note*

This component only has Desktop styling

This component will have a separate task for mobile customization


This is tab1 description,
This classic pant, with a contour waist and 1...
This is tab2 description,
This classic pant, with a contour waist and 2...
This is tab3 description,
This classic pant, with a contour waist and 3...

Image Dimensions

Badges created by client. Please use below images placeholder for dimensions

A.14 - NEW BADGE (product list) "35 x 35"

A.29 - New badge "55 x 55"

A.15 - Product badges "150 x 20"

A.20 - PRODUCT BADGE "80 x 50" No border

A.23 - CONTENT ASSET - BRAND LOGO "130 x 60" No border

A.23 - Mini cart, Table image "69 x 69"

C14.1 - PDP Main image "378 x 378"

Image Zoom dimension "940 x 940"

C14.2 - PDP Thumb image "150 x 150"

Images/Sprites

Sprite-Desktop

../../images/sprite-desktop.png


Sprite-Mobile

../../images/sprite-responsive.png


favicon

/images/logo.png