Skip to content

Commit

Permalink
Merge branch 'master' of github.com:wet-boew/wet-boew
Browse files Browse the repository at this point in the history
  • Loading branch information
Paul Jackson authored and Paul Jackson committed Aug 24, 2012
2 parents 167b83b + 39a4b22 commit dba5544
Show file tree
Hide file tree
Showing 26 changed files with 1,463 additions and 675 deletions.
97 changes: 52 additions & 45 deletions demos/grids/grid-base-eng.html
Expand Up @@ -101,45 +101,43 @@
<h1>Grid system</h1>
<div class="wet-boew-prettify all-pre linenums">

<p >This page demonstrates grid options when there a left menu. Alternatively view the: <a class="button button-confirm" href="grid-base-full-eng.html" >No left menu grid options</a></p>
<p>This page demonstrates grid options when there a left menu. Alternatively view the: <a class="button button-accent" href="grid-base-full-eng.html" >No left menu grid options</a></p>

<div class="clear"></div>
<div class="span-6 module-table-contents">
<p>Table of contents</p>
<ul class="column-three">
<li><a href="#overview">Grid overview</a></li>
<li><a href="#structure">Grid structure</a>
<ul>
<li><a href="#buildingblocks">Grid building blocks</a>
<ul>
<li><a href="#six">Six grid columns</a></li>
<li><a href="#twelve">Twelve grid columns</a></li>
</ul>
</li>
<li><a href="#rows">Grid rows</a></li>
<li><a href="#dimensions">Grid dimensions</a></li>


</ul>
</li>
<li><a href="#layout">Grid layout</a>
<ul>
<li><a href="#onec">One column</a></li>
<li><a href="#twoc">Two colums</a></li>
<li><a href="#threec">Three colums</a></li>
<li><a href="#fourc">Four colums</a></li>
<li><a href="#fivec">Five colums</a></li>
<li><a href="#sixc">Six colums</a></li>
<li><a href="#sevenc">Seven to twelve columns</a></li>
</ul>
</li><li><a href="#parents">Grid parents and children</a>
<ul>
<li><a href="#rowstart"><code>row-start</code> and <code>row-end</code> <abbr title="Cascading Style Sheet">CSS</abbr></a>
</li>
<li><a href="#equal">Equal height columns</a></li>
</ul>
</li>
</ul>
<ul class="column-three">
<li><a href="#overview">Grid overview</a></li>
<li><a href="#structure">Grid structure</a>
<ul>
<li><a href="#buildingblocks">Grid building blocks</a>
<ul>
<li><a href="#six">Six grid columns</a></li>
<li><a href="#twelve">Twelve grid columns</a></li>
</ul>
</li>
<li><a href="#rows">Grid rows</a></li>
<li><a href="#dimensions">Grid dimensions</a></li>
</ul>
</li>
<li><a href="#layout">Grid layout</a>
<ul>
<li><a href="#onec">One column</a></li>
<li><a href="#twoc">Two colums</a></li>
<li><a href="#threec">Three colums</a></li>
<li><a href="#fourc">Four colums</a></li>
<li><a href="#fivec">Five colums</a></li>
<li><a href="#sixc">Six colums</a></li>
<li><a href="#sevenc">Seven to twelve columns</a></li>
</ul>
</li>
<li><a href="#parents">Grid parents and children</a>
<ul>
<li><a href="#rowstart"><code>row-start</code> and <code>row-end</code> <abbr title="Cascading Style Sheet">CSS</abbr></a></li>
<li><a href="#equal">Equal height columns</a></li>
</ul>
</li>
</ul>

