Style guide
Our git repository: https://github.com/Goodnat/IAT339
Basic Interactive Elements
An in-text link:
This is an in-text link.
HTML:
<p>This is an <a href="#" class="in-text_link">in-text link</a>.</p>
Call-to-action buttons:
HTML:
<a href="#" class="button-1" role="button"><Add to bag</a>
<a href="#" class="button-2" role="button">Add to wishlist</a>
A submit and reset button for forms:
HTML:
<form action="/" method="post">
<button>Submit</button>
<button type="reset">Reset</button>
</form>
A text input field and a label:
HTML:
<label for="name">Name: </label>
<input type="text" id="name" placeholder="Mike">
Website colour swatches:
Light orange
#FFE2BC
rgb( 255, 226, 188)
Brown
#91640F
rgb( 145, 100, 15)
Light grey
#EFEFEF
rgb( 239, 239, 239)
Black
#000000
rgb( 0, 0, 0)
Text Styling
Typography:
Heading 1
Heading 2
Heading 3
Heading 4
Paragraph
HTML:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Paragraph</p>
Bulleted lists:
- List item
- List item
- List item
HTML:
<ul class="bulleted_list">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<ul>
Numbered lists:
- List item
- List item
- List item
HTML:
<ol class="numbered_list">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
Modular Pattern Elements
Module: Top navigation
HTML:
<header class="nav">
<a href="index.html" class="mobile-brand">P.F</a>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<nav class="menu">
<a href="about.html">About</a>
<a href="products.html">Shop</a>
<a href="index.html">P.F</a>
<a href="contact.html">Contact</a>
<a href="checkout.html">Cart(0)</a>
</nav>
</header>
Module: Product detailed listing
FR/2018
Inspired by the resurgence of classic gin cocktails by Carlos Viñals
Select a size
50ML
$95.00
7.5ML
$25.00
TOP: Melon Pop Rocks / Grapefruit Zest / Gin & Tonic
HEART: Juniper / Madagascar Ginger / Aromatic Lavender
BASE: Chilled Amberwood / Metallic Musk
HTML:
<div class="container product">
<div class="container-item product-thumbnails">
<a href="javascript:void(0)" onmouseover="changePics(1)">
<img src="img/placeholder.jpg" alt="First product image">
</a>
<a href="javascript:void(0)" onmouseover="changePics(2)">
<img src="img/placeholder.jpg" alt="Second product image">
</a>
<a href="javascript:void(0)" onmouseover="changePics(3)">
<img src="img/placeholder.jpg" alt="Third product image">
</a>
</div>
<div class="container-item product-left">
<img src="img/placeholder.jpg" alt="First product image" id="single-product-image" onmouseover="changePics(0)">
</div>
<div class="container-item product-right">
<h2>FR/2018</h2>
<div class="select-size">
<p><em>Select a size</em></p>
<div class="container size-and-price">
<p class="container-item">50ML</p>
< class="container-item right-align">$95.00</p>
</div>
<div class="container size-and-price">
<p class="container-item">7.5ML</p>
<p class="container-item right-align">$25.00</p>
</div>
</div>
<section class="perfume-details">
<p>TOP: Melon Pop Rocks / Grapefruit Zest / Gin & Tonic</p>
<p>HEART: Juniper / Madagascar Ginger / Aromatic Lavender</p>
<p>BASE: Chilled Amberwood / Metallic Musk</p>
</section>
<a href="#" class="button-1" role="button">Add to bag</a>
<a href="#" class="button-2" role="button">Add to wishlist</a>
</div>
</div>
Module: Checkout - Payment
Payment
Place an order
HTML:
<div class="payment">
<h2>Payment</h2>
<form method="post" action="#">
<label for="card-number">Card number</label>
<input type="text" id="card-number">
<label for="expiry-date">Expiry date</label>
<input type="text" id="expiry-date" placeholder="MM/YY">
<div class="tooltip">
<label for="security-code">
Security code
<img src="img/question.png" alt="What's security code?" class="security-code">
</label>
<span class="tooltip-text">
It's usually a 3- or 4- digit number printed on the back of a credit card (usually in the signature field).
</span>
</div>
<input type="text" id="security-code" placeholder="000">
</form>
<a href="thank_you.html" class="button-1 place-an-order" role="button">
<span>Place an order</span>
</a>
</div>
Website grid structure:
Landing Page Template
Header
Image
Text
Image-01
Image-02
Image-03
Subscription Form
Text
Image
Intro-01
Intro-02
Intro-03
Footer
HTML:
<div class="container-item-full">Header</div>
<div class="container">
<div class="container-item">Image</div>
<div class="container-item">Text</div>
</div>
<div class="container">
<div class="container-item">Image-01</div>
<div class="container-item">Image-02</div>
<div class="container-item">Image-03</div>
</div>
<div class="container-item-full">Subscription Form</div>
<div class="container">
<div class="container-item">Text</div>
<div class="container-item">Image</div>
</div>
<div class="container">
<div class="container-item">Intro-01</div>
<div class="container-item">Intro-02</div>
<div class="container-item">Intro-03</div>
</div>
<div class="container-item-full">Footer</div>
Product Browsing Page Template
Header
Featured events
Image-01
Image-02
Image-03
Image-01
Image-02
Image-03
Image-01
Image-02
Image-03
Footer
HTML:
<div class="container-item-full">Header</div>
<div class="container-item-full">Featured events</div>
<div class="container">
<div class="container-item">Image-01</div>
<div class="container-item">Image-02</div>
<div class="container-item">Image-03</div>
</div>
<div class="container">
<div class="container-item">Image-01</div>
<div class="container-item">Image-02</div>
<div class="container-item">Image-03</div>
</div>
<div class="container">
<div class="container-item">Image-01</div>
<div class="container-item">Image-02</div>
<div class="container-item">Image-03</div>
</div>
<div class="container-item-full">Footer</div>
Product Detail Page Template
Header
Product Images
Product Details
General Customer Reviews
Write a review
Other Customers' Reviews
Footer
HTML:
<div class="container-item-full">Header</div>
<div class="container">
<div class="container-item">Product Images</div>
<div class="container-item">Product Details</div>
</div>
<div class="container">
<div class="container-item">Write a review</div>
<div class="container-item">Other Customers' Reviews</div>
</div>
<div class="container-item-full">Footer</div>
Checkout Page Template
Header
Billing Address
Order summary
Payment
Footer
HTML:
<div class="container-item-full">Header</div>
<div class="container">
<div class="container-item">Billing Address</div>
<div class="container-item">
<class="container-item-full">Order Summary</div>
<class="container-item-full">Payment</div>
</div>
</div>
<div class="container-item-full">Footer</div>
Contact Page Template
Header
Form
Image
Location map
Details
Intro-01
Intro-02
Intro-03
Footer
HTML:
<div class="container-item-full">Header</div>
<div class="container">
<div class="container-item">Form</div>
<div class="container-item">Image</div>
</div>
<div class="container">
<div class="three-fourths">Location map</div>
<div class="container-item">Details</div>
</div>
<div class="container">
<div class="container-item">Intro-01</div>
<div class="container-item">Intro-02</div>
<div class="container-item">Intro-03</div>
</div>
<div class="container-item-full">Footer</div>
About Page Template
Header
Image
Text
Image-01
Image-02
Text
Image
Footer
HTML:
<div class="container-item-full">Header</div>
<div class="container">
<div class="container-item">Image</div>
<div class="container-item">Text</div>
</div>
<div class="container">
<div class="container-item">Image-01</div>
<div class="container-item">Image-02</div>
</div>
<div class="container">
<div class="container-item">Text</div>
<div class="container-item">Image</div>
</div>
<div class="container-item-full">Footer</div>