P01: Style Guide
Interactive Elements
In-text Link
CSS Selector:
.link-in_text
Sample Code:
<a href="#" class="in_text">in-text Link</a>
Rendered Element:
I am an in-text Link.
Navigation Button
CSS Selector:
.button-nav
Sample Code:
<a href="#" class="button-nav">Navigation Button</a>
Rendered Element:
Navigation ButtonSubmit and Reset Buttons
CSS Selector:
.button-submit / .button-reset
Sample Code:
<button type="submit" name="submit" class="button-submit">Submit Button</button>
<button type="reset" name="reset" class="button-reset">Reset Button</button>
Rendered Element:
Text Input Field and Label
CSS Selector:
input[type=text]
Sample Code:
<form>
<label for="text-field">Label</label>
<input type="text" id="text-field" placeholder="Text Field">
</form>
Rendered Element:
Text Styling
Headings
CSS Selector:
h1, h2, h3, h4
Sample Code:
<h1>Heading level 1</h1>
Rendered Element:
Heading level 1
Heading level 2
Heading level 3
Paragraph
CSS Selector:
p
Sample Code:
<p>This is an example of a paragraph.</p>
Rendered Element:
This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph.
Bulletted List
CSS Selector:
ul.list-bulletted
Sample Code:
<ul class="list-bulletted">
<li>bulletted list</li>
<li>bulletted list</li>
<li>bulletted list</li>
</ul>
Rendered Element:
- bulletted list
- bulletted list
- bulletted list
Numbered List
CSS Selector:
ol.list-numbered
Sample Code:
<ol class="list-numbered">
<li>numbered list</li>
<li>numbered list</li>
<li>numbered list</li>
</ol>
Rendered Element:
- numbered list
- numbered list
- numbered list
Combined Elements
Main Navigation
CSS Selector:
.box, button-nav, nav-box-item
Sample Code:
<nav class="box">
<a href="#link" class="button-nav nav-box-item">Overview</a>
<a href="#link" class="button-nav nav-box-item">Shop</a>
<a href="#link" class="button-nav nav-box-item">Create</a>
</nav>
Rendered Element:
Product Listing
CSS Selector:
.product-listing, img.product-img, .col-1of2, .product-price, button-product-details
Sample Code:
<div class="product-listing">
<img src="file-location" alt="product image" class="product-img">
<h4 class="col-1of2">Product Name</h4>
<p href="#link" class="col-1of2 product-price">Price: $9.00</p>
<a href="#" class="button-product-details>Check</a>
</div>
Rendered Element:
Grid Structure
CSS Selector:
.col-grid, .col-1of5, p.col-item
Sample Code:
<div class="col-grid">
<div class="col-1of5">
<p class="col-item"> 1/5 </p>
<p class="col-item"> 1/5 </p>
<p class="col-item"> 1/5 </p>
<p class="col-item"> 1/5 </p>
<p class="col-item"> 1/5 </p>
</div>
</div>
Rendered Element:
1/5
1/5
1/5
1/5
1/5
Colour Swatches
CSS Selector:
color-swatch-item, cw1
Sample Code:
<ul>
<li class="color-swatch-item cw1"> #99CCCC </li>
<li class="color-swatch-item cw2"> #C0DFD9 </li>
<li class="color-swatch-item cw3"> #C5D5CD </li>
<li class="color-swatch-item cw4"> #9FA8A3 </li>
<li class="color-swatch-item cw5"> #484848 </li>
<li class="color-swatch-item cw6"> #333333 </li>
</ul>
Rendered Element:
- #99CCCC
- #C0DFD9
- #C5D5CD
- #9FA8A3
- #484848
- #333333