Style Guide

In-text Link

CSS selector:

.intext-link

Sample code:

<a href="#grids" class="intext-link">Click Here</a>

Rendered element:

For more information on the grid structure,Click Here.

Navigation Button

CSS selector:

.nav-main-item .intext-link

Sample code:

<a href="myWork.html" class="nav-main-item intext-link">Home</a>

Rendered element:

My Works

Main Navigation

CSS selector:

.nav-main .containerTitle .leftBox .leftBoxSub .rightBox .text-link

Sample code:

<nav class="nav-main containerTitle">
              <div class="leftBox">
                <a class="text-link-h1b" href="index.html"><h1>Ridge Zhang</h1></a>
              </div>
              <div class="rightBox">
                <a href="myWork.html" class="text-link">My Works</a>
              </div>
            </nav>

Rendered element:

Headings and Paragraph

CSS selector:

#noIndent #noBG

Sample code:

<h1 id="noIndent">Header 1</h1>
            <h2 id="noBG">Header 2</h2>
            <h3>Header 3</h3>
            <h4>Header 4</h4>
            <p>This is paragraph text</p>

Rendered element:

Header 1

Header 2

Header 3

Header 4

This is paragraph text

Numbered Lists

CSS selector:

Sample code:

<ol>
              <li> Numeric Numbered List </li>
              <li> Second item </li>
              <li> Third item </li>
              <li> Fourth item </li>
            </ol>

Rendered element:

Numeric Numbered List
Second item
Third item
Fourth item

Colours Used

CSS selector:

.container .colourBlock .textWrap #b1 #b2 #b3 #b4 #b5 #6

Sample code:

<div class="container">
    <div class="colourBlock" id="b1">
      <p class="textWrap">Light Grey #F0F0F0</p>
    </div>
    <div class="colourBlock" id="b2">
      <p class="textWrap">Light Green #F0FAF0</p>
    </div>
    <div class="colourBlock" id="b3">
      <p class="textWrap">Yellow Green #9ACD32</p>
    </div>
    <div class="colourBlock" id="b4">
      <p class="textWrap whiteP">Forest Green #228B22</p>
    </div>
    <div class="colourBlock" id="b5">
      <p class="textWrap">White #FFFFFF</p>
    </div>
    <div class="colourBlock" id="b6">
      <p class="textWrap whiteP">Black #000000</p>
   </div>
  </div>

Rendered element:

Light Grey #F0F0F0

Light Green #F0FAF0

Yellow Green #9ACD32

Forest Green #228B22

White #FFFFFF

Black #000000

Grids

CSS selector:

.blockWrap .container .block

Sample code:

<div class="blockWrap">
            <div class="container">
              <div class="block">
              </div>
              <div class="block">
              </div>
              <div class="block">
              </div>
              <div class="block">
              </div>
              <div class="block">
              </div>
              <div class="block">
              </div>
              <div class="block">
              </div>
              <div class="block">
              </div>
              <div class="block">
              </div>
              <div class="block">
              </div>
              <div class="block">
              </div>
              <div class="block">
              </div>
            </div>
            </div>

Rendered element:

Lazyloading and Interactive Work

CSS selector:

.clickable .wrapForVisible .imageTextWrap .hoverVisible .lazyload .blur .promo .textWrap #capped #cappedPad

Sample code:

 <div class="clickable" id="capped">
  <div class="wrapForVisible imageTextWrap" id="cappedPad">
  <a class="hoverVisible" href="porsche.html">
    <img class="lazyload blur promo"
             src="image/spread_x1.jpg"
             data-src="image/spread_x3.jpg"
             data-srcset="image/spread_x2.jpg 2x"
             alt="Porsche Museum Final Information Spread.">
             <h3 class="textWrap">Information Spread</h3>
      <p class="textWrap"> 
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</p>
  </a>
</div>
</div>

Rendered element:

My Design

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.