P01 | Style Guide

Style guide for a product company called Bubbles.

Navigation Button

CSS selector:

.button-nav

Code:

<a href="#" class="button-nav">≡</a>

Rendered element:

≡

In-text link

CSS selector:

.intext-link

Code:

<a href="#" class="intext-link">view receipt</a>

Rendered element:

view receipt

Submit/Reset Buttons

CSS selector:

.sub-btn

Code:

<a href="#" class="sub-btn">send</a>

Rendered element:

send

Text Input Field

CSS selector:

input[type=text]

Code:

<input type="text" placeholder="First name">

Rendered element:


Headings

CSS selector:

.headings h2 h3 h4

Code:

<id = "headings"> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4>

Rendered element:

Heading 2

Heading 3

Heading 4

Paragraphs

CSS selector:

.par p

Code:

<p> <span class = "par"> Morbi dignissim ullamcorper eros a mollis. Duis nec volutpat nulla. Duis fermentum vitae lacus quis dapibus. Nullam ut dui diam. Nullam sodales eget quam nec porta. Nunc et neque dignissim, tincidunt magna et, ornare lacus.</span></p>

Rendered element:

Morbi dignissim ullamcorper eros a mollis. Duis nec volutpat nulla. Duis fermentum vitae lacus quis dapibus. Nullam ut dui diam. Nullam sodales eget quam nec porta. Nunc et neque dignissim, tincidunt magna et, ornare lacus.

Bulleted Lists

CSS selector:

#bl

Code:

<ul id="bl">
<li>Item One</li>
<li>Item Two</li>
</ul>

Rendered element:

Numbered Lists

CSS selector:

#nl

Code:

<ol id="nl">
<li>Item </li>
<li>Item </li>
</ol>

Rendered element:

  1. Item
  2. Item

Main Navigation

CSS selector:

#navbar

Code:

<ol id="navbar">
<li>home</li>
<li>events</li>
<li>about</li>
<li>products</li>
<li>contact</li>
</ol>

Rendered element:

Product Listing

CSS selector:

#products

Code:

<ul id="products">
<li>bubbles</li>
<h4>shaving foam</h4>
<p>Suspendisse in ultrices quam, quis fermentum dolor. Proin rhoncus ac enim fringilla condimentum.</p>
<li>cream</li>
<h4>shaving cream</h4>
<p>Sed volutpat nisl eget rutrum feugiat. In sollicitudin felis eu nisl ultrices, faucibus condimentum lacus venenatis.</p>
<li>clean</li>
<h4>cleaning kit</h4>
<p>Mauris lorem turpis, finibus quis accumsan quis, convallis sodales est. Duis posuere purus cursus finibus lacinia.</p>
</ul>

Rendered element:

Griding System

Original With grid

Colour swatches

Blue


#C1E3FE

Light Grey


#DFDFDF

Drak Grey


#464646

White


#FFFFFF