</div>
<div class="clear"></div>
Expand Down Expand Up @@ -226,7 +224,7 @@ <h2 id="structure">Grid structure</h2>
</div>
<h3 id="buildingblocks">Grid building blocks </h3>
<p>In the same way that a typical browser setting is 1024x768 (not 1025x775), the dimensions below do not always use convenient values as they use the exact value needed for the system to work. A single grid cell has a <code>margin-left</code> and <code>margin-right</code> of 10px. This is known as the gutter.</p>
<p>Furthermore, grid cells have a default <code>margin-top</code> of 0px and a <code>margin-bottom</code> of 20px. This can be increased or decreased by adding the <a href="grid-proximit-eng.html">margin proximity CSS</a>.</p>
<p>Furthermore, grid cells have a default <code>margin-top</code> of 0px and a <code>margin-bottom</code> of 20px. This can be increased or decreased by adding the <a href="grid-proximity-eng.html">margin proximity CSS</a>.</p>
<div class="span-6 module-note"><p><strong>Note:</strong> Grids cells are invisible by default, as they are only structural in nature. For display purposes, we applied a background colour to them.</p></div>
<div class="clear"></div>

Expand Down Expand Up @@ -366,7 +364,7 @@ <h3 id="rows">Grid rows</h3>
&lt;div class=&quot;span-2&quot;&gt;
&lt;p&gt;B&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt
&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;span-2&quot;&gt;
&lt;p&gt;C&lt;/p&gt;
&lt;/div&gt;
Expand Down Expand Up @@ -456,7 +454,7 @@ <h4 class="background-light">12 column grid system</h4>
<div class="clear"></div>


