Skip to content

Commit

Permalink
Merge pull request #319 from cfarquharson/master
Browse files Browse the repository at this point in the history 
Updated border documentation/image plus other minor edits
  • Loading branch information
Paul Jackson authored and Paul Jackson committed Aug 28, 2012
2 parents dd87dce + 5206344 commit 61986c9
Show file tree
Hide file tree
Showing 19 changed files with 321 additions and 32 deletions.
4 changes: 2 additions & 2 deletions demos/grids/grid-base-eng.html
View file
Expand Up @@ -8,7 +8,7 @@
<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>CSS Grid System - Working examples - Web Experience Toolkit (WET)</title>
<title>CSS grid system - 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" />
Expand Down Expand Up @@ -86,7 +86,7 @@
<ol>
<li><a href="../../docs/index-eng.html">Home</a></li>
<li><a href="../index-eng.html">Working examples</a></li>
<li>CSS Grid System</li>
<li>CSS grid system</li>
</ol>
</div></div>
</nav>
Expand Down
2 changes: 1 addition & 1 deletion demos/grids/grid-base-full-eng.html
View file
Expand Up @@ -8,7 +8,7 @@
<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>No left menu grid options - CSS Grid System - Working examples - Web Experience Toolkit (WET)</title>
<title>No left menu grid options - CSS grid system - 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" />
Expand Down
2 changes: 1 addition & 1 deletion demos/grids/grid-basic-eng.html
View file
Expand Up @@ -8,7 +8,7 @@
<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>Basic effects - CSS Grid System - Working examples - Web Experience Toolkit (WET)</title>
<title>Basic effects - CSS grid system - 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" />
Expand Down
312 changes: 300 additions & 12 deletions demos/grids/grid-border-eng.html
View file
Expand Up @@ -8,7 +8,7 @@
<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>Borders - CSS Grid System - Working examples - Web Experience Toolkit (WET)</title>
<title>Borders - CSS grid system - 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" />
Expand All @@ -34,6 +34,43 @@
<!--<![endif]-->

<!-- CustomScriptsCSSStart -->
<style type="text/css">


.border-top,.border-right,.border-bottom,.border-left,.border-all {
display:inline;
float:left;
min-height:1px;
position:relative;
background-image:url(images/border.gif);
}

.border-top {
background-position:0 0;
background-repeat:repeat-x;
min-height:1px;
}

.border-bottom {
background-position:0 bottom;
background-repeat:repeat-x;
min-height:1px;
}

.border-left {
background-position:left 0;
background-repeat:repeat-y;
}

.border-right {
background-position:right 0;
background-repeat:repeat-y;
}
.border-all {
outline:1px solid #ccc;
background:none;
}
</style>
<!-- CustomScriptsCSSEnd -->
</head>

Expand Down Expand Up @@ -100,21 +137,272 @@
<h1 id="wb-cont">Borders</h1>

<div class="wet-boew-prettify all-pre linenums">
<div class="span-6 module-inprogress">
<p>Border documentation is coming soon.</p>
</div>
<!--
<div class="span-4 module-table-contents">
<p>Table of contents</p>
<ul>
<li><a href="#overview">Overview</a></li>
</ul>
<p>Table of contents</p>
<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#css">CSS</a></li>
</ul>
</div>
<div class="clear"></div>
<h2 id="overview">Overview</h2>
<p>Surprisingly borders are <strong>not</strong> an easy design feature to achieve in a grid system. Since each grid cells is a predetermined fixed width, the addition of a border increases the cell's width, which then breaks the grid layout. </p>
<p>For example a <code>span-2</code> is 220px wide when viewed at the 1024x768 resolution. If a 1px CSS border is added to all 4 sides, the grid cell will become 222px wide, as 1px is added for <strong>both</strong> the left and right side. This means that the cell will not properly fit into place, as it is 2px too wide.
<p>Therefore, in order to offer borders as a design feature, the CSS border attribute could not be used. Instead a CSS background image and CSS outline are used. </p>
<p>For the <strong>individual borders</strong> (-top, -right, -bottom and -left), an image of a 1px gray square is used and that image repeats either across for -top and -bottom, or down for -right and -left. Based on the CSS box model, the background image does not increase the total width of the grid cell, however the limitation is that a <code>div</code> can only display one background image at a time. Therefore if you want a <code>border-top</code> and a <code>border-right</code>, you have to layer the two like this: <code>&lt;div class=&quot;border-top&quot;&gt;&lt;div class=&quot;border-right&quot;&gt;....&lt;/div&gt;&lt;/div&gt;</code>.</p>
<p>For a <strong>full surround border</strong>, the CSS outline attribute is used. Outline does not impact the width but it will draw the border outside 1px outside the box, whereas the background image is inside the box. Here is an example:</p>
<h3>Spot the 2px outline different - left 1px / right 1px</h3>
<div class="span-2"><code>border-top</code> + <code>border-right</code> + <code>border-bottom</code> + <code>border-left</code></div>
<div class="border-top margin-bottom-small"><div class="border-right"><div class="border-bottom"><div class="border-left"><div class="span-2 background-light margin-top-medium margin-bottom-medium"><p>text</p></div></div></div></div></div>
<details class="span-2">
<summary>View code</summary>
<pre>&lt;div class=&quot;border-top&quot;&gt;
&lt;div class=&quot;border-right&quot;&gt;
&lt;div class=&quot;border-bottom&quot;&gt;
&lt;div class=&quot;border-left&quot;&gt;
&lt;div class=&quot;span-2 background-light margin-top-medium margin-bottom-medium&quot;&gt;
&lt;p&gt;text&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</details>
<div class="clear"></div>
<div class="span-2"><code>border-all</code></div>
<div class="border-all"><div class="span-2 background-light margin-top-medium margin-bottom-medium"><p>text</p></div></div>
<details class="span-2">
<summary>View code</summary>
<pre>&lt;div class=&quot;border-all&quot;&gt;
&lt;div class=&quot;span-2 background-light margin-top-medium margin-bottom-medium&quot;&gt;
&lt;p&gt;text&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</details>
<div class="clear"></div>
<div class="margin-top-xlarge"></div>
<div class="span-2 margin-bottom-small"><code>border-top</code> + <code>border-right</code> + <code>border-bottom</code> + <code>border-left</code></div>
<div class="span-2 background-light border-top margin-bottom-small"><div class="span-2 margin-bottom-none border-right"><div class="span-2 margin-bottom-none border-bottom"><div class="span-2 margin-bottom-none border-left"><p>text</p></div></div></div></div>
<details class="span-2 margin-bottom-small">
<summary>View code</summary>
<pre>&lt;div class=&quot;span-2 background-light border-top&quot;&gt;
&lt;div class=&quot;span-2 margin-bottom-none border-right&quot;&gt;
&lt;div class=&quot;span-2 margin-bottom-none border-bottom&quot;&gt;
&lt;div class=&quot;span-2 margin-bottom-none border-left&quot;&gt;
&lt;p&gt;text&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</details>
<div class="clear"></div>
<div class="span-2 margin-top-large"><code>border-all</code></div>
<div class="span-2 background-light margin-top-none margin-bottom-medium border-all"><p>text</p></div>
<details class="span-2">
<summary>View code</summary>
<pre>&lt;div class=&quot;span-2 background-light margin-top-medium margin-bottom-medium border-all&quot;&gt;
&lt;p&gt;text&lt;/p&gt;
&lt;/div&gt;</pre>
</details>
<div class="clear"></div>
<div class="module-summary span-6">
<h3>Which is best? <span class="font-small"><code>border-all</code> <span class="font-large color-attention">or</span> <code>border-top</code> + <code>border-right</code> + <code>border-bottom</code> + <code>border-left</code></span></h3>
<p>There is no right or wrong and they both have benefits.
<div class="border-right indent-none margin-top-none margin-bottom-none margin-right-none">
<div class="span-2 row-start align-right">
<p><code>border-all</code></p></div></div>
<div class="span-4 row-end margin-top-none"><p>From a coding stance, this is more effecient, however it visually breaks the grid cells by 2px, even those is doesn't break the grid layout. </p></div><div class="clear"></div>
<div class="border-right indent-none margin-top-none margin-bottom-none margin-right-none">
<div class="span-2 row-start align-right">
<p><code>border-top</code> + <code>border-right</code> + <code>border-bottom</code> + <code>border-left</code></p>
</div></div>
<div class="span-4 row-end margin-top-none">
<p>From a coding stance, this is not efficient as each class must be attached its own <code>div</code>, however the border remains inside the grid cell. </p>
</div>
<div class="clear"></div>
-->
</div>
<div class="clear"></div>
<h2 id="css" class="margin-top-large">CSS</h2>
<div class="span-2"><code>border-top</code></div>
<div class="border-top">
<div class="span-2 background-light margin-top-medium margin-bottom-medium"> <br>
<p>Border on <strong>top</strong> and <strong>wraping grid cell</strong>.</p>
<br>
</div>
</div>
<details class="span-2">
<summary>View code</summary>
<pre>&lt;div class=&quot;border-top&quot;&gt;
&lt;div class=&quot;span-2 background-light margin-top-medium margin-bottom-medium&quot;&gt;
&lt;br&gt;
&lt;p&gt;Border on &lt;strong&gt;top&lt;/strong&gt; and &lt;strong&gt;wraping grid cell&lt;/strong&gt;.&lt;/p&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</details>
<div class="clear"></div>

<div class="margin-top-large"></div>
<div class="span-2"><code>border-top</code></div>
<div class="span-2 background-light border-top"> <br>
<p>Border on <strong>top</strong> and <strong>on grid cell</strong>.</p>
<br>
</div>

<details class="span-2">
<summary>View code</summary>
<pre>
&lt;div class=&quot;span-2 background-light border-top&quot;&gt; &lt;br&gt;
&lt;p&gt;Border on &lt;strong&gt;top&lt;/strong&gt; and &lt;strong&gt;on grid cell&lt;/strong&gt;.&lt;/p&gt;
&lt;br&gt;
&lt;/div&gt;</pre>
</details>
<div class="clear"></div>
<div class="margin-top-xlarge"></div>
<div class="span-2"><code>border-right</code></div>
<div class="border-right">
<div class="span-2 background-light margin-bottom-none"> <br>
<p>Border on <strong>right</strong> and <strong>wraping grid cell</strong>.</p>
<br>
</div>
</div>
<details class="span-2">
<summary>View code</summary>
<pre>&lt;div class=&quot;border-right&quot;&gt;
&lt;div class=&quot;span-2 background-light margin-bottom-none&quot;&gt;
&lt;br&gt;
&lt;p&gt;Border on &lt;strong&gt;right&lt;/strong&gt; and &lt;strong&gt;wraping grid cell&lt;/strong&gt;.&lt;/p&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</details>
<div class="clear"></div>

<div class="margin-top-large"></div>
<div class="span-2"><code>border-right</code></div>
<div class="span-2 background-light border-right"> <br>
<p>Border on <strong>right</strong> and <strong>on grid cell</strong>.</p>
<br>
</div>

<details class="span-2">
<summary>View code</summary>
<pre>
&lt;div class=&quot;span-2 background-light border-right&quot;&gt; &lt;br&gt;
&lt;p&gt;Border on &lt;strong&gt;right&lt;/strong&gt; and &lt;strong&gt;on grid cell&lt;/strong&gt;.&lt;/p&gt;
&lt;br&gt;
&lt;/div&gt;</pre>
</details>
<div class="clear"></div>
<div class="margin-top-xlarge"></div>
<div class="span-2"><code>border-bottom</code></div>
<div class="border-bottom">
<div class="span-2 background-light margin-bottom-medium"> <br>
<p>Border on <strong>bottom</strong> and <strong>wraping grid cell</strong>.</p>
<br>
</div>
</div>
<details class="span-2">
<summary>View code</summary>
<pre>&lt;div class=&quot;border-bottom&quot;&gt;
&lt;div class=&quot;span-2 background-light margin-bottom-medium&quot;&gt;
&lt;br&gt;
&lt;p&gt;Border on &lt;strong&gt;bottom&lt;/strong&gt; and &lt;strong&gt;wraping grid cell&lt;/strong&gt;.&lt;/p&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</details>
<div class="clear"></div>

