Client

Demo Outter skeleton Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt congue risus, a blandit sem cursus ut. Vestibulum vel eleifend massa.

tools

Soul Tools - across all projects. Skeleton Tools - for project specific spacing. Skin - for project specific styling.

The "Styles/Class" not in use are in this project are displayed in this colour...

Soul Tools

  • .Clear
  • .ClearFix
  • .FloatRight
  • .FontBold
  • .FontNormal
  • .FullWidth
  • .HardCoded
  • .Hidden
  • .Hide
  • .Help
  • .NoFloat

Skeleton Tools

  • .alpha
  • .omega
  • .MPS01
  • .MPS02
  • .MPS03
  • .MPS03
  • .MPS04
  • .MPS05
  • .MPS06
  • .MPS07
  • .MPS08

Skin Tools

  • .Colour01
  • .Colour02
  • .BackgroundColour01
  • .BackgroundColour02

Typography - Headings, Paragraphs, Links

Example of headings, font styles, anchors, strong and emphesises

Heading 1 / .Fnt1.S01 Akzidenz Grotesk BEBoldRegular 34px

H1.Fnt1.S02 Akzidenz Grotesk BEBoldRegular 20px

H1.Fnt1.S03 #fff Akzidenz Grotesk BEBoldRegular 20px

Heading 2 / .Fnt2.S01 Akzidenz Grotesk BEBoldRegular 15px

Heading 2 / .Fnt2.S02 lorem ipsum dolor a sita

Heading 2 / .Fnt2.S03 lorem ipsum dolor a sita

Heading 2 / .Fnt2.S04 25px #e2e2e2 AkzidenzGroteskBEBoldRegular

Heading 2 / .Fnt2.S04 25px #181818 Upppercase AkzidenzGroteskBEBoldRegular

Heading 3 / .Fnt3.S01 lorem ipsum dolor a sita

Heading 3 / .Fnt3.S02 lorem ipsum dolor a sita

Heading 3 / .Fnt3.S03 lorem ipsum dolor a sita

Heading 4 / .Fnt4.S01 lorem ipsum dolor a sita

Heading 4 / .Fnt4.S02 Uppercase lorem ipsum dolor a sita

Heading 5 / .Fnt1.S01 lorem ipsum dolor a sita
Heading 6 / .Fs6 lorem ipsum dolor a sita

TEXT7 / .Fnt7.S03 Uppercase lorem ipsum dolor a sita polo
TEXT7 / .Fnt4.S02 Uppercase lorem ipsum dolor a sita polo

TEXT8 / .Fnt8.S01 Uppercase lorem ipsum dolor a sita polo

TEXT9 / .Fnt9.S01 Uppercase lorem ipsum dolor a sita polo

TEXT10 / .Fnt10.S01 Uppercase lorem ipsum dolor a sita polo

TEXT11 / .Fnt11.S01 17px #e2e2e2 Uppercase lorem ipsum dolor a sita polo

Standard Link strong strong .S02 emphasis Strong Link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis sapien sed turpis vestibulum sollicitudin at quis nulla.

Paragrah text. Vivamus nisi urna, luctus vel tincidunt ut, iaculis ut nibh. Sed orci urna, feugiat ut volutpat vitae, bibendum in turpis. Pellentesque dictum nibh vitae sapien sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis sapien sed turpis vestibulum sollicitudin at quis nulla.

Ordered lists, unordered lists, definition lists.

For styling of lists to work they must be wrapped in .ContentStyle01

  1. Ordered item 1
  2. Ordered item 2
  3. Ordered item 3
  4. Ordered item 4
  5. Ordered item 5
  • Unordered 1
  • Unordered 2
  • Unordered 3
  • Unordered 4
  • Unordered 5
Definition Term
Definition Description
Definition Description
Definition Description
Definition Description
Definition Description

Bootstrap Buttons (new)

"Progressive Enhancement" vs "Graceful degradation" Clients in recent projects are happy to see a CSS3 enhancements applied with old browsers falling back to tradditional square cornered, no box-shadows etc...

Button class="" Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use

Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Multiple sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.


Disabled state

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

Primary link Link

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

Link
<a class="btn" href="">Link</a>
<button class="btn" type="submit">
  Button
</button>
<input class="btn" type="button"
         value="Input">
<input class="btn" type="submit"
         value="Submit">

As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Icon Only Buttons

Forms

.Frm01.S01 (General used through out site)

