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:

  1. Numeric Numbered List
  2. Second item
  3. Third item
  4. 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: