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.
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.
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.
<ul>
<ul class="unstyled">
<ul class="unstyled striped">
<ul class="unstyled striped striped-light">
The following colours are defined in variables.less. They are mapped using classes in styleguide.less. Please ensure these are kept minimal.
.size1of1
.size1of4
.size1of4
.size1of4
.size1of4
.size2of4
.size2of4
.size3of4
.size1of4
.size1of3
.size1of3
.size1of3
.size2of3
.size1of3
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>
.size1of4
.size1of4
.size1of4
.size1of4
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 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).
<ul class="block-grid two-up"> <li>…Content here…</li> <li>…Content here…</li> <li>…Content here…</li> <li>…Content here…</li> </ul>
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.)
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"> <div class="panel-hd"> <h3 class="panel-title echo"></h3> </div> <div class="panel-body"> …content here… </div> <div class="panel-footer"></div> </div>
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-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>
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"> <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>
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.
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>
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>
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>
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>
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.
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.
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4