Other - Grid System

Table of contents

Badges

Draw attention to a some keyword trigger text. This acts as a teaser to the information that immediately follows/precedes.

Class Details Example 1: With a heading Example 2: With a list Example 3: With a link
badge-intro Used as a lead-in

Step 1 Do x

View code 
<h2><span class="badge-intro">Step 1</span> Do x</h2>
  • Option 1 X option
View code 
<ul>
<li><span class="badge-intro">Option 1</span> X option</li>
</ul>

Did you know? Text

View code 
<p><a href="#"><span class="badge-intro">Did you know?</span> Text</a></p>
badge-new Used to draw attention to a new item

Do x New

View code 
<h2>Do x <span class="badge-new">New</span></h2>
  • X option New
View code 
<ul>
<li>X option <span class="badge-new">New</span></li>
</ul>

Text New

View code 
<p><a href="#">Text <span class="badge-new">New</span></a></p>
badge-update Used to feature update details

Do x Updated

View code 
<h2>Do x <span class="badge-update">Updated</span></h2>
  • X option Updated
View code 
<ul>
<li>X option <span class="badge-update">Updated</span></li>
</ul>

Text Updated

View code 
<p><a href="#">Text <span class="badge-update">Updated</span></a></p>

wb-invisible class

The wb-invisible class clips content into a one pixel square. It allows you to create links that are descriptive (and compliant), but not visually clutter the page. It is common to use this technique to target assistive technology users. For example, JAWS users hear the information, but the visual user does not hear or see it. The CSS attribute display:none; does not achieve the same effect, as JAWS ignores this style entirely.

View code 
<a class="button button-small" href="#">1<span class="wb-invisible">: Page 1 of search results</span></a>

Display options

Most styles are have their default display attribute as block, inline or inline-block. Use the CSS display-block, display-inline or display-inline-block to override the default.

default

display-block

View code 
<span-3>
  <p>
    <a href="#" class="button button-small">button-small</a>
  </p>
  <p>
    <a href="#" class="button button-small button-dark">button-small</a>
  </p>
</div>
View code 
<a class="button button-small" href="#">1<span class="wb-invisible">: Page 1 of search results</span></a>

Print

Some content, like right menus, may lose their value when printed. Use the print-none CSS to remove specific content from the printed copy.

View code
<div class="span-2 module-related print-none"><p>content</p></div>

Thermometer

Use this style is to record the donation progress for events such as the Government of Canada Workplace Charitable Campaign (GCWCC).

This CSS determines which thermometer background image to display. By changing the class name on the <p> element, the thermometer image instantly reflects the new amount. Since the classes increase by 10% increments, you need to adjust your thermometer percentage to the nearest 10% class. Values range from 0% to 120%. For values in excess of 120% , use the 120% class.

Donations to date are $0, which is 0% of the target.

(Uses thermometer-0)

Donations to date are $46,500, which is 38% of the target.

(Uses thermometer-40)

Donations to date are $190,512, which is 150% of the target.

(Uses thermometer-120)

View code 
<p class="thermometer-40">Donations to date are $46,500, which is 38% of the target. </p>

Date

Used to highlight a specific date. In addition, the month can be a link.

The date has a float:left; attribute applied to it, so a <div class="clear"></div> is needed afterwards to start a fresh line.

Also, the design is more refined looking in modern browsers, whereas it's simplified for users with IE7/8.

October

11

May

25

August

13

Jan

14

Jun

3

Jan

1

View code 
<div class="date-container">
  <div class="date-month">
   <p><a href="#">October</a></p>
  </div>
  <div class="date-day">
   <p>11</p>
</div>
  </div>

  <div class="date-container date-small">
  <div class="date-month">
   <p><abbr="January">Jan</abbr></p>
  </div>
  <div class="date-day">
   <p>11</p>
</div>
  </div>

Columns

The ability to spread content over multiple columns is achieved using the CSS3 column-count attribute. IE9 and lower will display the content in a single column, as these browsers do not support column-count. The options are column-2, column-3 and column-4.

For example, the list in the below table of contents is split into two columns. From an accessibility stance, this is a better approach as the table of contents should be represented by a single list and not carved up over serveral lists for display purposes. This ensures that the list is symantcially correct and inline with accessibility. As previously mentioned, this is column feature is only visible in modern browsers:

Table of contents

View code 
<div class="span-4 module-table-contents">
	<h2>Table of contents</h2>
	<ul class="column-2">
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
		<li><a href="#">Fake link</a></li>
	</ul>
</div>