P01 - Style Guide Template

MENU

Interactive Elements

Text link

CSS selector:

.visit-link

Sample code:

<a href="#" class="visit-link">VISIT</a>

Rendered element:

VISIT

Navigation Link

CSS selector:

.btn-default

Sample code:

<a href="#" class="btn-default">VIEW DETAIL</a>

Rendered element:

VIEW DETAIL

Headings

Headings

CSS selector:

.heading1

.heading2

.heading3

.heading4

Sample code:

<a class="heading1">Heading example one</a><br>

Rendered element:

Heading example one
Heading example two
Heading example three
Heading example four

Paragraphs

.paragraphs

Sample code:

<div class="paragraphs"<p>The project was to create a graphic story by using original photographs as a primary medium based on a self-created narrative. The first step was to write a short story and the second step was photo shooting. After reviewing all the photographs, I selected out the ones I would use for each panel to convey the story. </p> </div>

Rendered element:

The project was to create a graphic story by using original photographs as a primary medium based on a self-created narrative. The first step was to write a short story and the second step was photo shooting. After reviewing all the photographs, I selected out the ones I would use for each panel to convey the story.

Combined Elements

Main Navigation

CSS selector:

nav

.nav a

.nav a:hover

.nav a:after

.nav a:focus

Sample code:

<div> <a href="javascript:void(0)" class="open-menu">MENU</a><div> <nav> <a href="home.html">HOME</a> <a href="about.html">ABOUT</a> <a href="contact.html">CONTACT</a> </nav> <div> <a href="javascript:void(0)" class="close-menu">CLOSE</a><div>

Rendered element:

VISIT

Image

CSS selector:

.grid

Sample code:

<div > <src="img/comic1.jpg" alt="comic1">

Rendered element:

comic1

Citations