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 Button

Submit 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:

  1. numbered list
  2. numbered list
  3. 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:

product image

Product Name

Price: $9.00

Check

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