Style Guide

Colour Palette:

White: #ffffff

website background

Dark Grey: #202021

text colour

Olive Green: #818476

accent colour
subheading colour

Color Choices:

CSS selector:

.cardboardColor

.mintColor

.tealColor

.brickColor

.mustardColor

.skyColor

.blackColor

.darkblueColor

.aquaColor

Sample Code:

Rendered element:

Form Input Field

CSS selector:

form { }

input { }

label { }

input[type='checkbox']

input[id='quantity']

.comment

Sample code:

 
          <div class="checkoutelement">
           <h2 class ="checkoutheaders">Checkout Header</h2>
            <form action="demo_form.asp" method="get" style="padding-bottom: 1em">
              <input type="checkbox" name="Shipping" checked="checked"> A Checkbox<br>
            </form>
            <div class="dropdown grid-col-checkout-6of12right">
              <label for="dropdown-credit">A Dropdown</label>
              <button class="dropdown-picker" id="dropdown-credit" style="width: 100%">Options   ▾</button>
              <div class="dropdown-content" style="width: 100%">
                <a href="#">Option 1</a>
                <a href="#">Option 2</a>
                <a href="#">Option 3</a>
              </div>
          </div>

          <div class="grid-col-m-4of12 grid-col-4of12" style="text-align: left">
            <form method="post" action="#">
              A Text Input Field
              <input type="text" required="required"><br>
              A Comment Box Text Area
              <br>
              <label for="commentinput"></label>  
              <textarea class="comment" required="required" id="commentinput"> </textarea>
              <br>
              <br>
              <a class="button-fill" href="#"> Submit </a>
            </form>
          </div>

Rendered element:

Checkout Header

Text Elements Section:

Headings

CSS selector:

.heading1

.heading2

.heading3

.heading4

Sample code:


        		<p href="#" class="heading1">Heading1</p>
        		<p href="#" class="heading2">Heading2</p>
        		<p href="#" class="heading3">Heading3</p>
            <p href="#" class="heading4">Heading4</p>

Rendered Element:

Heading1

Heading2

Heading3

Heading4

Subheadings

CSS selector:

.heading2

.title-info

Sample code:


            <p class="heading2" ><span style="color: #818476">Subheading</span></p>

Rendered Element:

Subheading1

Subeading2

Paragraphs

CSS selector:

.paragraph

Sample code:


        		<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis egestas risus. Proin ut posuere lorem, auctor vehicula risus. Maecenas a risus lacinia, laoreet nisl sit amet, fringilla tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc urna ante, congue eu eros vel, elementum feugiat mi.</p>

Rendered Element:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis egestas risus. Proin ut posuere lorem, auctor vehicula risus. Maecenas a risus lacinia, laoreet nisl sit amet, fringilla tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc urna ante, congue eu eros vel, elementum feugiat mi.

Bulleted Lists

CSS selector:

.ulist

Sample code:


        		<ul class="ulist">
					    <li> an item on this list </li>
        			<li> an item on this list </li>
        			<li> an item on this list </li>
        		</ul>

Rendered Element:

an item on this list
an item on this list
an item on this list

Numbered Lists

CSS selector:

.olist

Sample code:


        		<ol class="olist">
					<li> first item on this list </li>
        			<li> second item on this list </li>
        			<li> third item on this list </li>
        		</ol>

Rendered Element:

first item on this list
second item on this list
third item on this list

Combined Elements Section:

Main Navigation

CSS selector:

.button-nav

.logobutton

Sample code:


             <header id="top">
                <nav class="grid-row">
                  <div class="grid-col-m-2of12 grid-col-1of12">
                      <a class="logobutton" href="http://www.sfu.ca/~kristyh/iat339/P02/Final%20Deliverables/Home.html">
                        <img src="img/logo.png" class="logo">
                     </a>
                  </div>

                  <div class="grid-col-m-2of12 grid-col-1of12" style="float: right">
                      <a class="button-nav" href="http://www.sfu.ca/~kristyh/iat339/P02/Final%20Deliverables/Cart.html">Cart</a>
                  </div>

                  <div class="grid-col-m-2of12 grid-col-1of12" style="float: right">
                      <a class="button-nav" href="http://www.sfu.ca/~kristyh/iat339/P02/Final%20Deliverables/About.html">About Us</a>
                  </div>

                  <div class="grid-col-m-2of12 grid-col-1of12" style="float: right">
                      <a class="button-nav" href="http://www.sfu.ca/~kristyh/iat339/P02/Final%20Deliverables/RecommendedRoutes.html">Plan Trip</a>
                  </div>

                  <div class="grid-col-m-2of12 grid-col-1of12" style="float: right">
                      <a class="button-nav" href="http://www.sfu.ca/~kristyh/iat339/P02/Final%20Deliverables/Products.html">Products</a>
                  </div>
                </nav>
              </header>

Rendered Element:

Cart About Us Plan Trip Products

Product Listing

CSS selector:

.heading4

.in-text-link

.productPrice

.mintColor

.tealColor

.brickColor

Sample code:


            <div class="grid-col-m-6of12 grid-col-4of12">
              <figure>
                <a href="http://www.sfu.ca/~kristyh/iat339/P02/Final%20Deliverables/AgathaBikeMint.html">
                  <img src="img/bike_agatha.jpg" alt="Agatha Bike" height="300" width="500">
                </a>
                <h3 class="heading4"> 
                  <a class="in-text-link" 
                     href="http://www.sfu.ca/~kristyh/iat339/P02/Final%20Deliverables/AgathaBikeMint.html"> 
                     Agatha Bike 
                  </a>
                </h3>
                <p class="productPrice"> <em>>>CAD $193</em>> </p>
                <div style="text-align: left">>
                  <a class="mintColor" 
                     href="http://www.sfu.ca/~kristyh/iat339/P02/Final%20Deliverables/AgathaBikeMint.html">
                  </a>
                  <a class="tealColor" 
                     href="http://www.sfu.ca/~kristyh/iat339/P02/Final%20Deliverables/AgathaBikeTeal.html">
                  </a>
                  <a class="brickColor" 
                     href="http://www.sfu.ca/~kristyh/iat339/P02/Final%20Deliverables/AgathaBikeBrick.html">
                  </a>
                </div>
             </figure>
            </div>

Rendered Element:

Grid

Rendered Element:

Style Guide

Colour Palette:

White: #ffffff

Dark Grey: #202021

Olive Green: #818476

Color Choices:

CSS selector:

Sample Code:

Rendered element:

Navigation Button

CSS selector:

Sample code:

Rendered element:

In-text link

CSS selector:

Rendered element:

Button with green fill

CSS selector:

Sample code:

Rendered element:

Button with outline

CSS selector:

Sample code:

Rendered element:

Form Input Field

CSS selector:

Sample code:

Rendered element:

Checkout Header

Text Elements Section:

Headings

CSS selector:

Sample code:

Rendered Element:

Subheadings

CSS selector:

Sample code:

Rendered Element:

Paragraphs

CSS selector:

Sample code:

Rendered Element:

Bulleted Lists

CSS selector:

Sample code:

Rendered Element:

Numbered Lists

CSS selector:

Sample code:

Rendered Element:

Combined Elements Section:

Main Navigation

CSS selector:

Sample code:

Rendered Element:

Product Listing

CSS selector:

Sample code:

Rendered Element:

Agatha Bike

Grid

Rendered Element: