Navigation

CSS selector:

.button-nav

.button-nav:hover

.button-nav:active

.button-nav:focus

.active

Sample code:


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

Rendered element:

Navigation

In-text link

CSS selector:

.in-text-link

.in-text-link:hover

.in-text-link:active

.in-text-link:focus

Sample code:


           <p class="para">I am an <a href="#" class="in-text-link">in-text link</a> example </p>

Rendered element:

I am an in-text link example.

Submit/Reset Buttons

CSS selector:

.button-submit

.button-submit:active

.button-submit:hover

.button-submit:focus

Sample code:

<a href="#" class="button-submit">Submit</a>

Rendered element:

Submit

Text Input Field

CSS selector:

.form-style

input:focus

Sample Code


            <form method="post" action="#">

                <label for=form-name" class="para">Name:</label>

                <input type="text" id="form-name" placeholder="Your name" class="form-style">

            </form>

Rendered element:

Headings

CSS selector:

.heading1

Sample code:

<h1 class="heading">Headings</h1>

Rendered element:

Headings

Paragraphs

CSS selector:

.para

Sample code:

<p class="para">Paragraph text example. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus vestibulum ligula, in feugiat mi tincidunt nec. Aliquam viverra vulputate odio eget accumsan. Aenean faucibus elit elit, quis varius sapien efficitur a. Sed non sapien non risus ullamcorper ornare. Sed non magna quis ex venenatis egestas a eu nibh.</p>

Rendered element:

Paragraph text example. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus vestibulum ligula, in feugiat mi tincidunt nec. Aliquam viverra vulputate odio eget accumsan. Aenean faucibus elit elit, quis varius sapien efficitur a. Sed non sapien non risus ullamcorper ornare. Sed non magna quis ex venenatis egestas a eu nibh.

Bulleted Lists

CSS selector:

.bullet-style:before

Sample code:


              <ul> 

                   <li class="bullet-style">Bullet list example 1</li>

                   <li class="bullet-style">Bullet list example 2</li>

              </ul>

Rendered element:

Bullet list example 1
Bullet list example 2

Numbered Lists

CSS selector:

ol li:before

.numbered-style

Sample code:


            <ol>

                <li class="numbered-style">Numbered list example 1</li>

                <li class="numbered-style">Numbered list example 2</li>

            </ol>

Rendered element:

Numbered list example 1
Numbered list example 2

Main Navigation

CSS selector:

.button-nav

.button-nav:hover

.button-nav:active

.button-nav:focus

.active

Sample code:


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

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

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

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

Rendered element:

Home About Us Online Order Contact Us

Product Listing

CSS selector:

.product

a.product

a.product:hover

a.product:active

a.product:focus

Sample code:


              <a href="#" class="product">

                  <img src="img/product1.jpg" alt="bubble tea"><h3>Original Bubble Tea</h3>

                  <p>$4.45</p>

              </a>


              <a href="#" class="product">

                  <img src="img/product2.jpg" alt="bubble tea"><h3>Rainbow Bubble Tea</h3>

                  <p>$4.45</p>

              </a>


              <a href="#" class="product">

                  <img src="img/product3.jpg" alt="bubble tea"><h3>Original QQ</h3>

                  <p>$4.45</p>

              </a>


              <a href="#" class="product">

                  <img src="img/product4.jpg" alt="bubble tea"><h3>Red Bean Matcha</h3>

                  <p>$4.45</p>

              </a>

Rendered element:

Original Bubble Tea

$4.45

Rainbow Bubble Tea

$4.45

Original QQ

$4.45

Red Bean Matcha

$4.45

Grid Structure and Colour Swatch

CSS selector:

.container

.block

.block:nth-of-type(1)

.block:nth-of-type(2)

.block:nth-of-type(3)

.block:nth-of-type(4)

.block:nth-of-type(5)

.grid-col-1of5

[class^='grid-col-']

.grid-row::after

@media (min-width: 30em)

Sample code:


              <div class="container">

                <div class="grid-row">

                  <div class="grid-col-1of5 block"></div>

                  <div class="grid-col-1of5 block"></div>

                  <div class="grid-col-1of5 block"></div>

                  <div class="grid-col-1of5 block"></div>

                  <div class="grid-col-1of5 block"></div>

                </div>

              </div>

P01 - Style Guide

A style guide for Bubble Tea House website.

Navigation

CSS selector:

Sample code:

Rendered element:

In-text link

CSS selector:

Sample code:

Rendered element:

Submit/Reset Buttons

CSS selector:

Sample code:

Rendered element:

Text Input Field

CSS selector:

Sample Code

Rendered element:

Headings

CSS selector:

Sample code:

Rendered element:

Headings

Paragraphs

CSS selector:

Sample code:

Rendered element:

Bulleted Lists

CSS selector:

Sample code:

Rendered element:

Numbered Lists

CSS selector:

Sample code:

Rendered element:

Main Navigation

CSS selector:

Sample code:

Rendered element:

Product Listing

CSS selector:

Sample code:

Rendered element:

Original Bubble Tea

Rainbow Bubble Tea

Original QQ

Red Bean Matcha

Grid Structure and Colour Swatch

CSS selector:

Sample code:

Rendered element: