If you are seeing this message it is likely that the master layout is unavailable. Please contact helpdesk and raise a support case.

Process

Design and build your intended functionality in isolation within MASLAYAS.

Be very aware of changes to existing CSS defintions as this may have unwanted affects on pre-established functionality and design.

Look for similar functionality or desired style elsewhere within MASLAYAS as you may be able to reuse existing style definitions or copy chunks for code.

Test it, test it, test it. Add as much dummy hard coded data as needed to test your new functionality/design to bursting point. Think of the worst possible scenario and add that faux-data to see how it copes. For example, try adding paragraphs of text to an area expecting to only have a couple of lines, to see how it overloads. This goes for numbers too; an area expecting £999.00 - how does it look with £9,999,999.00, put different lengths of data into table cells and see if borders shift.

Deploy locally (see "Local deployments" tab) to be able to make and see code changes in your target app making sure you have changed the version number and colour reference to avoid confusion.

Once your target app is considered fit for purpose, arrange a live deploy.

Local deployment

The following is best practice for making changes and testing locally before deploying to a live environment.

You will usually have made a change or addition to MASLAYAS based on a requirement in a different app and will need to see this working locally before committing code for deployment.

Firstly, create a local IIS site named as you see fit (or use the default site if it's not being used by anything else).

Point the physical path in IIS to [your system path]\masterlayout\Build

Add a host file hack entry pointing http://maslayas.movewithus.co.uk to your local IP address.

Make changes to MASLAYAS and publish your code as normal. This should end up in [your system path]\masterlayout\Build

Review http://maslayas.movewithus.co.uk which with the aid of the host file hack should be pointing locally (review your version information to be clear).

Assuming this as expected run your app and you should see the MASLAYAS changes in effect (You may need to CTRL+F5 or even restart your application to avoid caching issues).

Live deployment

Publish MASLAYAS the same as a local deploy but ensuring you have changed the version and colour reference appropriately.

Commit MASLAYAS into SVN.

Create a FogBugz ticket titled "MASLAYAS deploy x.x.x.xxxx (where x's are the version and build number)

In the details of the FogBugz case detail the SVN path to the MASLAYAS build folder and state the intended target (usually http://maslayas.movewithus.co.uk)

State the named colour reference such as "Today's colour is SkyBlue" ensuring the colour used is appreciably different to its predecessor, i.e. if the colour reference for version 1.1.1 was "Crimson " don't use "FireBrick " for version 1.1.2 as they are both reds and at a glance may not be recognised as different.

The build manager should return the case to you once deployed.

To test this, make sure any MASLAYAS host file hacks are removed locally or you will be looking at your own version not the live version.

Welcome to Master Layout As A Service (MASLAYAS)Tip

TipMenu

Now with added tooltips!

This site is the user interface delivery point for multiple MWU websites. It is designed to not only be the source of CSS and scripts used by other sites but also a living brand standards guide and resource.

Having a single content delivery point provides the following benefits to all sites referencing MASLAYAS:

Brand consistency

Assurance of using the correct brand particulars such as colour and font.

Feature consistency

Ability to easily reference and reuse code maintaining a house standard across applications.

Script consistency

Keeping all applications to the same script standard, avoiding inconsistencies.

A tested environment

Code / CSS / scripts in MASLAYAS have been tested in isolation making it easier to integrate and test in applications.

Target environment

This site has been designed for optimum viewing for internal users at Move with Us.

Other browser will display the following:

ChromeThis site has been designed exclusively for Google Chrome.
Other browsers may present a less than optimal experience.

This is triggered by a jQuery function on an element with the id ChromeSplash

view codeSample jQuery code
if ($.browser.webkit) {
    $('#ChromeSplash').hide();
} else {
    $('#ChromeSplash').show();
}
Screen resolution: 1440px x 900px
Colour depth: True Color (32 bit)
Target browser Google Chrome v27

Browser stats

Below is a graph of latest browser market share to help with decisions in browser support.

Source: StatCounter Global Stats - Browser Market Share

© Copyright 2012 - 2024 Move with Us

Colour reference

When running an app that uses MASLAYAS how do you know if you are referencing the latest version? Checking the version details in the top right of the app will give you details about the app not MASLAYAS.

To solve this a specific CSS ID has been defined called MasterLayoutRef which has a background attribute. This attribute set to a named colour will be accessible in every app referencing MASLAYAS.

Each time MASLAYAS version changes before a deploy, change the named colour to something distinctly different to the current colour. This way when MASLAYAS is deployed it will be immediately obvious if applications are using the current version.

The current MASLAYAS colour reference is:

Master layout ref

This will avoid having to perform deeper investigations into whether an app is using the current version or looking at cashed or host file hacked variants.

Named colours

147 colour names are defined in the HTML and CSS colour specification.

Color name
AliceBlue
AntiqueWhite
Aqua
Aquamarine
Azure
Beige
Bisque
Black
BlanchedAlmond
Blue
BlueViolet
Brown
BurlyWood
CadetBlue
Chartreuse
Chocolate
Coral
CornflowerBlue
Cornsilk
Crimson
Cyan
DarkBlue
DarkCyan
DarkGoldenRod
DarkGray
DarkGreen
DarkKhaki
DarkMagenta
DarkOliveGreen
Darkorange
DarkOrchid
DarkRed
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBlue
DimGray
DodgerBlue
FireBrick
FloralWhite
ForestGreen
Fuchsia
Gainsboro
GhostWhite
Gold
GoldenRod
Gray
Green
GreenYellow
HoneyDew
HotPink
IndianRed
Indigo
Ivory
Khaki
Lavender
LavenderBlush
LawnGreen
LemonChiffon
LightBlue
LightCoral
LightCyan
LightGoldenRodYellow
LightGray
LightGreen
LightPink
LightSalmon
LightSeaGreen
LightSkyBlue
LightSlateGray
LightSteelBlue
LightYellow
Lime
LimeGreen
Linen
Magenta
Maroon
MediumAquaMarine
MediumBlue
MediumOrchid
MediumPurple
MediumSeaGreen
MediumSlateBlue
MediumSpringGreen
MediumTurquoise
MediumVioletRed
MidnightBlue
MintCream
MistyRose
Moccasin
NavajoWhite
Navy
OldLace
Olive
OliveDrab
Orange
OrangeRed
Orchid
PaleGoldenRod
PaleGreen
PaleTurquoise
PaleVioletRed
PapayaWhip
PeachPuff
Peru
Pink
Plum
PowderBlue
Purple
Red
RosyBrown
RoyalBlue
SaddleBrown
Salmon
SandyBrown
SeaGreen
SeaShell
Sienna
Silver
SkyBlue
SlateBlue
SlateGray
Snow
SpringGreen
SteelBlue
Tan
Teal
Thistle
Tomato
Turquoise
Violet
Wheat
White
WhiteSmoke
Yellow
YellowGreen