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 Red
  • .Colour02
  • .BackgroundColour01
  • .BackgroundColour02
  • .TopBorder01
  • .BottomBorder01
  • .LeftBorder01
  • .RightBorder01

Typography - Headings, Paragraphs, Links

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

Heading 1 / .Fnt1.S01 TradeGothicBold 34px

H1.Fnt1.S02 TradeGothicBold 40px Span

H1.Fnt1.S03 #fff TradeGothicBold 40px Underline

H1.Fnt1.S04 TradeGothicBold 22px

Heading 2 / .Fnt2.S01 TradeGothicBold 22px

Heading 2 / .Fnt2.S02 Arial Bold 14px

Heading 2 / .Fnt2.S03 TradeGothicBold 26px

Heading 2 / .Fnt2.S04 Arial Bold 14px #f9423a

Heading 4 / .Fnt4.S01 TradeGothicBold 22px


TEXT7 / .Fnt7.S02 TradeGothicBold 20px (Fnt7 S01 has important in the base class so not used)
TEXT8 / .Fnt8.S01 TradeGothicBold 18px (Fnt8 S01 has important in the base class so not used)
TEXT9 / .Fnt9.S01 TradeGothicBold 60px
TEXT9 / .Fnt9.S02 TradeGothicBold 60px #f9423a

TEXT10 / .Fnt10.S01 Arial 14px

TEXT11 / .Fnt11.S01 Arial regular 12px

TEXT12 / .Fnt12.S01 Arial regular 11px #f9423a

TEXT13 / .Fnt13.S01 TradeGothicBold 30px #53534A

TEXT13 / .Fnt13.S02 TradeGothicBold 30px #f9423a

TEXT13 / .Fnt13.S03 TradeGothicBold 30px #ffffff

TEXT14 / .Fnt14.S01 TradeGothicBold 21px #53534A

TEXT14 / .Fnt14.S02 TradeGothicBold 21px #f9423a

TEXT14 / .Fnt14.S03 TradeGothicBold 21px #ffffff

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

Sliding Doors

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.

Bootstrap Customised Extension - btn-image

Forms

.Frm01.S01 (General used through out site)

Default styling, no classes added.

  • .Info - Paragraph for information

  • Text

  • credit card (card number)

  • credit card (cvv)

  • Small field 02

  • Small field 01 / Overlay Style 03

  • Small field 01 / Small field 02

  • credit card (cardholder name)

  • not used

  • Overlay Style 01

  • Overlay Style 02

  • Large Field 01

  • Select

  • Large Field 01

  • Job Application - availibility

  • credit card (card type)

  • Date of Birth

  • credit card (expiry)

  • small select field 02

  • small select field 01

  • small select field 01 / small select field 02

  • sort by

  • Textarea

  • large textarea 01

  • large textarea 02

  • large textarea 03

  • large textarea 04

  • Radio

  • general

  • Checkbox

  • not used

  • general

  • not used

  • Combinations

  • .Combination01 - Search combination

  • .Combination02 - Promo Code

  • .Combination03 - Not Used

  • .Combination04 - Email Subscribe (found in footer only)

  • .Combination05 - Product Details/Product Free Item/Product Quick Look: Add to Bag/Wishlist, View Similar

.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

.Tbl00.S01

Description Item 1 Item 2
Description Item 1 Item 2 APPLY
Description Item 1 Item 2 APPLY
Description Item 1 Item 2 APPLY
Description Item 1 Item 2 APPLY
Description Item 1 Item 2 APPLY

.Tbl01.S01

Item description Colour Size Price Qty Sub Total
Sample Product 000001
Style #00000000
Black S $23.09 Update $23.09
FREE
Sample Product 000002
Style #00000000
Black S $23.09 Update $23.09
Sub Total $1199.00

.Tbl03.S01

XS S M L XL XXL
Chest 79.5 82.0 87.0 90.1 90.1 90.1
Waist 79.5 82.0 87.0 90.1 90.1 90.1
Hip 79.5 82.0 87.0 90.1 90.1 90.1
Inside Leg 79.5 82.0 87.0 90.1 90.1 90.1
Ipsum 79.5 82.0 87.0 90.1 90.1 90.1

CartSummary fieldset CheckOutSummary

  • -$10.00
  • $12.00
  • $91.95
  • $9.54
  • $10.00
  • Paypal Express

Listings

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

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

.Lst.Lst03.S01 - Shop this Style - Not in Connor

.Lst.Lst05.S01 - This scrollable not used in connor

.Lst.Lst07.S01 - Not Used in Connor

.Lst.Lst09.S01 - MyBag / WishList Drop Down

.Lst.Lst11.S01 - Not in Connor

.Lst.Lst14.S01 - My Bag Recommended, Wishlist Related Products, MyAccount Related Items


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

.Lst.Lst14.S01 - Style Bar

.Lst.Lst15.S01 - Not used in connor

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 - Stylebar 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 - Login Panel 4

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.

.Pnl05 - Login Panel 5

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.

.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/buttons-sprite-1.png

images/buttons-sprite-2.png

images/icons-sprite-1.png

images/buttons-sprite-4.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