P01: Style Guide

Code Syntax

ID/Class Naming

Use meaningful or generic names for ID and Class to show the purpose of the element.

<div id="#codeSyntax"></div>

Multi-words Naming

Use Capitalized word for two or more words naming for ID and Class elements.

<div class="lowercase"></div>
<div class="twoWordsNaming"></div>

General Coding

Use lowercase only: HTML element names, attributes, attribute values, CSS selectors (exception of multi-words name for ID and Class), properties, and property values.

<img src="img/imageLocation" alt="description of the image"> .navButton {
   color: white;
}

General Formatting

Use a new line for every block, section, div, list, and indent every child elements that follows. Every open tag should have a closing tag.

<div>
    <div>
        <p>New line for every block, section, div, and list, but exception for paragraph</p>
    </div>
</div>

Indention

Indent by one tab at a time. Do not use spaces for indention in code or sample code.

*Tips* use 2 &nbsp; to get space for displaying sample codes indention.

    &nbsp; &nbsp; indented

Comments

Have necessary comments when needed to explain the purpose of the code. Add opening and closing comment for every sectionand block.

<!-- Short comment for a section -->
    <...>
<!-- Short comment for a section end here --> <!--
    This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment.
    This is a long comment. This is a long comment. This is a long comment. This is a long comment. This is a long comment.
-->

Interactive Elements

In-text Link

CSS Selector:

.inTextLink

Sample Code:

<a href="#" class="in_text">in-text Link</a>

Rendered Element:

I am an in-text Link.

Navigation Button

CSS Selector:

.navButton

Sample Code:

<a href="#" class="navButton">Navigation Button</a>

Rendered Element:

Navigation Button

Submit and Reset Buttons

CSS Selector:

.submitButton / .resetButton

Sample Code:

<button type="submit" name="submit" class="submitButton">Submit Button</button>
<button type="reset" name="reset" class="resetButton">Reset Button</button>

Rendered Element:

Text Input Field and Label

CSS Selector:

form[method=login]

input[type=text]

input[type=password]

Sample Code:

<form method="login" action="#login">
    <label for="formUsername">Username:</label>
    <input type="text" id="formUsername" placeholder="Username">

    <label for="formPassword">Password:</label>
    <input type="password" id="formPassword" placeholder="Password">
</form>

Rendered Element:

Text Styling

Headings

CSS Selector:

h1

h2

h3

Sample Code:

<h1>Heading level 1</h1>

Rendered Element:

Heading level 1

Heading level 2

Heading level 3

Paragraph

CSS Selector:

p

Sample Code:

<p>This is an example of a paragraph.</p>

Rendered Element:

This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph.

Bulletted List

CSS Selector:

ul.bullettedList

Sample Code:

<ul class="bullettedList">
    <li>bulletted list</li>
    <li>bulletted list</li>
    <li>bulletted list</li>
</ul>

Rendered Element:

  • bulletted list
  • bulletted list
  • bulletted list

Numbered List

CSS Selector:

ol.numberedList

Sample Code:

<ol class="numberedList">
    <li>numbered list</li>
    <li>numbered list</li>
    <li>numbered list</li>
</ol>

Rendered Element:

  1. numbered list
  2. numbered list
  3. numbered list

Combined Elements

Main Navigation

CSS Selector:

.box, navButton, navBoxItem

Sample Code:

<nav class="navBox">
    <a href="#link" class="navButton navBoxItem">Home</a>
    <a href="#link" class="navButton navBoxItem">Creatures</a>
    <a href="#link" class="navButton navBoxItem">Products</a>
    <a href="#link" class="navButton navBoxItem">Track</a>
    <a href="#link" class="navButton navBoxItem">About Us</a>
</nav>

Rendered Element:

Product Listing

CSS Selector:

.productBox

.productItem

.productName

.productDetail

.productButtonsBox

.productButton

Sample Code:

<div class="productBox">
    <div class="productBox">
        <h2 class="productName">Product Name</h2>
        <figure>
            <img src="img/image location" alt="image description">
        </figure>
        <p class="productDetail>Sed a mauris sit amet dui malesuada tempor a vitae diam...<a href="">Read More</a></p>
        <div class="productButtonsBox">
            <a class="productButton>CART</a>
            <a class="productButton>SIMILAR</a>
            <a class="productButton>BUY</a>
        </div>
    </div>
</div>

Rendered Element:

Product Name

a red octopus underwater

Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more

CART SIMILAR BUY

Product Name

a nautilus underwater

Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more

CART SIMILAR BUY

Product Name

a cuttlefish underwater

Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more

CART SIMILAR BUY

Product Name

an aquarium

Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more

CART SIMILAR BUY

Grid Structure

CSS Selector:

.colGrid

.colItem

.colItemName

Sample Code:

<div class="colGrid">
    <div class="colItem">
        <p class="colItemName"> 1/5 </p>
        <p class="colItemName"> 1/5 </p>
        <p class="colItemName"> 1/5 </p>
        <p class="colItemName"> 1/5 </p>
        <p class="colItemName"> 1/5 </p>
    </div>
</div>

Rendered Element:

1/4

1/4

1/4

1/4

1/5

1/5

1/5

1/5

1/5

Colour Swatches

CSS Selector:

colorSwatchItem, cw1

Sample Code:

<ul>
    <li class="color-swatch-item cw1"> #99CCCC </li>
    <li class="color-swatch-item cw2"> #C0DFD9 </li>
    <li class="color-swatch-item cw3"> #C5D5CD </li>
    <li class="color-swatch-item cw4"> #9FA8A3 </li>
    <li class="color-swatch-item cw5"> #484848 </li>
    <li class="color-swatch-item cw6"> #333333 </li>
</ul>

Rendered Element:

  • #99CCCC
  • #C0DFD9
  • #C5D5CD
  • #9FA8A3
  • #484848
  • #333333
  • #4385b7
  • #225c89
  • #f9bd77
  • #f79c7b