<div class="margin-top-large"></div>
<div class="span-2"><code>border-bottom</code></div>
<div class="span-2 background-light border-bottom"> <br>
<p>Border on <strong>bottom</strong> and <strong>on grid cell</strong>.</p>
<br>
</div>

<details class="span-2">
<summary>View code</summary>
<pre>
&lt;div class=&quot;span-2 background-light border-bottom&quot;&gt; &lt;br&gt;
&lt;p&gt;Border on &lt;strong&gt;bottom&lt;/strong&gt; and &lt;strong&gt;on grid cell&lt;/strong&gt;.&lt;/p&gt;
&lt;br&gt;
&lt;/div&gt;</pre>
</details>

<div class="clear"></div><div class="margin-top-xlarge"></div>
<div class="span-2"><code>border-left</code></div>
<div class="border-left">
<div class="span-2 background-light margin-bottom-none"> <br>
<p>Border on <strong>left</strong> and <strong>wraping grid cell</strong>.</p>
<br>
</div>
</div>
<details class="span-2">
<summary>View code</summary>
<pre>&lt;div class=&quot;border-left&quot;&gt;
&lt;div class=&quot;span-2 background-light margin-bottom-none&quot;&gt;
&lt;br&gt;
&lt;p&gt;Border on &lt;strong&gt;left&lt;/strong&gt; and &lt;strong&gt;wraping grid cell&lt;/strong&gt;.&lt;/p&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</details>
<div class="clear"></div>

<div class="margin-top-large"></div>
<div class="span-2"><code>border-left</code></div>
<div class="span-2 background-light border-left"> <br>
<p>Border on <strong>left</strong> and <strong>on grid cell</strong>.</p>
<br>
</div>

<details class="span-2">
<summary>View code</summary>
<pre>
&lt;div class=&quot;span-2 background-light border-left&quot;&gt; &lt;br&gt;
&lt;p&gt;Border on &lt;strong&gt;left&lt;/strong&gt; and &lt;strong&gt;on grid cell&lt;/strong&gt;.&lt;/p&gt;
&lt;br&gt;
&lt;/div&gt;</pre>
</details>

<div class="clear"></div><div class="margin-top-xlarge"></div>
<div class="span-2"><code>border-all</code></div>
<div class="border-all">
<div class="span-2 background-light margin-bottom-medium margin-top-medium"> <br>
<p>Border on <strong>all</strong> and <strong>wraping grid cell</strong>.</p>
<br>
</div>
</div>
<details class="span-2">
<summary>View code</summary>
<pre>&lt;div class=&quot;border-all&quot;&gt;
&lt;div class=&quot;span-2 background-light margin-bottom-medium margin-top-medium&quot;&gt;
&lt;br&gt;
&lt;p&gt;Border on &lt;strong&gt;all&lt;/strong&gt; and &lt;strong&gt;wraping grid cell&lt;/strong&gt;.&lt;/p&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</details>
<div class="clear"></div>

<div class="margin-top-large"></div>
<div class="span-2"><code>border-all</code></div>
<div class="span-2 background-light border-all"> <br>
<p>Border on <strong>all</strong> and <strong>on grid cell</strong>.</p>
<br>
</div>

<details class="span-2">
<summary>View code</summary>
<pre>
&lt;div class=&quot;span-2 background-light border-all&quot;&gt; &lt;br&gt;
&lt;p&gt;Border on &lt;strong&gt;right&lt;/strong&gt; and &lt;strong&gt;on grid cell&lt;/strong&gt;.&lt;/p&gt;
&lt;br&gt;
&lt;/div&gt;</pre>
</details>
<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>
Expand Down
2 changes: 1 addition & 1 deletion demos/grids/grid-button-eng.html
View file
Expand Up @@ -8,7 +8,7 @@
<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>Buttons - CSS Grid System - Working examples - Web Experience Toolkit (WET)</title>
<title>Buttons - CSS grid system - 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" />
Expand Down
2 changes: 1 addition & 1 deletion demos/grids/grid-color-eng.html
View file
Expand Up @@ -8,7 +8,7 @@
<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>Colour - CSS Grid System - Working examples - Web Experience Toolkit (WET)</title>
<title>Colour - CSS grid system - 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" />
Expand Down

0 comments on commit 61986c9

Please sign in to comment.