General styles

This section covers various styles such as <h1></h1> and <p> as well as specifically styled areas. (This line is presented in a <p> tag and the code elements are displayed within <code></code> tags.

This is H1

This is H2

This is H3

This is H4

This is H5

.title used globally
Title

Block areas of the center panel can be are subdivided into .halfDivider, .twoThirdDivider and .thirdDivider (Full width is the default for any block element added). The grey background is for visual illustration only and not part of the CSS definition.

Message blocks

Typically used for either areas of the page expecting data where no records are returned or to give specific feedback to user after an action such as a search or performing a postback of large amounts of data.

view codeSample HTML code

<div class="generalMessage">
    <h3><span class="icon32 icon-info32">i</span> Your changes have been made and will appear within the next 24 hrs. </h3>
</div>

view codeSample HTML code

<div class="generalMessage success">
    <h3>
        <span class="icon32 icon-tick32">i</span>Your changes were succesfully saved.</h3>
</div>

view codeSample HTML code

<div class="generalMessage deleteAction">
    <h3>
        <span class="icon32 icon-warning32">i</span>Are you sure you wish to delete this?</h3>
</div>

view codeSample HTML code

<div class="underConstruction">
    <p>This background is used where a given part of a project has not yet been completed.</p>
</div>

Summary styling

It is often required to bring together information in read only format to get a quick general summary of a given solution. This is achieved by presenting the data within <div class="generalMessage summaryBox"> … </div>

This example incorporates 3 columns of information using the .thirdDivider class.

view codeSample HTML code

<div class="generalMessage summaryBox">
            <div class="thirdDivider">
                <h3>
                    [Title 1]</h3>
                <p>
                    <b class="title">[Customer A name]</b><br />
                    <span class="inlineLabel">Work No:</span> [01234 567 890]<br>
                    <span class="inlineLabel">Home No:</span> [01234 567 890]<br>
                    <span class="inlineLabel">Mobile No:</span> [01234 567 890]<br>
                    <span class="inlineLabel">Email:</span> <a href="mailto:anthony.hall@movewithus.co.uk"
                        title="anthony.hall@movewithus.co.uk">andrew.baker-...</a>
                </p>
                <p>
                    <b class="title">Customer address</b><br>
                    [address]<br>
                    [address]<br>
                    [address]<br>
                    [address]<br>
                </p>
            </div>
            <div class="thirdDivider">
                <h3>
                     </h3>
                <p>
                    <b class="title">[Customer A name]</b><br>
                    <span class="inlineLabel">Work No:</span> [01234 567 890]<br />
                    <span class="inlineLabel">Home No:</span> [01234 567 890]<br />
                    <span class="inlineLabel">Mobile No:</span> [01234 567 890]<br />
                    <span class="inlineLabel">Email:</span> <a href="mailto:anthony.hall@movewithus.co.uk"
                        title="anthony.hall@movewithus.co.uk">andrew.baker-...</a>
                </p>
            </div>
            <div class="thirdDivider">
                <h3>
                    [Title 2]</h3>
                <p>
                    <span class="inlineLabel">Contact:</span> [xxxxxxxx]<br />
                    <span class="inlineLabel">Telephone:</span> [xxxxxxxx]<br />
                    <span class="inlineLabel">Email:</span> <a href="mailto:anthony.hall@movewithus.co.uk"
                        title="anthony.hall@movewithus.co.uk">andrew.baker-...</a>
                </p>
                <h3>
                    [Title 3]</h3>
                <p>
                    <span class="inlineLabel">CAM:</span> [xxxxxxxx]<br />
                    <span class="inlineLabel">CSM:</span> [xxxxxxxx]
                </p>
            </div>
        </div>

Table layout

Tables must include the <thead> and <tbody> tags in the HTML.

The table tag needs to have the following class <table class="coreTable"> which is picked up by the jQuery tableSorterCheck() function which provides zebra striping and client-side column ordering.

The text within each th tag needs to be wrapped within <span class="editor-label"></span>

view codeSample HTML code

<table class="coreTable">
    <thead>
        <th>
            <span class="editor-label">Heading A</span>
        </th>
    </thead>
    <tbody>
        <tr>
            <td>[Data]</td>
        </tr>
    </tbody>
</table>

To activate the appropriate styling and functionality tableSorterCheck(); is required to be called either in the initial page $(document).ready function or as part of an Ajax callback.

Heading A	Heading B	Heading C	Heading D
[Data]	[Data]	[Data]	[Data]
[Data]	[Data]	[Data]	[Data]
[Data]	[Data]	[Data]	[Data]
[Data]	[Data]	[Data]	[Data]

Tables with buttons

Heading A	Heading B	Heading C	Edit column Tip TipEdit Column The column used for actions is held at a fixed width by adding class="editColumn" to the last <th> tag.
[Data]	[Data]	[Data]
[Data]	[Data]	[Data]
[Data]	[Data]	[Data]	Hyperlink slim button
[Data]	[Data]	[Data]	Hyperlink slim button

Fixed column tables

On occasion you may have two independent tables with the same amount of columns; these usually don't align well without help.

Adding one of the following classes to the <table> element will force the td cells to a specific width:

.twoColumns
.threeColumns
.fourColumns
.fiveColumns

This is a .fourColumn example:

Col 1	Col 2	Col 3	Col 4	Edit
[Data]	[Data]	[Data]	[Data]
[Data]	[Data]	[Data]	[Data]

Col 1	Col 2	Col 3	Col 4	Edit
[Data]	[Data]	[Data]	[Data]
[Data]	[Data]	[Data]	[Data]

All MWU brand colors

#220176	#00aff0	#a6ce39	#576a1a	#ffdd00	#ee2c39	#e21a72
#8686c1	#73c2ed	#d1e39a	#f68b1f	#ffeb95	#850b13	#8d4795
#c5c6c8	#e0e1e2	#ffffff	#d59f0f	#eac885	#9c7d0d	#cdb67b
#4d917b	#9ec1b3	#a0c3da	#caddea	#939598	#c6c8ca	#939598

Iconography

This is the current master sprite (click for full size view).

The sprite is set up to accomodate standard system icon sizes by allocating areas in divisions of 16px. Magenta areas are defined as areas available to add new icons. Clear space around icons needs to be kept to avoid other icons "leaking" into the area designated for a specific icon.

Icons in use

Icons are generally displayed in either 16x16 or 32x32 pixels. The element to used as an icon starts with .icon16 or .icon32 followed by the specific style required, eg: class="icon32 icon-taskOutcome1-32"

The following icons are in active use.

Other icons within the sprite have been used (outside of MASLAYAS) in other projects such as Market appraisal and may be of use in future development.

16px x 16px

32px x 32px

64px x 64px

Others

Icon tutorial

Icons should follow the MWU non-skeuomorphic style presenting a flat visual representation in the MWU brand colours.

Interactive elements have at least three states; passive, hover, active.

There are seven steps to creating a basic MWU icon in Photoshop:

Adding icon to CSS and HTML use

Once you have a new icon and have taken note of its x and y co-ords you can create the CSS definition for it.

Add a new entry amongst the other icon definitions in MasterSite.css with an appropriate name. Define the background position in negative values. This is because we are creating a 'window' with an element and displaying the sprite as a background image which will by default start at the image's 0,0 x,y coordinate. Therefore we have to set the background position to a negative value to move the image left and up.

view codeSample CSS code

.icon-Insurance32
{
    background-position: -224px -96px;
}

To display this icon on a page create an element, such as an <a> and add the classes icon32 icon-Insurance32 (for example).

This will display: Insurance

view codeSample HTML code

<a class="icon32 icon-Insurance32">Insurance</a>