Typography

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.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

Lists

Below is the styling of all the different types of vertical lists used on the Morgans Corporate website. A vertical list can be extended by applying classes to it. Vertical lists will often be used in content and should not have any styles applied to them. Classes are only applied when lists will be used for navigational purposes.

Colours

The following colours are defined in variables.less. They are mapped using classes in styleguide.less. Please ensure these are kept minimal.

Grid

Default Grid System

.size1of1
.size1of4
.size1of4
.size1of4
.size1of4
.size2of4
.size2of4
.size3of4
.size1of4
.size1of3
.size1of3
.size1of3
.size2of3
.size1of3

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>

Nested Grids

.size1of4
.size1of4
.size1of4
.size1of4

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>

Block Grids

  • 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>

Panels

Panels are used to contain widgets on the Morgans website. They come in two sizes - the default panel fits into a .size1of4 column (typically the sidebar), the second is a larger one that fits into a .size2of4 column (typically in a content area.)

Single column panels

This is a generic panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more ideas…

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>

This is a generic panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more ideas…

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>

This is a light panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more ideas…

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>

Double column panels

Panels have no width applied to them so they will stretch the width of their containing column. Since the title needs to use a rounded corner effect cross browser. We extend the title with another class called .panel-title-large. This applies are larger version of the rounded background.

This is a larger panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more ideas…
<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>

This is a larger panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more ideas…
<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>

This is a larger panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more ideas…
<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>

Forms

Form Errors
Please correct the highlighted fields below
This is the form legend
This is the error message
This is the error message

Supporting help text

NB: I can add any text I want here and it will look nice

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

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.

Branch Rotator

This is the title of the story

Lorem ipsum dolor sit amet