Skip to main content

Introduction

Style guide is a living document of code, which details all the various elements and coded modules of the GHG Protocol website. It ensures consistency within the website and enforces best practice in usage and in language composition, visual composition and typography. Beyond its use in consolidating the front-end code, it also documents the visual language, such as header styles and color palettes, fonts and text formats used to create the site. This way, it’s a one-stop place for the entire team—from product owners to designers and developers—to reference when discussing site changes and iterations, understand how various modules can be used.

This Style Guide tells you what you need to know about GPG Protocol site design in plain language, with understandable examples, in a format that won’t test your techno-wonk decoding skills.

From content management perspective having style guide it is impossible when new styles are written or used in a wrong way resulting in messed up output of the content. It also creates a shared vocabulary of names for components (teaser, global navigation, carousel…), so that team can refer to different regions of the site and have a shared understanding of its meaning.

The final benefit is that you can use this guide to do a quick QA pass. The guide may not be identical to the pages you eventually build out, but it can point out issues you may have in various browsers.

Colours

Main palette

#ffffff

RGB: 255, 255, 255

#cccccc

RGB: 204, 204, 204

#545456

RGB: 84, 84, 86

#e8f3f2

RGB: 232, 243, 242

#a4b6b5

RGB: 164, 182, 181

#0a7e76

RGB: 10, 126, 118

#ff5959

RGB: 255, 89, 89

#0074bd

RGB: 0, 116, 189

#00c6b9

RGB: 0, 198, 185

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Example:

H1. HEADING 1

H2. HEADING 2

H3. HEADING 3

H4. HEADING 4

H5. HEADING 5
H6. HEADING 6

Code:

<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>

Text formats

Headings

Example:

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Code:

<p>...</p>

Body lead

Make a paragraph stand out

Example:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Code:

<p class="leadtext">...</p>

Inline text elements

Marked text

Example:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Code:

Vivamus sagittis lacus vel augue <mark>laoreet</mark> rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Deleted text

Example:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Code:

<del>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</del>

Strikethrough text

Example:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Code:

<s>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</s>

Inserted text

Example:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Code:

<ins>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</ins>

Small text

Example:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Code:

<small>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</small>

Bold text

Example:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Code:

<strong>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</strong>

Italics text

Example:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Code:

<em>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</em>

Alignment classes

Easily realign text to components with text alignment classes.

Example:

Left align text

Center align text

Right align text

Code:

<p> class="align_left">Left align text</p>
<p> class="align_center">Center align text</p>
<p> class="align_right">Right align text</p>

Lists

Unordered list

Example:

  • First
  • Second
  • Third
  • Fourth
    • Sub first
    • Sub second
      • Sub sub first
      • Sub sub second
      • Sub sub third
    • Sub third

Code:

<ul>
<li>First</li>
<li>...</li>
</ul>

Unordered list

Example:

  1. First
  2. Second
  3. Third
  4. Fourth
    1. Sub first
    2. Sub second
      1. Sub sub first
      2. Sub sub second
      3. Sub sub third
    3. Sub third

Code:

<ol>
<li>First</li>
<li>...</li>
</ol>

Arrowed list

Example:

  1. First
  2. Second
  3. Third
  4. Fourth
    1. Sub first
    2. Sub second
      1. Sub sub first
      2. Sub sub second
      3. Sub sub third
    3. Sub third

Code:

<ol class="arrow-list">
<li>First</li>
<li>...</li>
</ol>

Links

Example:

This is a link

Code:

This is a <a href="#">link</a>

Blockquote

For quoting blocks of content from another source within your document.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Code:

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Tables

Example 1:

Course Name Prerequisite Live Instructor
Corporate Standard Training Webinar None Yes
Scope 2 Guidance Training Webinar Familiarity with the Corporate Standard Yes
Corporate Value Chain (Scope 3) Standard E-Learning Familiarity with the Corporate Standard No
Product Life Cycle Standard E-Learning None No
Policy and Action Standard E-Learning None No
Mitigation Goal Standard E-Learning None No

Code:

 <table>
  <tbody>
   <tr>
    <th width="200">Course Name</th>
    <th width="200">Prerequisite</th>
    <th>Live Instructor</th>
   </tr>
   <tr>
    <td>Corporate Standard Training Webinar</td>
    <td>None</td>
    <td>Yes</td>
   </tr>
   <tr>
    <td>Scope 2 Guidance Training Webinar</td>
    <td>Familiarity with the Corporate Standard</td>
    <td>Yes</td>
   </tr>
   <tr>
    <td>Corporate Value Chain (Scope 3) Standard E-Learning</td>
    <td>Familiarity with the Corporate Standard</td>
    <td>No</td>
   </tr>
   <tr>
    <td>Product Life Cycle Standard E-Learning</td>
    <td>None</td>
    <td>No</td>
   </tr>
   <tr>
    <td>Policy and Action Standard E-Learning</td>
    <td>None</td>
    <td>No</td>
   </tr>
   <tr>
    <td>Mitigation Goal Standard E-Learning</td>
    <td>None</td>
    <td>No</td>
   </tr>
  </tbody>
 </table>

Example 2:

N2O emissions from the production of adipic acid
Guidance Document (30 Kb) Version: 2.0
Excel Worksheet (91 Kb) Version: 2.0

Code:

 <table>
  <thead>
   <tr>
    <td colspan="3">N2O emissions from the production of adipic acid</td>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td class="file pdf"></td>
    <td>Guidance Document (30 Kb)</td>
    <td>Version: 2.0</td>
   </tr>
   <tr>
    <td class="file xls"></td>
    <td>Excel Worksheet (91 Kb)</td>
    <td>Version: 2.0</td>
   </tr>
  </tbody>
 </table>