UI Inventory

Last updated October 17, 2016.

Please contact mike.freeman@cira.ca with any questions


Headings 1 through 6

Heading 1

<h1>Heading 1</h1>

Heading 2

<h2>Heading 2</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 4</h4>
Heading 5
<h5>Heading 5</h5>
Heading 6
<h6>Heading 6</h6>

Paragraph styles

Sample paragraph text here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus dui non orci lobortis, ac laoreet tellus eleifend. Nulla pulvinar ligula in consectetur rutrum. Vivamus sed auctor nulla. Donec mattis magna lorem, at commodo lorem consectetur vitae. Etiam luctus erat et diam placerat, ut pulvinar mauris cursus. Pellentesque vel ligula pharetra, imperdiet orci sit amet, convallis nisi. Proin in vehicula enim, id dictum lacus. Suspendisse id vehicula augue. Integer lacinia diam sit amet ultrices mattis. Aliquam tortor nunc, elementum eget venenatis sed, aliquam id ex. Fusce congue, ipsum nec ullamcorper interdum, metus ante mattis arcu, quis suscipit mi est sit amet diam. Pellentesque pulvinar erat pretium venenatis condimentum. Aenean accumsan mi eget nunc vestibulum feugiat. Phasellus pharetra ex a est rutrum commodo.


Sample inline styles

Sometimes we want to indicate something that was deleted. So we do it like this, using a <del> tag.

Sometimes we need to indicate a thing is not accurate any more and then insert the correction with an <ins>.

There may be something in a paragraph that is more important than anything else. So it would get a <strong> tag.

<b> is now for stylistically offset text and typographically emboldened text

<em> is for stress emphasis, i.e., something you’d pronounce differently.

If you have content in a paragraph that is an aside (for instance if you are dropping in an example or a refrence link) you can use the <small> tag

Because elements like <section> already indicate this intrinsically indicate breaks in thought, <hr> is more for thematic breaks, such as separating different topics within a section of prose, or between scenes in a novel.

Text in an alternate voice such as translated foreign words, technical terms typographically italicized text should appear in <i>.

If you need to style something in italics for display purposes only add class="italic" to the element or wrap the text to be formated in a span.

For example: <span class="italic">text here</span>


Alternate Languages

In some cases you may need to use an alternate language to the default for a section of text. For example, if you are quoting the name of an English publication on the French version of the site.

To do this you would use the lang="" attribute

Example

English text here and now we are going to use some French text here

        <p>English text here and now we are going to use some <span lang="fr">French text here</span></p>
      

NOTE the section that is in the alternate language is formatted in italics and a heavier weight automatically

Quoting and citing

If you want to quote content from an external source. You should use the <blockquote cite="http://"> element.

The blockquote element represents a section that is quoted from another source.

Example code

        <blockquote>
            <p>
                This is my sampe quote.
            </p>
        </blockquote>
      

If the quote requires atribution you should wrap the <blockquote> in a <figure> and the add the atribution in the <figcaption>

The team worked closely with us to define our requirements, delivering the project over agreed phases to time and on budget

John Doe ACME Industries

Example code

        <figure class="quote-figure">
              <blockquote>
                    <p>The team worked closely with us to define our requirements, delivering the project over agreed phases to time and on budget</p>
              </blockquote>
              <figcaption class="attribution">
                   <span class="name">John Doe</span>
                   <span class="organisation">ACME Industries</span>
              </figcaption>
        </figure>
      

If there is a need to quote something and do not need it as a pull or clock quote you can use the <q> tag. It should be accopanied by a <cite> tag if it is a written work.

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names

W3C HTML5 specification


Working with code

When you want to refrence code elements or place a lare block of code for users to read you can use the <code> and <pre> tags repsectively.

This is what the code looks like when it is inline.

        
          <h1>First line</h1>
          <p>second line<p>
        
      

Images

Images inside an article should be placed in a figure so that a caption can be added

The figure caption goes here inside a <p> tag

Code example

      <figure>
        <img alt="" src="http://placehold.it/200x200" />
        <figcaption>
          <p>The figure caption goes here inside a <code>&lt;p&gt;</code> tag</p>
        </figcaption>
      </figure>
    

Images that contain information that has been sourced from a thrid party should include a citation indicating the source.

Information provided by My reliable source

Code example

    <figure>
      <img alt="" src="http://placehold.it/200x200" />

      <figcaption class="source">
          <p>
            Information provided by <cite><a href="">My reliable source</a></cite>
          </p>
      </figcaption>
    </figure>
    

Tables

Basic data table

This is a simple data table
Column heading 01 Column heading 02 Column heading 03

Numbers starting with 1

Numbers starting with 2

Numbers starting with 3

100 200 300
1000 2000 3000

Code example

      <table class="data-table">
       <caption class="table-caption">This is a simple data table</caption>
       <thead class="table-header">
        <tr>
         <td>Column heading 01</td>
         <td>Column heading 02</td>
         <td>Column heading 03</td>
        </tr>
       </thead>
       <tfoot class="table-footer">
        <tr>
         <td>
         <p>Numbers starting with 1</p>
         </td>
         <td>
         <p>Numbers starting with 2</p>
         </td>
         <td>
         <p>Numbers starting with 3</p>
         </td>
        </tr>
       </tfoot>
       <tbody class="table-body">
        <tr>
         <td class="text-align-right">100</td>
         <td class="text-align-right">200</td>
         <td class="text-align-right">300</td>
        </tr>
        <tr>
         <td class="text-align-right">1000</td>
         <td class="text-align-right">2000</td>
         <td class="text-align-right">3000</td>
        </tr>
       </tbody>
      </table>
    

Table with styles applied

This is a simple data table
Column heading 01 Column heading 02 Column heading 03

Numbers starting with 1

Numbers starting with 2

Numbers starting with 3

100 200 300
1000 2000 3000

Code example

      <table class="border-table">
       <caption class="table-caption">This is a simple data table</caption>
       <thead class="table-header">
        <tr>
         <td class="width-70">Column heading 01</td>
         <td class="width-10">Column heading 02</td>
         <td class="width-20">Column heading 03</td>
        </tr>
       </thead>
       <tfoot class="table-footer">
        <tr class="bg-red">
         <td>
         <p>Numbers starting with 1</p>
         </td>
         <td class="bg-red-lt">
         <p>Numbers starting with 2</p>
         </td>
         <td>
         <p>Numbers starting with 3</p>
         </td>
        </tr>
       </tfoot>
       <tbody class="table-body">
        <tr>
         <td class="text-align-left">100</td>
         <td class="text-align-center bg-purple-lt">200</td>
         <td class="text-align-right">300</td>
        </tr>
        <tr>
         <td class="text-align-left">1000</td>
         <td class="text-align-center">2000</td>
         <td class="text-align-right">3000</td>
        </tr>
       </tbody>
      </table>
    

Complex tables

This is to be used when creating a complex table that relates to a chart placed as an image

For alternate colours switch the table-red class to one of the following.

  • table-red
  • table-purple
  • table-yellow
  • table-orange

Ways of spending time online

Ways of spending time online
Action Age
18 to 34 35 to 54 55 plus

Citations or data disclaimers would go here

Email 88% 91% 95%
Banking 68% 68% 68%
Social media 77% 60% 45%
For news/current events 49% 58% 57%
Shopping 55% 53% 40%
General browsing/surfing 57% 48% 43%
Product research 40% 43% 45%
Looking for information related to hobbies/interests 45% 40% 39%
Travel research 34% 40% 42%
Looking for information related to hobbies/interests 45% 40% 39%
Watching movies, TV. Videos, etc. 59% 35% 19%

Findings or other key points explaining the importants of this figure go here. You can also use this to cite the data.

Code


      <figure>
        <h2>Ways of spending time online</h2>

        <img src="http://placehold.it/200x200" />

        <table class="chart-table table-red">
          <caption class="table-caption webaimHidden">Ways of spending time online</caption>
          <thead class="table-header">
            <tr>
              <th scope="col" rowspan="2" class="text-align-left">Action</th>
              <th colspan="3" scope="col">Age</th>
            </tr>
            <tr>
              <th scope="col">18 to 34</th>
              <th scope="col">35 to 54</th>
              <th scope="col">55 plus</th>
            </tr>
          </thead>
          <tfoot class="table-footer">
            <tr>
              <td scope="" colspan="4">
                <p><a href="#" cite="Source you are pulling from">Citations</a> or data disclaimers would go here</p>
              </td>
            </tr>
          </tfoot>
          <tbody class="table-body">
            <tr>
              <th scope="row" class="text-align-left">
                Email
              </th>
              <td>
                88%
              </td>
              <td>
                91%
              </td>
              <td>
                95%
              </td>
            </tr>
            <tr>
              <th scope="row" class="text-align-left">
                Banking
              </th>
              <td>
                68%
              </td>
              <td>
                68%
              </td>
              <td>
                68%
              </td>
            </tr>
            <tr>
              <th scope="row" class="text-align-left">
                Social media
              </th>
              <td>
                77%
              </td>
              <td>
                60%
              </td>
              <td>
                45%
              </td>
            </tr>
            <tr>
              <th scope="row" class="text-align-left">
                For news/current events
              </th>
              <td>
                49%
              </td>
              <td>
                58%
              </td>
              <td>
                57%
              </td>
            </tr>
            <tr>
              <th scope="row" class="text-align-left">
                Shopping
              </th>
              <td>
                55%
              </td>
              <td>
                53%
              </td>
              <td>
                40%
              </td>
            </tr>
            <tr>
              <th scope="row" class="text-align-left">
                General browsing/surfing
              </th>
              <td>
                57%
              </td>
              <td>
                48%
              </td>
              <td>
                43%
              </td>
            </tr>
            <tr>
              <th scope="row" class="text-align-left">
                Product research
              </th>
              <td>
                40%
              </td>
              <td>
                43%
              </td>
              <td>
                45%
              </td>
            </tr>
            <tr>
              <th scope="row" class="text-align-left">
                Looking for information related to hobbies/interests
              </th>
              <td>
                45%
              </td>
              <td>
                40%
              </td>
              <td>
                39%
              </td>
            </tr>
            <tr>
              <th scope="row" class="text-align-left">
                Travel research
              </th>
              <td>
                34%
              </td>
              <td>
                40%
              </td>
              <td>
                42%
              </td>
            </tr>
            <tr>
              <th scope="row" class="text-align-left">
                Looking for information related to hobbies/interests
              </th>
              <td>
                45%
              </td>
              <td>
                40%
              </td>
              <td>
                39%
              </td>
            </tr>
            <tr>
              <th scope="row" class="text-align-left">
                Watching movies, TV. Videos, etc.
              </th>
              <td>
                59%
              </td>
              <td>
                35%
              </td>
              <td>
                19%
              </td>
            </tr>
          </tbody>
        </table>


        <caption>
          <p>Findings or other key points explaining the importants of this figure go here. You can also use this to cite the data.</p>
        </caption>
      </figure>

    

Lists

If you need a bullet list. Use the bullet-list style

  • First level bullet item

  • Anotehr first level bullet item

    • A second level bullet item

      • Third level bullet item

      • Third level bullet item

    • A second level bullet item

  • Another top level item in the bullet list

Code example

    <ul class="bullet-list">
      <li>
        <p>First level bullet item</p>
      </li>
      <li>
        <p>Anotehr first level bullet item</p>

        <ul class="bullet-list">
          <li>
            <p>A second level bullet item</p>

            <ul class="bullet-list">
              <li>
                <p>Third level bullet item</p>
              </li>
              <li>
                <p>Third level bullet item</p>
              </li>
            </ul>
          </li>
          <li>
            <p>A second level bullet item</p>
          </li>
        </ul>
      </li>
      <li>
        <p>Another top level item in the bullet list</p>
      </li>
    </ul>
    

You may need to make a list of things in order. For that please use the number-list style.

  1. The number one item

  2. Number two item

  3. An item of third level importance

Code example

    <ol class="number-list">
     <li>
      <p>The number one item</p>
     </li>
     <li>
      <p>Number two item</p>
     </li>
     <li>
      <p>An item of third level importance</p>
     </li>
    </ol>
    

Styled lists

The following classes can be addded to a list to achieve more advanced styles.

  •           class="box-list"
            
  •           class="list-type-circle-fancy"
            
  •           class="list-bullet-circle-fancy"
            
  •           class="list-number-circle-fancy"
            
  •           class="list-alpha-circle-fancy"
            
  •           class="list-roman-circle-fancy"
            

Examples of the list styles:

Box list with circle

  • The quick, brown fox jumps over a lazy dog.

  • Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs.

  • Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz.

Source code

      <ul class="list-type-circle-fancy box-list margin-bottom-2em">
       <li>
        <p>The quick, brown fox jumps over a lazy dog.</p>
       </li>
       <li>
        <p>Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs.</p>
       </li>
       <li>
        <p>Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz.</p>
       </li>
      </ul>
    

Box list with bullets

  • Toronto

  • Ottawa

  • Montreal

Source code

      <ul class="list-type-bullet-fancy box-list margin-bottom-2em">
       <li>
        <p>Toronto</p>
       </li>
       <li>
        <p>Ottawa</p>
       </li>
       <li>
        <p>Montreal</p>
       </li>
      </ul>
    

Box list with numerical ordered list

  1. class="bg-red" and class="bg-before-red-lt"

  2. class="bg-purple" and class="bg-before-purple-lt"

  3. class="bg-black" and class="bg-before-black-lt"

Soure code

      <ol class="list-type-number-fancy box-list margin-bottom-2em">
       <li class="bg-red bg-before-red-lt">
        <p>class="bg-red" and class="bg-before-red-lt"</p>
       </li>
       <li class="bg-purple bg-before-purple-lt">
        <p>class="bg-purple" and class="bg-before-purple-lt"</p>
       </li>
       <li class="bg-black bg-before-black-lt">
        <p>class="bg-black" and class="bg-before-black-lt"</p>
       </li>
      </ol>
    

Box list with alpha ordered list

  1. Kogi kinfolk stumptown truffaut marfa, polaroid echo park blue bottle master cleanse try-hard. Aesthetic microdosing try-hard flexitarian taxidermy bitters.

    Mustache man braid iPhone 3 wolf moon. Stumptown PBR&B pop-up gastropub, neutra before they sold out whatever 8-bit microdosing tilde selfies meh four dollar toast leggings. Locavore actually selfies, semiotics small batch umami four dollar toast. Kogi franzen chia kitsch biodiesel post-ironic. Leggings neutra meh fingerstache blog flexitarian.

  2. Hoodie put a bird on it beard slow-carb, church-key authentic stumptown heirloom flexitarian you probably haven't heard of them kale chips man bun occupy semiotics.

  3. Occupy tumblr jean shorts, kinfolk helvetica 8-bit XOXO polaroid master cleanse microdosing ramps food truck knausgaard chartreuse before they sold out. Single-origin coffee knausgaard direct trade, blog tattooed slow-carb bicycle rights intelligentsia. Ramps portland fanny pack, normcore kinfolk ugh vice lo-fi.

      <ol class="list-type-alpha-fancy box-list margin-bottom-2em">
       <li>
        <p>Kogi kinfolk stumptown truffaut marfa, polaroid echo park blue bottle master cleanse try-hard. Aesthetic microdosing try-hard flexitarian taxidermy bitters.</p>
        <p>Mustache man braid iPhone 3 wolf moon. Stumptown PBR&amp;B pop-up gastropub, neutra before they sold out whatever 8-bit microdosing tilde selfies meh four dollar toast leggings. Locavore actually selfies, semiotics small batch umami four dollar toast. Kogi franzen chia kitsch biodiesel post-ironic. Leggings neutra meh fingerstache blog flexitarian.</p>
       </li>
       <li>
        <p>Hoodie put a bird on it beard slow-carb, church-key authentic stumptown heirloom flexitarian you probably haven't heard of them kale chips man bun occupy semiotics.</p>
       </li>
       <li>
        <p>Occupy tumblr jean shorts, kinfolk helvetica 8-bit XOXO polaroid master cleanse microdosing ramps food truck knausgaard chartreuse before they sold out. Single-origin coffee knausgaard direct trade, blog tattooed slow-carb bicycle rights intelligentsia. Ramps portland fanny pack, normcore kinfolk ugh vice lo-fi.</p>
       </li>
      </ol>
    

Box list with roman

  1. Toronto

  2. Ottawa

  3. Montreal

Source code

      <ol class="list-type-roman-fancy box-list margin-bottom-2em">
       <li>
        <p>Toronto</p>
       </li>
       <li>
        <p>Ottawa</p>
       </li>
       <li>
        <p>Montreal</p>
       </li>
      </ol>
    

Helper and style classes

The helper classes are a set of CSS classes that can be combined to create variouse layouts in your content. The following outlines the exisitng classes and provides examples of their use.


Box styles

      class="box"
    

Example of the box classes

This is a black highlight box

This is a red highlight box

This is a purple highlight box

Source code

      <div class="box">
        <p>This is a <strong>black</strong> highlight box</p>
      </div>

      <div class="box bg-red">
        <p>This is a <strong>red</strong> highlight box</p>
      </div>

      <div class="box bg-purple">
        <p>This is a <strong>purple</strong> highlight box</p>
      </div>
    

Grid styles

  •           class="grid-2-col"
            
  •           class="grid-3-col"
            
  •         class="grid-4-col"
          
  •           class="grid-2-col-20-80"
            
  •           class="grid-2-col-80-20"
            
  •           class="grid-2-col-30-70"
            
  •           class="grid-2-col-70-30"
            

Grid examples:

Grid 2 column

This is a red highlight box

This is a purple highlight box

Source code

      <div class="grid-2-col">
       <div class="bg-red padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>red</strong> highlight box</p>
       </div>

       <div class="bg-purple padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>purple</strong> highlight box</p>
       </div>
      </div>
    

Grid 2 column 20% 80%

This is a red highlight box

This is a purple highlight box

Source code

      <div class="grid-2-col-20-80">
       <div class="bg-red padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>red</strong> highlight box</p>
       </div>

       <div class="bg-purple padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>purple</strong> highlight box</p>
       </div>
      </div>
    

Grid 2 column 80% 20%

This is a red highlight box

This is a purple highlight box

Source code

      <div class="grid-2-col-80-20">
       <div class="bg-red padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>red</strong> highlight box</p>
       </div>

       <div class="bg-purple padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>purple</strong> highlight box</p>
       </div>
      </div>
    

Grid 2 column 70% 30%

This is a red highlight box

This is a purple highlight box

Source code

      <div class="grid-2-col-70-30">
       <div class="bg-red padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>red</strong> highlight box</p>
       </div>

       <div class="bg-purple padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>purple</strong> highlight box</p>
       </div>
      </div>
    

Grid 2 column 30% 70%

This is a red highlight box

This is a purple highlight box

Source code

      <div class="grid-2-col-30-70">
       <div class="bg-red padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>red</strong> highlight box</p>
       </div>

       <div class="bg-purple padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>purple</strong> highlight box</p>
       </div>
      </div>
    

Grid 3 column

This is a red highlight box

This is a purple highlight box

This is a red highlight box

Source code

      <div class="grid-3-col">
       <div class="bg-red padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>red</strong> highlight box</p>
       </div>

       <div class="bg-purple padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>purple</strong> highlight box</p>
       </div>

       <div class="bg-red padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>red</strong> highlight box</p>
       </div>
      </div>
    

Grid 4 column

This is a red highlight box

This is a purple highlight box

This is a red highlight box

This is a purple highlight box

Source code

      <div class="grid-4-col">
       <div class="bg-red padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>red</strong> highlight box</p>
       </div>

       <div class="bg-purple padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>purple</strong> highlight box</p>
       </div>

       <div class="bg-red padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>red</strong> highlight box</p>
       </div>

       <div class="bg-purple padding-all-1em margin-bottom-2em">
        <p class="text-color-lt">This is a <strong>purple</strong> highlight box</p>
       </div>
      </div>
    

Flex styles

If you have a large number of images or boxes that are different sizes use flex-row

The items inside the container will be equaly disstributed in multiples rows.

Flex row

Source code

      <div class="flex-row">
        <img class="width-auto margin-all-1em" src="http://placehold.it/320x240" alt="" />
        <img class="width-auto margin-all-1em" src="http://placehold.it/240x320" alt="" />
        <img class="width-auto margin-all-1em" src="http://placehold.it/60x240" alt="" />
        <img class="width-auto margin-all-1em" src="http://placehold.it/720x240" alt="" />
        <img class="width-auto margin-all-1em" src="http://placehold.it/320x240" alt="" />
        <img class="width-auto margin-all-1em" src="http://placehold.it/80x240" alt="" />
        <img class="width-auto margin-all-1em" src="http://placehold.it/240x320" alt="" />
        <img class="width-auto margin-all-1em" src="http://placehold.it/320x240" alt="" />
        <img class="width-auto margin-all-1em" src="http://placehold.it/320x240" alt="" />
        <img class="width-auto margin-all-1em" src="http://placehold.it/50x240" alt="" />
        <img class="width-auto margin-all-1em" src="http://placehold.it/320x240" alt="" />
      </div>
    

Background styles

Background colours

  •           class="bg-red"
            
  •           class="bg-red-lt"
            
  •           class="bg-purple"
            
  •           class="bg-purple-lt"
            
  •           class="bg-black"
            
  •           class="bg-black-lt"
            
background color examples

red background

Source code

      <div class="bg-red">
        <p>red background</p>
      </div>
    
  

red background

Source code

      <div class="bg-red-lt">
        <p>red background</p>
      </div>
    

purple background

Source code

      <div class="bg-purple">
        <p>purple background</p>
      </div>
    

purple background

Source code

      <div class="bg-purple-lt">
        <p>purple background</p>
      </div>
    

black background

Source code

      <div class="bg-black">
        <p>black background</p>
      </div>
    

Background colour :before

These styles are used to affect the colour of icons, list number boxes and bullets that appear before the element the class is applied too

  •           class="bg-before-red"
            
  •           class="bg-before-red-lt"
            
  •           class="bg-before-purple"
            
  •           class="bg-before-purple-lt"
            
  •           class="bg-before-black"
            
  •           class="bg-before-black-lt"
            
Backgound color before examples
  1. class="bg-red" and class="bg-before-red-lt"

  2. class="bg-purple" and class="bg-before-purple-lt"

  3. class="bg-black" and class="bg-before-black-lt"

Source code

    <ol class="list-type-number-fancy box-list margin-bottom-2em">
      <li class="bg-red bg-before-red-lt">
        <p>class="bg-red" and class="bg-before-red-lt"</p>
      </li>
      <li class="bg-purple bg-before-purple-lt">
        <p>class="bg-purple" and class="bg-before-purple-lt"</p>
      </li>
      <li class="bg-black bg-before-black-lt">
        <p>class="bg-black" and class="bg-before-black-lt"</p>
      </li>
    </ol>
    

Text size

  •           class="text-size-base"
            
  •           class="text-size-small"
            
  •           class="text-size-med"
            
  •           class="text-size-lg"
            
  •           class="text-size-xl"
            

Text weight

  •           class="text-weight-lt"
            
  •           class="text-weight-base"
            
  •           class="text-weight-bold"
            
  •           class="text-weight-exbold"
            

Text alignment

  •           class="text-alignment-left"
            
  •           class="text-alignment-right"
            
  •           class="text-alignment-center"
            

Text colour classes

  •           class="text-color-lt"
            
  •           class="text-color-med"
            
  •           class="text-color-dk"
            
  •           class="text-red"
            
  •           class="text-purple"
            

Text color examples

  • text-color-lt

    Source code

    <span class="text-color-lt bg-black">text-color-lt</span>
  • text-color-med

    Source code

    <span class="text-color-med">text-color-med</span>
  • text-color-dk

    Source code

    <span class="text-color-dk">text-color-dk</span>
  • text-color-red

    Source code

    <span class="text-color-red">text-color-red</span>
  • text-color-purple

    Source code

    <span class="text-color-purple">text-color-purple</span>

Text colour before classes

  •           class="text-color-lt-before"
            
  •           class="text-color-med-before"
            
  •           class="text-color-dk-before"
            
  •           class="text-red-before"
            
  •           class="text-purple-before"
            

  •           class="no-underline"
            

Hero classes

  •           class="page-start"
            
  •           class="section-start"
            

Border classes

  •           class="border-none"
            
  •           class="border-1px-solid"
            
  •           class="border-2px-solid"
            
  •           class="border-4px-solid"
            
  •           class="border-top-none"
            
  •           class="border-top-1px-solid"
            
  •           class="border-top-2px-solid"
            
  •           class="border-top-4px-solid"
            
  •           class="border-bottom-none"
            
  •           class="border-bottom-1px-solid"
            
  •           class="border-bottom-2px-solid"
            
  •             class="border-bottom-4px-solid"
              
  •           class="border-left-none"
            
  •           class="border-left-1px-solid"
            
  •           class="border-left-2px-solid"
            
  •           class="border-left-4px-solid"
            
  •           class="border-right-1px-none"
            
  •           class="border-right-1px-solid"
            
  •           class="border-right-2px-solid"
            
  •           class="border-right-4px-solid"
            

Border class examples

  • class="border-1px-solid"

    Source code

              <span class="border-1px-solid">class="border-1px-solid"</span>
            
  • class="border-2px-solid"

    Source code

              <span class="border-2px-solid">class="border-2px-solid"</span>
            
  • class="border-4px-solid"

    Source code

              <span  class="border-4px-solid">class="border-4px-solid"</span>
            
  • class="border-top-1px-solid"

    Source code

              <span class="border-top-1px-solid">class="border-top-1px-solid"</span>
            
  • class="border-top-2px-solid"

    Source code

              <span class="border-top-2px-solid">class="border-top-2px-solid"</span>
            
  • class="border-top-4px-solid"

    Source code

              <span class="border-top-4px-solid">class="border-top-4px-solid"</span>
            
  • class="border-bottom-1px-solid"

    Source code

              <span class="border-bottom-1px-solid">class="border-bottom-1px-solid"</span>
            
  • class="border-bottom-2px-solid"

    Source code

              <span class"border-bottom-2px-solid">class="border-bottom-2px-solid"</span>
            
  • class="border-bottom-4px-solid"

    Source code

              <span class="border-bottom-4px-solid">class="border-bottom-4px-solid"</span>
            
  • class="border-left-1px-solid"

    Source code

              <span class="border-left-1px-solid"class="border-left-1px-solid"</span>
            
  • class="border-left-2px-solid"

    Source code

              <span class="border-left-2px-solid">class="border-left-2px-solid"</span>
            
  • class="border-left-4px-solid"

    Source code

              <span class="border-left-4px-solid">class="border-left-4px-solid"</span>
            
  • class="border-right-1px-solid"

    Source code

              <span class="border-right-1px-solid">class="border-right-1px-solid"</span>
            
  • class="border-right-2px-solid"

    Source code

              <span class="border-right-2px-solid">class="border-right-2px-solid"</span>
            
  • class="border-right-4px-solid"

    Source code

              <span class="border-right-4px-solid">class="border-right-4px-solid"</span>
            

Border color class examples

  • class="border-1px-solid border-color-dk"

    Source code

              <span class="border-1px-solid border-color-dk">class="border-1px-solid border-color-dk"</span>
            
  • class="border-1px-solid border-color-med"

    Source code

              <span class="border-1px-solid border-color-med">class="border-1px-solid border-color-med"</span>
            
  • class="border-1px-solid border-color-dk"

    Source code

              <span class="border-1px-solid border-color-dk">class="border-1px-solid border-color-dk"</span>
            
  • class="border-1px-solid border-color-red"

    Source code

              <span class="border-1px-solid border-color-red">class="border-1px-solid border-color-red"</span>
            

Padding styles

Padding all

  •           class="padding-all-0.5em"
            
  •           class="padding-all-1em"
            
  •           class="padding-all-2em"
            
  •           class="padding-all-3em"
            
  •           class="padding-all-3em"
            

Padding top

  •           class="padding-top-0.5em"
            
  •           class="padding-top-1em"
            
  •           class="padding-top-2em"
            
  •           class="padding-top-3em"
            
  •           class="padding-top-4em"
            

Padding right

  •           class="Padding-right-0.5em"
            
  •           class="Padding-right-1em"
            
  •           class="Padding-right-2em"
            
  •           class="Padding-right-3em"
            
  •           class="Padding-right-4em"
            

Padding bottom

  •           class="Padding-bottom-0.5em"
            
  •           class="Padding-bottom-1em"
            
  •           class="Padding-bottom-2em"
            
  •           class="Padding-bottom-3em"
            
  •           class="Padding-bottom-4em"
            

Padding left

  •           class="Padding-left-0.5em"
            
  •           class="Padding-left-1em"
            
  •           class="Padding-left-2em"
            
  •           class="Padding-left-3em"
            
  •           class="Padding-left-4em"
            

Padding clear

  •           class="padding-none"
            
  •           class="padding-top-none"
            
  •           class="padding-right-none"
            
  •           class="padding-bottom-none"
            
  •           class="padding-left-none"
            

Margin styles

Margin all

  •         class="margin-all-0.5em"
          
  •         class="margin-all-1em"
          
  •         class="margin-all-2em"
          
  •         class="margin-all-3em"
          
  •         class="margin-all-3em"
          

Margin top

  •         class="margin-top-0.5em"
          
  •         class="margin-top-1em"
          
  •         class="margin-top-2em"
          
  •         class="margin-top-3em"
          
  •         class="margin-top-4em"
          

Margin right

  •         class="margin-right-0.5em"
          
  •         class="margin-right-1em"
          
  •         class="margin-right-2em"
          
  •         class="margin-right-3em"
          
  •         class="margin-right-4em"
          

Margin bottom

  •         class="margin-bottom-0.5em"
          
  •         class="margin-bottom-1em"
          
  •         class="margin-bottom-2em"
          
  •         class="margin-bottom-3em"
          
  •         class="margin-bottom-4em"
          

Margin left

  •         class="margin-left-0.5em"
          
  •         class="margin-left-1em"
          
  •         class="margin-left-2em"
          
  •         class="margin-left-3em"
          
  •         class="margin-left-4em"
          

Margin clear

  •         class="margin-none"
          
  •         class="margin-top-none"
          
  •         class="margin-right-none"
          
  •         class="margin-bottom-none"
          
  •         class="margin-left-none"
          

