P01 - Style Guide Template

A template you can use to start building out your own style guides with.

Interactive Elements

In-text link

CSS selector:

.text-link

Sample code:

<a class="text-link" href="https://www.google.ca/"in text link/a>

Rendered element:

in text link

Navigation Link

CSS selector:

.button

Sample code:

<a class="button" href="#">Add to cart</a>

Rendered element:

Add to cart

Submit/Reset Buttons

CSS selector:

.button

Sample code:

<input type="search">

            <input class="button" id="submit" type="submit">

            <input class="button" id="reset" type="reset">

Rendered element:

Text Input Field with Label

CSS selector:

input

Sample code:

<form>

            <label for="input"> Search: </label>

            <input type="text" class="input">

            </form>

Rendered element:

Radio Button with Label

CSS selector:

.radio

Sample code:

<input type="radio" class="radio" name="size" id="small" checked="checked">

            <label for="small">Small</label>

            <input type="radio" class="radio" id="medium" name="size">

            <label for="medium">Medium</label>

            <input type="radio" class="radio" id="large" name="size">

            <label for="large">Large</label>

Rendered element:

Small Medium Large

Image as a Link

CSS selector:

img

Sample code:

<a href="https://www.etsy.com/ca/listing/1192358051/cute-frog-sticker-pack-waterproof">


            <div>

              <figure>

                <img src="https://i.etsystatic.com/13486711/r/il/245393/3720451436/il_794xN.3720451436_l0t2.jpg"><img>

              </figure>

            </div>

          </a>

Rendered element:

Check-out our new shirt collection!

Proudly made in Vancouver.

Read about how we're helping the environment, one shirt at a time.

❮ ❯

Text Elements

CSS selector:

.h2 .h3 .h4 .h5

Sample code:

<h2>Section title</h2>

            <h3>Navigation element</h3>

            <h4>Title of product</h4>

            <h5>Price of product</h5>

Rendered element:

Section title

Navigation element

Title of product

Price of product

Paragraphs

CSS selector:

Sample code:


            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida et ex ac blandit. Donec efficitur dui ut
            blandit dapibus. Maecenas congue, neque ut luctus rhoncus, turpis eros ullamcorper massa, a imperdiet nunc
            urna quis lacus. Aenean efficitur purus nulla, imperdiet semper nibh euismod non. Vivamus dolor nisl, eleifend
            ut hendrerit id, tincidunt ac neque. In dapibus ex augue, in luctus velit feugiat non. Suspendisse a erat
            tortor. Donec mattis turpis at mi placerat, nec tempor purus egestas. Nam et efficitur ex, sed dignissim leo.
            Mauris dignissim lacus vitae elementum auctor. Ut eget neque justo. Aenean varius odio quam, at interdum
            tortor efficitur sit amet.

            </p>

Rendered element:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida et ex ac blandit. Donec efficitur dui ut blandit dapibus. Maecenas congue, neque ut luctus rhoncus, turpis eros ullamcorper massa, a imperdiet nunc urna quis lacus. Aenean efficitur purus nulla, imperdiet semper nibh euismod non. Vivamus dolor nisl, eleifend ut hendrerit id, tincidunt ac neque. In dapibus ex augue, in luctus velit feugiat non. Suspendisse a erat tortor. Donec mattis turpis at mi placerat, nec tempor purus egestas. Nam et efficitur ex, sed dignissim leo. Mauris dignissim lacus vitae elementum auctor. Ut eget neque justo. Aenean varius odio quam, at interdum tortor efficitur sit amet.

Numbered Lists

CSS selector:

.list

Sample code:


            <div class="list">

            <div>stickers</div>

            <div>apparel</div>

            <div>tote bags</div>

          </div>

Rendered element:

stickers

apparel

tote bags

Combined Elements

Main Navigation

Site Title

Search

Search: Term:

Filter:

Size:

Colour:

Sort:

Categories:

Shirts

An image of a graphic t-shirt. — Face This - Jon Burgerman x Kartini. Source.

An image of a water bottle. — Black Water Bottle - "Maple"

Payment Form

Product	Quantity	Subtotal
Frog Sticker Pack Price: $10		$10.00
Froggy Tee Price: $20		$20.00
Cherry Blossom Bird Enamel Pin Price: $15		$15.00

Product

Quantity

Subtotal

Frog Sticker Pack

Price: $10

$10.00

Froggy Tee

Price: $20

$20.00

Cherry Blossom Bird Enamel Pin

Price: $15

$15.00

About Us

What does the company do or offer?

It allows a growing independant artist to sell their art to customers without having to lose profits to fees on other websites like Etsy, RedBubble. It is also a better way to build brand recognition by having their own website and being able to easily link to it from external websites.

Who is the company to potential customers? (as a person)

This website is a way for customers to be able to support the artist by buying art such as stickers, enamel pins, mousepads, tote bags, waterbottles, and apparel such as graphic tees, and sweaters. It is also a way for customers to contact the artist to ask for custom commissioned art, get updates on shipping, or a place to get updates on upcoming releases.

Why might this company entice someone to purchase a product or service

As a Canadian artist, we wanted to reduce waste and packaging from the shipping industry, so we offer local pickup in Vancouver, and free shipping in Canada with orders over $100! We also donate 10% of our waterbottle and tote bag sales to BC Wildlife Park

P01 - Style Guide Template

Interactive Elements

In-text link

CSS selector:

Sample code:

Rendered element:

Navigation Link

CSS selector:

Sample code:

Rendered element:

Submit/Reset Buttons

CSS selector:

Sample code:

Rendered element:

Text Input Field with Label

CSS selector:

Sample code:

Rendered element:

Radio Button with Label

CSS selector:

Sample code:

Rendered element:

Image as a Link

CSS selector:

Sample code:

Rendered element:

Text Elements

CSS selector:

Sample code:

Rendered element:

Section title

Navigation element

Title of product

Price of product

Paragraphs

CSS selector:

Sample code:

Rendered element:

Numbered Lists

CSS selector:

Sample code:

Rendered element:

Combined Elements

Main Navigation

Site Title

Browse some products

Search

Shirts

$24.99

$19.99

$24.99

$19.99

$24.99

$19.99

Payment Form

Price: $10

Price: $20

Price: $15

About Us

What does the company do or offer?

Who is the company to potential customers? (as a person)

Why might this company entice someone to purchase a product or service

Citations