Go to top

Chum Buddies Style Guide

Interactive Elements

In-text link

In-text link is in Avenir Book font and 16px for smartphone.

CSS selector:

.link

Sample code:

<a class="link" href="">Sample Link</a>

Rendered element:

Sample Link

Text Input Field and Label

CSS selectors:

.label

.inputfield

Sample Code:

<label class="label">Email Address</label>
 <input type="text" id="email-input" name="lastname">

Rendered element:

18px

Avenir Book

Calendar

CSS selectors:

.calendar-input

#dateofbirth

#meeting-date

Sample Code:

<label id="textfieldlabel">Date of Birth</label>
 <input type="text" id="dateofbirth" class="calendar-input"/>

<label id="textfieldlabel">Meeting</label>
 <input type="text" id="meeting-date" class="calendar-input"/>

Rendered Element:

Table

CSS selectors:

.payment-summary

Sample Code:

<div class="payment-summary">
  <table>
   <tr>
    <td>Number Of Friends</td>
    <td>3</td>
   </tr>
   <tr>
    <td>Number Of Hours For Each Friend</td>
    <td>3</td>
   </tr>
   <tr>
    <td>Total Amount</td>
    <td>$225.00</td>
   </tr>
  </table>
 </div>

Rendered Element:

Number Of Friends 3
Number Of Hours For Each Friend 5
Total Amount $225.00

Text Elements

Headings

The font for the headings is Avenir. The thickness of the font represents the hierarchy of the overall structure of the website.

CSS selectors:

.pageheading

.subpageheading

.sectionheading

Colors:

  • Background:

    #E9AB69

  • Font:

    #FFFFFF

Sample code for Page Heading:

<h1 class="pageheading">Page Heading</h1>

Rendered Element:

Page Heading

32px

Avenir Heavy

Sample code for Subpage Heading:

<h2>Subpage Heading</h2>

Rendered Element:

Subpage Heading

26px

Avenir Medium

Sample code for Section Heading:

<h3>Section Heading</h3>

Rendered Element:

Section Heading

22px

Avenir Medium

Paragraphs

Font is Avenir Light. Default size for body text is 18px.

CSS selector:

.paragraph

Sample code for Paragraphs:

<p class="paragraph">Lorem ipsum dolor sit amet.</p>

Sample Paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Bulleted Lists

Items in bulleted lists for smartwatch and smartphone are 14px. Items in bulleted lists for game console are 18px.

CSS selector:

.bulleted-list

Sample code for Bulleted List:

<ul class="bulleted-list">
   <li>Rule 1</li>
   <li>Rule 2</li>
   <li>Rule 3</li>
 </ul>

Sample Bulleted List:

  • Rule 1
  • Rule 2
  • Rule 3

Numbered Lists

Items in bulleted lists for smartwatch and smartphone are 14px. Items in bulleted lists for game console are 18px.

CSS selector:

.numbered-list

Sample code for Numbered List:

<ul class="numbered-list">
   <li>Item A</li>
   <li>Item B</li>
   <li>Item C</li>
 </ul>

Sample Numbered List:

  1. Item A
  2. Item B
  3. Item C

Combined Elements

Product Listing

CSS Selector:

.productlisting

Sample code for product listing

<div class="grid-row profile-row">
    <div class="grid-col-4of4">
      <div class="profile-description">
        <div class="profile-photo">
          <label for="select-friend1">
             <img alt="friend profile photo" src="img/friend1.png">
          </label>
        </div>
        <p class="friend-name">Bob Graham</p>
        <p class="friend-description">My name is Bob. I work as a Firefighter at the Vancouver Fire Department. I love to work on my car, workout, hike, camp, go to concerts, party, and play video games.</p>
         <a href="" class="link">Click to see his full profile</a>
      <div class="select-checkbox">
        <input type="checkbox" name="friend" value="" class="checkbox" id="select-friend1">
      </div>
    </div>
  </div>
</div>

Rendered element:

Bob Graham

My name is Bob. I work as a Firefighter at the Vancouver Fire Department. I love to work on my car, workout, hike, camp, go to concerts, party, and play video games.

Click to see his full profile

Website Grid Structure

CSS Selector:

.grid-row

.grid-col-1of4

.grid-col-2of4

.grid-col-3of4

.grid-col-4of4

Sample code for grid

<div class="grid-row">
   <div class="grid-col-1of4"></div>
   <div class="grid-col-1of4"></div>
   <div class="grid-col-1of4"></div>
   <div class="grid-col-1of4"></div>
 </div>

Website Grid Structure