Max width classes

  •         class="max-width-10"
          
  •         class="max-width-20"
          
  •         class="max-width-30"
          
  •         class="max-width-40"
          
  •         class="max-width-50"
          
  •         class="max-width-60"
          
  •         class="max-width-70"
          
  •         class="max-width-80"
          
  •         class="max-width-90"
          
  •   class="max-width-100"

Floating classes

  •         class="float-left"
          
  •         class="float-right"
          
  •         class="float-none"
          

Clearing classes

  •         class="clear-left"
          
  •         class="clear-right"
          
  •         class="clear-both"
          

Anchor classes

  •         class="anchor-top"
          
  •         class="anchor-right"
          
  •         class="anchor-bottom"
          
  •         class="anchor-left"
          

Icons

To use icons in the site there are two things you will need to do.

  1. Add the data-icon="" attribute to the element that will have the icon
  2. Modify the size of the icons by adding
    class="icon-small"
    class="icon-medium"
    class="icon-large"

You can choose displayed by adding the right character code in the data-icon attribute.

For example:

data-icon="&#xf201" will give you a line graph icon. There are two parts to the data-attribute code. The first section &#x and the f201. The fist section tells the browser a character code is being passed. The second section is the character being passed.

So if we wanted to change the icon displayed you would only modify the f201.

Where do I get the icon codes?

You can get the codes for your fonts by visiting fontawesome.io and following tthe steps below.

  1. Use the icon search or scroll through the displayed icons to find what you are looking for.
  2. Click on the icon you want to add
  3. You will see a page that looks like
  4. Right next to the name of the icon there is some grey that indicates the Unicode number of the icon
  5. Copy this number and paste it into the data-icon attribute like so data-icon="&#xf1e5"
  6. Your full code section will look like this

    <span class="icon-small" data-icon="&#xf1e5">binoculars</span>

     

    The output will look like: I really like binoculars

  • Data icon with no modifier classes

                          <p><span class="" data-icon="&#xf201;">Data icon with no modifier classes</span></p>
                        
  • Data icon with icon-small

                          <p><span class="icon-small" data-icon="&#xf201;">Data icon with <code>icon-small</code></span></p>
                        
  • Data icon with icon-medium

                          <p><span class="icon-medium" data-icon="&#xf201;">Data icon with <code>icon-medium</code></span></p>
                        
  • Data icon with icon-large

                          <p><span class="icon-large" data-icon="&#xf201;">Data icon with <code>icon-large</code></span></p>
                        
  • Data icon with icon-large in purple

                          <p><span class="icon-large text-color-purple-before" data-icon="&#xf201;">Data icon with <code>icon-large</code> in purple</span></p>
                        

Image icons

In some cases you may need to use a custom image instead of an icon. Just use class="grid-2-col-20-80, img tag, and a div.

Some title here

Walk on car leaving trail of paw cuteicus. Fall over dead (not really but gets sypathy) find empty spot in cupboard and sleep all day pooping.

Sample call to action link

Some title here

Walk on car leaving trail of paw cuteicus. Fall over dead (not really but gets sypathy) find empty spot in cupboard and sleep all day pooping.

Sample call to action link

                  <div class="grid-2-col-20-80 margin-bottom-2em">
                    <img src="http://placehold.it/145x145" width="145" height="145" />
                    <div>
                      <h2>Some title here</h2>
                      <p>Walk on car leaving trail of paw cuteicus. Fall over dead (not really but gets sypathy) find empty spot in cupboard and sleep all day pooping.</p>
                      <p><a href="#" title="sample link">Sample call to action link</a></p>
                    </div>
                  </div>

                  <div class="grid-2-col-80-20">
                    <div>
                      <h2>Some title here</h2>
                      <p>Walk on car leaving trail of paw cuteicus. Fall over dead (not really but gets sypathy) find empty spot in cupboard and sleep all day pooping.</p>
                      <p><a href="#" title="sample link">Sample call to action link</a></p>
                    </div>
                    <img src="http://placehold.it/145x145" width="145" height="145" />
                  </div>
                

Styles in use

Examples of their use in text:

Sleep nap purr for no reason if it smells like fish eat as much as you wish

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff nap all day has closed eyes but still sees you slap owner's face at 5am until human fills food dish

This box is floating right you just need to add a class. It has a max width of 80%. This only applies when viewing on a tablet device or larger.

Cat ipsum dolor sit amet, all of a sudden cat goes crazy so pee in the shoe chew on cable or kitty power! . Lick plastic bags sleep nap paw at your fat belly for damn that dog so gnaw the corn cob lick the other cats plan steps for world domination. Mark territory eat and than sleep on your face drink water out of the faucet. Touch water with paw then recoil in horror find empty spot in cupboard and sleep all day behind the couch lies down yet when in doubt, wash and scratch at the door then walk away. Bleghbleghvomit my furball really tie the room together chase laser but touch water with paw then recoil in horror stare at wall turn and meow stare at wall some more meow again continue staring , lick plastic bags, lie on your belly and purr when you are asleep stick butt in face. Leave hair everywhere always hungry eat and than sleep on your face damn that dog but steal the warm chair right after you get up ignore the squirrels, you'll never catch them anyway. Ignore the squirrels, you'll never catch them anyway poop in the plant pot yet destroy couch, for sit on the laptop give attitude, for claws in your leg. Attack the dog then pretend like nothing happened eat and than sleep on your face, and have secret plans. Jump off balcony, onto stranger's head. Howl uncontrollably for no reason stare at ceiling chew iPad power cord.

