Skip to content

Commit

Permalink
Merge pull request #279 from jeffdavidgordon/master
Browse files Browse the repository at this point in the history 
Grids/GC Style Guide Documentation Update
  • Loading branch information
@LaurentGoderre
LaurentGoderre committed Aug 23, 2012
2 parents 627f9ae + 96e98d5 commit 0225ee4
Show file tree
Hide file tree
Showing 22 changed files with 8,341 additions and 37,109 deletions.
1,402 changes: 1,402 additions & 0 deletions demos/grids/grid-base-eng.html
View file

Large diffs are not rendered by default.

1,100 changes: 1,100 additions & 0 deletions demos/grids/grid-base-full-eng.html
View file

Large diffs are not rendered by default.

504 changes: 504 additions & 0 deletions demos/grids/grid-button-bouton-eng.html
View file

Large diffs are not rendered by default.

305 changes: 305 additions & 0 deletions demos/grids/grid-color-eng.html
View file
@@ -0,0 +1,305 @@
<!DOCTYPE html>
<!--[if IE 7]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
www.tbs.gc.ca/ws-nw/wet-boew/terms / www.sct.gc.ca/ws-nw/wet-boew/conditions -->
<title>Application Template - Secondary menu 1 - GC Web Usability theme - Working examples - Web Experience Toolkit (WET)</title>

<link rel="shortcut icon" href="../../build/theme-gcwu-fegc/images/favicon.ico" />
<meta name="description" content="English description / Description en anglais" />
<meta name="dcterms.creator" content="English name of the content author / Nom en anglais de l'auteur du contenu" />
<meta name="dcterms.title" content="English title / Titre en anglais" />
<meta name="dcterms.issued" title="W3CDTF" content="Date published (YYYY-MM-DD) / Date de publication (AAAA-MM-JJ)" />
<meta name="dcterms.modified" title="W3CDTF" content="Date modified (YYYY-MM-DD) / Date de modification (AAAA-MM-JJ)" />
<meta name="dcterms.subject" title="scheme" content="English subject terms / Termes de sujet en anglais" />
<meta name="dcterms.language" title="ISO639-2" content="eng" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="../../build/js/jquery.min.js"></script>
<!--[if lte IE 8]>
<script src="../../build/js/polyfills/html5shiv-min.js"></script>
<link rel="stylesheet" href="../../build/grids/css/util-ie-min.css" />
<link rel="stylesheet" href="../../build/js/css/pe-ap-ie-min.css" />
<link rel="stylesheet" href="../../build/theme-gcwu-fegc/css/theme-ie-min.css" />
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="../../build/grids/css/util-min.css" />
<link rel="stylesheet" href="../../build/js/css/pe-ap-min.css" />
<link rel="stylesheet" href="../../build/theme-gcwu-fegc/css/theme-min.css" />
<!--<![endif]-->

<!-- CustomScriptsCSSStart -->
<!-- CustomScriptsCSSEnd -->
</head>

<body><div id="wb-body-sec">
<div id="wb-skip">
<ul id="wb-tphp">
<li id="wb-skip1"><a href="#wb-cont">Skip to main content</a></li>
<li id="wb-skip2"><a href="#wb-nav">Skip to secondary menu</a></li>
</ul>
</div>

<div id="wb-head"><div id="wb-head-in"><header>
<!-- HeaderStart -->
<nav role="navigation"><div id="gcwu-gcnb"><h2><span>Site</span> menu</h2><div id="gcwu-gcnb-in"><div id="gcwu-gcnb-fip">
<div id="gcwu-sig"><div id="gcwu-sig-in"><div id="gcwu-sig-eng" title="Government of Canada"><img src="../../build/theme-gcwu-fegc/images/sig-eng.gif" width="214" height="20" alt="Government of Canada" /></div></div></div>
<ul>
<li id="gcwu-gcnb1"><a target="_blank" rel="external" href="http://www.canada.gc.ca/menu-eng.html">Canada.gc.ca</a></li>
<li id="gcwu-gcnb2"><a target="_blank" rel="external" href="http://www.servicecanada.gc.ca/eng/home.shtml">Services</a></li>
<li id="gcwu-gcnb3"><a target="_blank" rel="external" href="http://www.canada.gc.ca/aboutgov-ausujetgouv/depts/menu-eng.html">Departments</a></li>
<li id="gcwu-gcnb-lang"><a href="application-secnav1-fra.html" lang="fr">Français</a></li>
</ul>
</div></div></div></nav>

<div id="gcwu-bnr" role="banner"><div id="gcwu-bnr-in">
<div id="gcwu-wmms"><div id="gcwu-wmms-in"><div id="gcwu-wmms-fip" title="Symbol of the Government of Canada"><img src="../../build/theme-gcwu-fegc/images/wmms.gif" width="126" height="30" alt="Symbol of the Government of Canada" /></div></div></div>
<div id="gcwu-title"><p id="gcwu-title-in"><a target="_blank" href="../../docs/index-eng.html">Web Experience Toolkit (WET)</a></p></div>

<section role="search"><div id="gcwu-srchbx"><h2>Search</h2>
<form action="#" method="post"><div id="gcwu-srchbx-in">
<label for="gcwu-srch">Search website</label><input id="gcwu-srch" name="gcwu-srch" type="search" value="" size="27" maxlength="150" />
<input id="gcwu-srch-submit" name="gcwu-srch-submit" type="submit" value="Search" data-icon="search" />
</div></form>
</div></section>
</div></div>

<nav role="navigation">
<div id="gcwu-psnb"><h2><span>Site</span> menu</h2><div id="gcwu-psnb-in"><div class="wet-boew-menubar mb-mega"><div>
<ul class="mb-menu" data-ajax-replace="../includes/menu-eng.inc">
<li><div><a href="http://wet-boew.github.com/wet-boew/docs/index-eng.html">WET project</a></div></li>
<li><div><a href="section2/index-eng.html">Section 2</a></div></li>
<li><div><a href="#">Section 3</a></div></li>
<li><div><a href="#">Section 4</a></div></li>
<li><div><a href="#">Section 5</a></div></li>
<li><div><a href="#">Section 6</a></div></li>
<li><div><a href="#">Section 7</a></div></li>
</ul>
</div></div></div></div>

<div id="gcwu-bc"><h2>Breadcrumb trail</h2><div id="gcwu-bc-in">
<ol>
<li><a target="_blank" href="../../docs/index-eng.html">Home</a></li>
<li><a target="_blank" href="../index-eng.html">Working examples</a></li>
<li><a href="index-eng.html">GC Web Usability theme</a></li>
<li>Application Template</li>
</ol>
</div></div>
</nav>
<!-- HeaderEnd -->
</header></div></div>

<div id="wb-core"><div id="wb-core-in" class="equalize">
<div id="wb-main" role="main"><div id="wb-main-in">
<!-- MainContentStart -->


<h1>Colour</h1>
<div class="wet-boew-prettify all-pre linenums">
<div class="span-4 module-table-contents">
<p>Table of contents</p>
<ul>
<li><a href="#background">Background colours</a></li>
<li><a href="#font">Font colours</a></li>
</ul>
</div>
<div class="clear"></div>
<h2 id="background">Background colours</h2>
<p>Use background colours to highlight content and &#47; or create information blocks that focus the user's attention. You can apply these background colours to a grid cell or to an HTML element for example, a heading. Do not overuse background colours or they will lose their effect.</p>
<table class="span-6 table-simplify">
<caption>Background colour options</caption>
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Paragraph</th>
<th scope="col">Span</th>
<th scope="col">Div</th>
</tr>
</thead>
<tr>
<td><code>background-white</code></td>
<td><h3 class="background-white">Lorem ipsum</h3></td>
<td><p class="background-white margin-top-none margin-bottom-none">Lorem ipsum</p></td>
<td><span class="background-white">Lorem ipsum</span></td>
<td><div class="background-white">Lorem ipsum</div></td>
</tr>
<tr>
<td><code>background-light</code></td>
<td><h3 class="background-light">Lorem ipsum</h3></td>
<td><p class="background-light margin-top-none margin-bottom-none">Lorem ipsum</p></td>
<td><span class="background-light">Lorem ipsum</span></td>
<td><div class="background-light">Lorem ipsum</div></td>
</tr>
<tr>
<td><code>background-medium</code></td>
<td><h3 class="background-medium">Lorem ipsum</h3></td>
<td><p class="background-medium margin-top-none margin-bottom-none">Lorem ipsum</p></td>
<td><span class="background-medium">Lorem ipsum</span></td>
<td><div class="background-medium">Lorem ipsum</div></td>
</tr>
<tr>
<td><code>background-dark</code></td>
<td><h3 class="background-dark">Lorem ipsum</h3></td>
<td><p class="background-dark margin-top-none margin-bottom-none">Lorem ipsum</p></td>
<td><span class="background-dark">Lorem ipsum</span></td>
<td><div class="background-dark">Lorem ipsum</div></td>
</tr>
<tr>
<td><code>background-accent</code></td>
<td><h3 class="background-accent">Lorem ipsum</h3></td>
<td><p class="background-accent margin-top-none margin-bottom-none">Lorem ipsum</p></td>
<td><span class="background-accent">Lorem ipsum</span></td>
<td><div class="background-accent">Lorem ipsum</div></td>
</tr>
<tr>
<td><code>background-highlight</code></td>
<td><h3 class="background-highlight">Lorem ipsum</h3></td>
<td><p class="background-highlight margin-top-none margin-bottom-none">Lorem ipsum</p></td>
<td><span class="background-highlight">Lorem ipsum</span></td>
<td><div class="background-highlight">Lorem ipsum</div></td>
</tr>
</table>
<div class="clear"></div>

<details class="span-6">
<summary>View Code</summary>
<p><pre>&lt;div class=&quot;span-3 background-dark&quot;&gt;
&lt;p&gt;Background dark&lt;/p&gt;
&lt;/div&gt;</pre></p>
</details>
<div class="clear"></div>



<h2 id="font">Font colours</h2>
<p>Use font colours to highlight content and / or create information blocks that focus the user's attention. Do not overuse font colours or they will lose their effect.</p>
<table class="table-simplify span-8">
<caption>
Font colour options
</caption>
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Details</th>
<th scope="col">Example</th>
</tr>
</thead>
<tr>
<td><code>color-medium</code></td>
<td>A muted dark tone used for accent text.</td>
<td class="color-medium">Resulting text colour</td>
</tr>
<tr>
<td><code>color-dark</code></td>
<td>The default text colour.</td>
<td class="color-dark">Resulting text colour</td>
</tr>
<tr>
<td><code>color-accent</code></td>
<td>Match the font colour to colour theme.</td>
<td class="color-accent">Resulting text colour</td>
</tr>
<tr>
<td><code>color-attention</code></td>
<td>Draw attention to something extra important.</td>
<td class="color-attention">Resulting text colour</td>
</tr>
</table>
<details class="span-6">
<summary>View Code</summary>
<p><pre>
&lt;p class=&quot;color-attention&quot;&gt;Super important text&lt;/p&gt;</pre></p>
</details>
<div class="clear"></div>
</div>

<!-- MainContentEnd -->
</div></div>

<div id="wb-sec"><div id="wb-sec-in"><nav role="navigation"><h2 id="wb-nav">Secondary menu</h2>
<div class="wb-sec-def">
<!-- SecNavStart -->
<section><h3><a href="#">Section 2.1</a></h3>
<ul>
<li><a href="#">Item 2.1a</a></li>
<li><a href="#">Item 2.1b</a></li>
<li><a href="#">Item 2.1c</a></li>
</ul>
</section>
<section><h3><a href="#">Section 2.2</a></h3>
<ul>
<li><a href="#">Item 2.2a</a></li>
<li><a href="#">Item 2.2b</a></li>
<li><a href="#">Item 2.2c</a></li>
</ul>
</section>
<section><h3><a href="section2/section23/index-eng.html">Section 2.3</a></h3>
<ul>
<li><a href="#">Item 2.3a</a></li>
<li><a href="#">Item 2.3b</a></li>
<li><a href="#">Item 2.3c</a></li>
</ul>
</section>
<section><h3><a href="#">Section 2.4</a></h3>
<ul>
<li><a href="#">Item 2.4a</a></li>
<li><a href="#">Item 2.4b</a>
<ul>
<li><a href="#">Item 2.4bi</a></li>
<li><a href="#">Item 2.4bii</a></li>
<li><a href="#">Item 2.4biii</a></li>
</ul>
</li>
<li><a href="#">Item 2.4c</a></li>
</ul>
</section>
<div class="top-level"><a href="#">Top level link 1</a></div>
<div class="top-level"><a href="#">Top level link 2</a></div>
<!-- SecNavEnd -->
</div>
</nav></div></div>
</div></div>

<div id="wb-foot"><div id="wb-foot-in"><footer><h2>Footer</h2>
<!-- FooterStart -->
<nav role="navigation"><div id="gcwu-sft"><h3>Site footer</h3><div id="gcwu-sft-in">
<div id="gcwu-tctr">
<ul>
<li class="gcwu-tc"><a href="#" target="_blank" rel="license">Terms and conditions</a></li>
<li class="gcwu-tr"><a href="#" target="_blank">Transparency</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="span-2"><div class="gcwu-col-head"><a href="#" target="_blank">About us</a></div></div>
<div class="span-2"><div class="gcwu-col-head"><a href="#" target="_blank">News</a></div></div>
<div class="span-2"><div class="gcwu-col-head"><a href="#" target="_blank">Contact us</a></div></div>
<div class="span-2"><div class="gcwu-col-head"><a href="#" target="_blank">Stay connected</a></div></div>
</div></div></nav>

<nav role="navigation"><div id="gcwu-gcft"><h3>Government of Canada footer</h3><div id="gcwu-gcft-in"><div id="gcwu-gcft-fip">
<ul>
<li><a target="_blank" rel="external" href="http://healthycanadians.gc.ca/index-eng.php"><span>Health</span><br />healthycanadians.gc.ca</a></li>
<li><a target="_blank" rel="external" href="http://www.voyage.gc.ca/index-eng.asp"><span>Travel</span><br />travel.gc.ca</a></li>
<li><a target="_blank" rel="external" href="http://www.servicecanada.gc.ca/eng/home.shtml"><span>Service Canada</span><br />servicecanada.gc.ca</a></li>
<li><a target="_blank" rel="external" href="http://www.jobbank.gc.ca/intro-eng.aspx"><span>Jobs</span><br />jobbank.gc.ca</a></li>
<li><a target="_blank" rel="external" href="http://actionplan.gc.ca/eng/index.asp"><span>Economy</span><br />actionplan.gc.ca</a></li>
<li id="gcwu-gcft-ca"><div><a target="_blank" rel="external" href="http://www.canada.gc.ca/menu-eng.html">Canada.gc.ca</a></div></li>
</ul>
</div></div></div></nav>
<!-- FooterEnd -->
</footer>
</div></div></div>

<!-- ScriptsStart -->
<script src="../../build/theme-gcwu-fegc/js/theme-min.js"></script>
<script src="../../build/js/settings.js"></script>
<script src="../../build/js/pe-ap-min.js"></script>
<!-- ScriptsEnd -->
</body>
</html>

0 comments on commit 0225ee4

Please sign in to comment.