Default styling, no classes added.

  • .Info - Paragraph for information

  • Text

  • Select

  • Textarea

  • Radio

  • Checkbox

  • Combinations

  • .Combination01

  • .Combination02

  • Submit
  • .Combination03 - was in global but ps added to styleguide.. not sure where used - need to search solution and delete if not needed

  • Submit
  • .Combination04 - found in footer only

  • .Combination05

  • .Combination06 - found on Login/Register page

  •   FREE DELIVERY
    SIGN UP NOW
  • .Combination06.S02 - found on My Wishlist

  •   TOO HOT
    TO HANDLE
    this product
    is no longer
    available

.Frm01.S01

Tables

table (default)

Description Item 1 Item 2 Item 3 Item 4 Item 5
Description Item 1 Item 2 Item 3 Item 4 Item 5
Description Item 1 Item 2 Item 3 Item 4 Item 5
Description Item 1 Item 2 Item 3 Item 4 Item 5
Description Item 1 Item 2 Item 3 Item 4 Item 5
Description Item 1 Item 2 Item 3 Item 4 Item 5

.Tbl01.S01

Item description Colour Size Price Qty Sub Total
Sample Product 000002 Black S $23.09 update $23.09
Sample Product 000002 Black S $23.09 update $23.09
Sub Total $1199.00

.Tbl01.S02

Item description Colour Size Price Qty add to my bag
Sample Product 000002 Black S $23.09 update
Sample Product 000002 Black S $23.09 update
Sample Product 000002 Black S $23.09 Remove

.Tbl01.S01.V01

Item Name Colour Size Price Qty Discount Sub Total
Sample Product 000002 Black S $23.09 update ($0.00) $23.09
Sample Product 000002 Black S $23.09 update ($0.00) $23.09
Sub Total: $1199.00

.Tbl01.S01.V02

Item Name Colour Size Price Qty Discount Sub Total
Sample Product 000002 Black S $23.09 update ($0.00) $23.09
Sample Product 000002 Black S $23.09 update ($0.00) $23.09
Sub Total: $1199.00

.Tbl02.S01

Date order # Items Value Status  
02-Jul-2012
PF001744
PF001744
1
$56.57
Pending
02-Jul-2012
PF001743
PF001743
1
$56.57
Pending
02-Jul-2012
PF001742
PF001742
1
$63.15
Dispatched
02-Jul-2012
02-Jul-2012
PF001741
PF001741
1
$68.92
Dispatched
02-Jul-2012

CartSummary fieldset CheckOutSummary

  • 4.00
  • select payment method

  • $85.01
  • $7.76

Listings

