Typography Scale

The entire typographic grid is based on two Less variables in our variables.less file: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height.

We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.

Example body text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Unordered

<ul>

• This is a list item
• This is a list item
• This is a list item
• This is a list item
  • This is a nested list item
  • This is a nested list item
  • This is a nested list item
• This is a list item
• This is a list item

Unstyled List

<ul class="unstyled">

• This is a list item
• This is a list item
• This is a list item
  • This is a nested list item
  • This is a nested list item
  • This is a nested list item
• This is a list item
• This is a list item
• This is a list item

Striped List

<ul class="unstyled striped">

• This is a list item
• This is a list item
• This is a list item
• This is a list item
• This is a list item
• This is a list item

Striped list on dark

<ul class="unstyled striped striped-light">

• This is a list item
• This is a list item
• This is a list item
• This is a list item
• This is a list item
• This is a list item

Horizontal List

<ul class="nav">

This is the barebones structure applied to a list that is to be used as navigation and displayed horizontally. Skins can be applied later by the use of extra classes.

• Home
• Personal Clients
• Corporate Clients
• Insitutional Clients
• Research & Markets
• About us

Tabs

<ul class="nav nav-tabs">

This is the barebones styling of a tab navigation. This can also be extended by applying tab skins.

• Home
• Personal Clients
• Corporate Clients
• Insitutional Clients
• Research & Markets
• About us

<ul class="nav nav-tabs nav-global">

These tabs work cross browser with the rounded corners. Additional markup will need to be added to achieve the round corners.

<span class="right-corner"></span> needs to be added before the closing </a> tag. This will add a rounded corner background image.

<ul class="nav nav-tabs megamenu">
  <li><a href="#">Home<span class="right-corner"></span></a></li>
  <li><a href="#">Personal Clients<span class="right-corner"></span></a></li>
  <li class="active"><a href="#">Corporate Clients<span class="active-right-corner"></span></a></li>
  <li><a href="#">Insitutional Clients<span class="right-corner"></span></a></li>
  <li><a href="#">Research & Markets<span class="right-corner"></span></a></li>
</ul>

Branch navigation

• Home
• About Us
• Our Services
• Market Overview
• News & Events
• Contact Us

How does it work?

The ul has a transparent gradient background image applied to it.

To get the yellow background an .active class needs to be added to the containing list item which uses an overly large background image with rounded left corners. The background position is -3px on all list items except the first list item which has a background position of 0.

<ul class="nav nav-branch">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Our Services</a></li>
  <li><a href="#">Market Overview</a></li>
  <li><a href="#">News & Events</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

Pagination

<div class="pager">
  <span class="results">Recent 1‐10 of 550</span>
  <ul class="nav right">
    <li><a href="#">«</a></li>
    <li class="active">
      <a href="#">1</a>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">…</a></li>
    <li><a href="#">42</a></li>
    <li><a href="#">43</a></li>
    <li><a href="#">»</a></li>
  </ul>
</div>

Breadcrumbs

To achieve the rounded corner effects a background image is applied to the first list item and the an empty span added to the active page (or last item in the breadcrumb) creates the other round corner effect.

The dividers are achieve by adding a background image to each list item and then a seperate background image to the active list item

• Home
• About us
• Research
• Latest Morgans Research

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li class="active">Latest Morgans Research<span class="end"></span></li>
</ul>

Classes used on this menu are important

This menu uses jQuery to achieve the collapsable children menus. So make sure that all your classes match up with the provided markup.

<div class="sub">
  <h4 class="sub-title echo">Research and Market</h4>
  <ul class="unstyled sub-menu">
    <li><a href="">Reseach overview</a></li>
    <li><span class="sub-arrow"></span><a href="">Research team</a></li>
    <li><span class="sub-arrow"></span><a href="">Share prices and charts</a></li>
    <li class="sub-active"><a href="">Latest Morgans research this is an even longer menu name</a></li>
    <li><a href="">Breaking news</a></li>
    <li class="sub-parent"><span class="sub-arrow"></span><a href="">Our Team</a>
      <ul class="unstyled subchild-menu">
        <li><a href="">‐ Advisers<</a></li>
        <li><a href="">‐ Queensland</a></li>
        <li><a href="">‐ Brisbane</a></li>
        <li><a href="">‐ New South Wales</a></li>
      </ul>
    </li>
  </ul>
</div>
        

How default grid system works

The entire page is wrapped in .container. This has a width of 960px and is centers the page.

Each column needs a class of .column applied to it. Each column has a margin of 10px added to both the left and right hand side.

Extend the width of columns with the classes below:

• .size1of4 = 100%
• .size1of4 = 220px
• .size2of4 = 460px
• .size3of4 = 700px
• .size1of3 = 300px
• .size2of3 = 620px

<div class="container">
  <div class="column size3of4">
  </div>
  <div class="column size1of4">
  </div>
</div>

How nested grids work

To nest the grid structure you will need to add the .nest to each column. This will remove the right hand margin and increase the left hand margin from 10px to 20px.

NB: You will need to add .first to the first nested column to remove the left hand margin.

<div class="container">
  <div class="column size3of4">
    <div class="column size1of4 nest first">
    </div>
    <div class="column size1of4 nest">
    </div>
    <div class="column size1of4 nest">
    </div>
  </div>
  <div class="column size1of4">
  </div>
</div>

• Two up item
• Two up item
• Two up item
• Two up item

• Three up item
• Three up item
• Three up item
• Three up item
• Three up item
• Three up item

• Four up item
• Four up item
• Four up item
• Four up item

• Five up item
• Five up item
• Five up item
• Five up item
• Five up item

When to use block grids

Block grids can be used when you need any kind of grid layout for a components used on a page.

To use the block grid you must place everything inside a list. Add .block-grid along with a .x-up (x being the number of items you want in a row).

Example markup

<ul class="block-grid two-up">
  <li>…Content here…</li>
  <li>…Content here…</li>
  <li>…Content here…</li>
  <li>…Content here…</li>
</ul>

Single column default panel

<div class="panel">
  <div class="panel-hd">
    <h3 class="panel-title echo"></h3>
  </div>
  <div class="panel-body">
    …content here…
  </div>
  <div class="panel-footer"></div>
</div>

Single column dark panel

<div class="panel panel-dark">
  <div class="panel-hd">
    <h3 class="panel-title echo"></h3>
  </div>
  <div class="panel-body">
    …content here…
  </div>
  <div class="panel-footer"></div>
</div>

Single column light panel

<div class="panel">
  <div class="panel-hd panel-hd-light">
    <h3 class="panel-title echo"></h3>
  </div>
  <div class="panel-body">
  </div>
  <div class="panel-footer"></div>
</div>

<div class="panel panel-large">
  <div class="panel-hd">
    <h3 class="panel-title"></h3>
  </div>
  <div class="panel-body">
    …content here…
  </div>
  <div class="panel-footer"></div>
</div>

<div class="panel panel-large">
  <div class="panel-hd panel-hd-light">
   <h3 class="panel-title echo"></h3>
  </div>
  <div class="panel-body">
    …content here…
  </div>
  <div class="panel-footer"></div>
</div>

<div class="panel panel-large panel-dark">
  <div class="panel-hd">
    <h3 class="panel-title"></h3>
  </div>
  <div class="panel-body panel-dark">
    …content here…
  </div>
  <div class="panel-footer"></div>
</div>

Example form markup.

Given the left example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.

<form>
  <fieldset>
    <legend>…</legend>
    <div class="control-group">
      <label class="control-label">…</label>
      <div class="controls">
        <input type="text">
        … Any other inputs …
      </div>
    </div>
  </fieldset>
</form>

Extending inputs

Inputs can be extended by adding a sized class to the input field. Eg. .input-large added to the text input would render a large input field.

Image Rotator

Javascript is used to add a class .first and .last to the first/last items in the navigation on the right. This allows rounded corners in older browsers.

This active arrow is done with :before.This is supported in all browsers except for IE7. The active tab will just be white without an arrow.

Breaking news

Research updates

Idea of the day

Latest Morgans research

Contact us

Find a branch

Find a branch

Promo rotator

Morgans Limited

Closes 20th Jan 2011