This box is has a max width of 30% and is floating left you just need to add a class

Walk on car leaving trail of paw prints on hood and windshield caticus cuteicus. Fall over dead (not really but gets sypathy) find empty spot in cupboard and sleep all day pooping rainbow while flying in a toasted bread costume in space but sleep in the bathroom sink present belly, scratch hand when stroked, or present belly, scratch hand when stroked, so stare at the wall, play with food and get confused by dust. Sleep nap get video posted to internet for chasing red dot but knock over christmas tree so poop in the plant pot. Wake up human for food at 4am spit up on light gray carpet instead of adjacent linoleum yet sit on the laptop yet nap all day. Damn that dog cat snacks. Present belly, scratch hand when stroked eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap for fall asleep on the washing machine or ears back wide eyed meow stare at ceiling. Plan steps for world domination purr while eating attack dog, run away and pretend to be victim or bleghbleghvomit my furball really tie the room together but you call this cat food?. Eat and than sleep on your face licks your face or hack up furballs. See owner, run in terror sit on human so vommit food and eat it again so meowwww. Meowzer! intently stare at the same spot. Hunt anything that moves swat at dog. Roll on the floor purring your whiskers off make muffins leave fur on owners clothes, hack up furballs for peer out window, chatter at birds, lure them to mouth yet step on your keyboard while you're gaming and then turn in a circle so kitty power!

The image of the "look at me text" is 900px by 900px but with a class we make it float right and have a max width or 50%. Run in circles paw at your fat belly howl uncontrollably for no reason chase mice, for scratch leg; meow for can opener to feed me. Claws in your leg scratch the furniture but leave dead animals as gifts why must they do that. Make meme, make cute face. Lick butt lick butt human is washing you why halp oh the horror flee scratch hiss bite yet pee in the shoe yet sweet beast. Find empty spot in cupboard and sleep all day eat grass, throw it back up yet roll on the floor purring your whiskers off cough furball intrigued by the shower. Climb leg chew on cable.

Car leaving trail of paw prints on hood and windshield caticus cuteicus. Fall over dead (not really but gets sypathy) find empty spot in cupboard and sleep all day pooping rainbow while flying in a toasted bread costume in space but sleep in the bathroom sink present belly, scratch hand when stroked, or present belly, scratch hand when stroked, so stare at the wall, play with food and get confused by dust. Sleep nap get video posted to internet for chasing red dot but knock over christmas tree so poop in the plant pot. Wake up human for food at 4am spit up on light gray carpet instead of adjacent linoleum yet sit on the laptop yet nap all day. Damn that dog cat snacks. Present belly, scratch hand when stroked eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap for fall asleep on the washing machine or ears back wide eyed meow stare at ceiling. Plan steps for world domination purr while eating attack dog, run away and pretend to be victim or bleghbleghvomit my furball really tie the room together but you call this cat food?. Eat and than sleep on your face licks your face or hack up furballs. See owner, run in terror sit on human so vommit food and eat it again so meowwww. Meowzer! intently stare at the same spot. Hunt anything that moves swat at dog. Roll on the floor purring your whiskers off make muffins leave fur on owners clothes, hack up furballs for peer out window, chatter at birds, lure them to mouth yet step on your keyboard while you're gaming and then turn in a circle so kitty power!

  • Toronto

  • Ottawa

  • Montreal

Cat ipsum dolor sit amet, all. Walk on car leaving trail of paw prints on hood and windshield caticus cuteicus. Fall over dead (not really but gets sypathy) find empty spot in cupboard and sleep all day pooping rainbow while flying in a toasted bread costume in space but sleep in the bathroom sink present belly, scratch hand when stroked, or present belly, scratch hand when stroked, so stare at the wall, play with food and get confused by dust. Sleep nap get video posted to internet for chasing red dot but knock over christmas tree so poop in the plant pot. Wake up human for food at 4am spit up on light gray carpet instead of adjacent linoleum yet sit on the laptop yet nap all day. Damn that dog cat snacks. Present belly, scratch hand when stroked eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap for fall asleep on the washing machine or ears back wide eyed meow stare at ceiling. Plan steps for world domination purr while eating attack dog, run away and pretend to be victim or bleghbleghvomit my furball really tie the room together but you call this cat food?. Eat and than sleep on your face licks your face or hack up furballs. See owner, run in terror sit on human so vommit food and eat it again so meowwww. Meowzer! intently stare at the same spot. Hunt anything that moves swat at dog. Roll on the floor purring your whiskers off make muffins leave fur on owners clothes, hack up furballs for peer out window, chatter at birds, lure them to mouth yet step on your keyboard while you're gaming and then turn in a circle so kitty power!

Feature : Primary:  View the election results Feature : Secondary:  Become a CIRA Member Feature : Tertiary:  Using .CA to communicate local expertise