<h3 id="layout"class="margin-bottom-medium">Grid layout</h3>
<h3 id="layout" class="margin-bottom-medium">Grid layout</h3>
<p>There are 32 base layout options, ranging from a single full width (<code>span-6</code>) to a six column layout (six <code>span-1</code>'s). Below are the layout options: </p>


Expand Down Expand Up @@ -1126,7 +1124,7 @@ <h3>Recap: Grid structure and layout options </h3>
<li>Grid cells float to the left, and you can combine them together in a variety of ways to form a row.</li>
<li>There are 32 base layout options in the default grid system. There are hundreds more when a grid 12 is added.</li>
<li>A single grid cell has a <code>margin-left</code> and <code>margin-right</code> of 10px. This is known as the gutter.</li>
<li>A single grid cell has a <code>margin-top</code> of 0px and a <code>margin-bottom</code> of 20px. This can be increased or decreased by adding the <a href="grid-proximit-eng.html">margin proximity <abbr title="Cascading Style Sheet">CSS</abbr></a>.</li>
<li>A single grid cell has a <code>margin-top</code> of 0px and a <code>margin-bottom</code> of 20px. This can be increased or decreased by adding the <a href="grid-proximity-eng.html">margin proximity <abbr title="Cascading Style Sheet">CSS</abbr></a>.</li>
<li>You need to add <code>&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;</code> at the end of each row to ensure new rows appear properly.</li>
</ul>
</div>
Expand Down Expand Up @@ -1333,7 +1331,10 @@ <h4 class="margin-top-none">Optional &mdash; Parent &#47; child relationship usi

</div>


<dl id="gcwu-date-mod" role="contentinfo">
<dt>Date modified:</dt><dd><span><time>2012-09-17</time></span></dd>
</dl>
<div class="clear"></div>
<!-- MainContentEnd -->
</div></div>

Expand All @@ -1343,18 +1344,24 @@ <h4 class="margin-top-none">Optional &mdash; Parent &#47; child relationship usi
<section><h3><a href="#">Basic effects</a></h3>
<ul>
<li><a href="grid-base-eng.html">Grid system</a></li>
<li><a href="grid-core-fond-eng.html">Text</a></li>
<li><a href="grid-text-eng.html">Text</a></li>
<li><a href="grid-color-eng.html">Colour</a></li>
<li><a href="grid-button-bouton-eng.html">Buttons</a></li>
<li><a href="grid-proximit-eng.html">Proximity</a></li>
<li><a href="grid-table-eng.html">Tables</a></li>
<li><a href="grid-form-eng.html">Forms</a></li>
<li><a href="grid-image-eng.html">Images</a></li>

<li><a href="grid-proximity-eng.html">Proximity</a></li>
<li><a href="grid-position-eng.html">Positioning and alignment</a></li>
<li><a href="grid-opacity-eng.html">Opacity</a></li>
<li><a href="grid-border-eng.html">Borders</a></li>
<li><a href="grid-button-eng.html">Buttons</a></li>
</ul>
</section>
<section><h3><a href="#">Complex effects</a></h3>
<section><h3><a href="#">Specialty effects</a></h3>
<ul>
<li><a href="grid-message-eng.html">Messages</a></li>
<li><a href="grid-module-eng.html">Modules</a></li>
<li><a href="grid-module-eng.html">Other</a></li>
</ul>
</section>
<!-- SecNavEnd -->
Expand Down Expand Up @@ -1399,4 +1406,4 @@ <h4 class="margin-top-none">Optional &mdash; Parent &#47; child relationship usi
<script src="../../build/js/pe-ap-min.js"></script>
<!-- ScriptsEnd -->
</body>
</html>
</html>
6 changes: 3 additions & 3 deletions demos/grids/grid-base-full-eng.html
Expand Up @@ -101,7 +101,7 @@ <h1>Grid system: No left menu</h1>
<div class="wet-boew-prettify all-pre linenums">
<div class="span-8 module-refer">
<p>This page is for demonstrates purposes only. It only shows the various layout options when there is no left menu. </p>
<p><a class="button button-confirm" href="grid-base-eng.html" >Return to the main page</a></p>
<p><a class="button button-attention" href="grid-base-eng.html" >Return to the main grid system page</a></p>
</div>
<div class="clear"></div>
<div class="span-1 background-medium margin-bottom-medium align-center">
Expand Down Expand Up @@ -1030,7 +1030,7 @@ <h3 id="ninec">Nine to twelve columns</h3>
</div>

<dl id="gcwu-date-mod" role="contentinfo">
<dt>Date modified:</dt><dd><span><time>2012-08-01</time></span></dd>
<dt>Date modified:</dt><dd><span><time>2012-09-17</time></span></dd>
</dl>
<div class="clear"></div>
<!-- MainContentEnd -->
Expand Down Expand Up @@ -1097,4 +1097,4 @@ <h3 id="ninec">Nine to twelve columns</h3>
<script src="../../build/js/pe-ap-min.js"></script>
<!-- ScriptsEnd -->
</body>
</html>
</html>
190 changes: 190 additions & 0 deletions demos/grids/grid-border-eng.html
@@ -0,0 +1,190 @@
<!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>Borders</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="#overview">Overview</a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="clear"></div>

<div class="clear"></div>
</div>

<dl id="gcwu-date-mod" role="contentinfo">
<dt>Date modified:</dt><dd><span><time>2012-09-17</time></span></dd>
</dl>
<div class="clear"></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="#">Basic effects</a></h3>
<ul>
<li><a href="grid-base-eng.html">Grid system</a></li>
<li><a href="grid-text-eng.html">Text</a></li>
<li><a href="grid-color-eng.html">Colour</a></li>
<li><a href="grid-table-eng.html">Tables</a></li>
<li><a href="grid-form-eng.html">Forms</a></li>
<li><a href="grid-image-eng.html">Images</a></li>

<li><a href="grid-proximity-eng.html">Proximity</a></li>
<li><a href="grid-position-eng.html">Positioning and alignment</a></li>
<li><a href="grid-opacity-eng.html">Opacity</a></li>
<li><a href="grid-border-eng.html">Borders</a></li>
<li><a href="grid-button-eng.html">Buttons</a></li>
</ul>
</section>
<section><h3><a href="#">Specialty effects</a></h3>
<ul>
<li><a href="grid-message-eng.html">Messages</a></li>
<li><a href="grid-module-eng.html">Modules</a></li>
<li><a href="grid-module-eng.html">Other</a></li>
</ul>
</section>
<!-- 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 dba5544

Please sign in to comment.