.Lst.Lst01.S01 - occasions (There is no landing page in this

.Lst.Lst02.S01 - Collections Page - This does not exist in YD

.Lst.Lst03.S01 - Shop this Style - the

.Lst.Lst05.S01 - Product Quick Look

.Lst.Lst09.S01

.Lst.Lst12.S01 - MyAccount Related Items (In spec but missing in design)

.Lst.Lst13.S01 - Product Details - Main Image Popup Scrollable (not designed)

.Lst.Lst15.S01 - Free gift popup (in spec not designed)

Nav

.Nav.Nav03

.Nav.BreadCrumb

.Nav.Nav04

.Nav.Nav05 - Not Used on the Footer

.Nav.Nav06

.Nav.Nav08 Use this for the size guide

.Nav.Nav08 Has been replaced in Tarocash/YD by id=plToolbox

Need Help?
Call 1300 11 TARO or 1300 11 8276

.Nav.Nav09

.Nav.Nav09 checkout selected

Panels

.Pnl01 - Found on the Product Listing Page Pagination section, Login/Register delivery details, online application

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit metus, vel auctor lectus. Maecenas eleifend ante ut augue accumsan mattis. Donec tortor lectus, egestas eu aliquam vel, luctus sit amet eros. Cras vulputate nisl eget velit ultricies ac aliquet metus auctor. In arcu velit, fermentum nec posuere eu, varius eu erat. Nullam volutpat elementum egestas. Suspendisse potenti. Duis gravida, nisl ac venenatis vehicula, massa sem sodales odio, a placerat lacus risus ut urna. Donec a purus magna. Sed iaculis sodales metus vitae consectetur. Fusce elit sem, mollis et pulvinar ut, volutpat eget massa. Sed mauris nulla, ultrices non semper in, gravida eu tellus. Etiam justo neque, tincidunt non rhoncus eu, congue malesuada neque. Nullam enim magna, iaculis et auctor vel, porttitor non quam. Nam in turpis sed nisi fringilla ultrices.

.Pnl02 - Strylebar scroller background, standard content page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit metus, vel auctor lectus. Maecenas eleifend ante ut augue accumsan mattis. Donec tortor lectus, egestas eu aliquam vel, luctus sit amet eros. Cras vulputate nisl eget velit ultricies ac aliquet metus auctor. In arcu velit, fermentum nec posuere eu, varius eu erat. Nullam volutpat elementum egestas. Suspendisse potenti. Duis gravida, nisl ac venenatis vehicula, massa sem sodales odio, a placerat lacus risus ut urna. Donec a purus magna. Sed iaculis sodales metus vitae consectetur. Fusce elit sem, mollis et pulvinar ut, volutpat eget massa. Sed mauris nulla, ultrices non semper in, gravida eu tellus. Etiam justo neque, tincidunt non rhoncus eu, congue malesuada neque. Nullam enim magna, iaculis et auctor vel, porttitor non quam. Nam in turpis sed nisi fringilla ultrices.

.Pnl03 - Login Panel 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit metus, vel auctor lectus. Maecenas eleifend ante ut augue accumsan mattis. Donec tortor lectus, egestas eu aliquam vel, luctus sit amet eros. Cras vulputate nisl eget velit ultricies ac aliquet metus auctor. In arcu velit, fermentum nec posuere eu, varius eu erat. Nullam volutpat elementum egestas. Suspendisse potenti. Duis gravida, nisl ac venenatis vehicula, massa sem sodales odio, a placerat lacus risus ut urna. Donec a purus magna. Sed iaculis sodales metus vitae consectetur. Fusce elit sem, mollis et pulvinar ut, volutpat eget massa. Sed mauris nulla, ultrices non semper in, gravida eu tellus. Etiam justo neque, tincidunt non rhoncus eu, congue malesuada neque. Nullam enim magna, iaculis et auctor vel, porttitor non quam. Nam in turpis sed nisi fringilla ultrices.

.Pnl04

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit metus, vel

.Pnl05 Normal bg sitting inside other panels as in Gift Voucher page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit metus, vel

.Pnl06 Normal bg sitting inside other panels as in Gift Voucher page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit metus, vel

.Pnl07 alpha bg sitting inside other panels as in My Account Page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit metus, vel

Overlays

NOTE: the data-mask colour has changed, was #000000 now #333333

Tabs

Description ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit metus, vel auctor lectus. Maecenas eleifend ante ut augue accumsan mattis. Donec tortor lectus, Description eu aliquam vel, luctus sit amet eros. Cras vulputate nisl eget velit ultricies ac aliquet metus auctor. In arcu velit, fermentum nec posuere eu, varius eu erat.
Fabric ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit metus, vel auctor lectus. Maecenas eleifend ante ut augue accumsan mattis. Donec tortor lectus, Fabric eu aliquam vel, luctus sit amet eros. Cras vulputate nisl eget velit ultricies ac aliquet metus auctor. In arcu velit, fermentum nec posuere eu, varius eu erat.
Size & Fit ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit metus, vel auctor lectus. Maecenas eleifend ante ut augue accumsan mattis. Donec tortor lectus, Size & Fit eu aliquam vel, luctus sit amet eros. Cras vulputate nisl eget velit ultricies ac aliquet metus auctor. In arcu velit, fermentum nec posuere eu, varius eu erat.
Delivery ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit metus, vel auctor lectus. Maecenas eleifend ante ut augue accumsan mattis. Donec tortor lectus, Delivery eu aliquam vel, luctus sit amet eros. Cras vulputate nisl eget velit ultricies ac aliquet metus auctor. In arcu velit, fermentum nec posuere eu, varius eu erat.

Others

Tool tips

Learn More

Save time and connect using your Facebook details! We’ll transfer your data from Facebook and all you have to do is fill in the blanks

Swatches Colour .S01

red white blue

Swatches Colour .S02

red white blue

Refine Search

  • Colour
  • Sizes
  • Price
Recently Viewed
Spend another $10 for free shipping
Spend another $10 for free shipping

Images

images/yd-sprite-1.png

images/buttons-sprite-2.png

images/buttons-sprite-3.png

images/buttons-sprite-4.png

images/buttons-sprite-5.png

images/buttons-sprite-6.png

images/favicon.ico

images/loading.gif

images/logo-header.png

images/logo-print.png

images/map-australia.png

images/page-background-01.png

images/page-background-02.png

images/ product-review-stars-sprite.png