Extending the Framework

When producing additional CSS and JavaScript to extend the capabilities of the Framework, the following patterns and rules should be observed:

Breakpoints to use

The core breakpoints being used in the Framework are:

  • 35em
  • 60em

Fonts and their fallbacks

The default font setup for Framework-based sites, including fallbacks, is:

blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'arial', 'helvetica', sans-serif

The brand font (Source Sans Pro) is then loaded using the following CSS block in combination with a top level selector of .fonts-loaded so that it is only applied once the font has been downloaded by the client. All font variants are loaded in as part of the core Framework CSS and JavaScript.

Light
'source_sans_prolight', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'arial', 'helvetica', sans-serif
Regular
'source_sans_proregular', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'arial', 'helvetica', sans-serif
Semibold
'source_sans_prosemibold', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'arial', 'helvetica', sans-serif
Bold
'source_sans_probold', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'arial', 'helvetica', sans-serif

For example, to apply Source Sans Semibold to an element, the CSS would be:

.fonts-loaded .your-class-name {
	font-family: 'source_sans_prosemibold', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'arial', 'helvetica', sans-serif;
}

Accessibility

In order to support the WCAG 2.3.3 accessibility guideline, all CSS and JavaScript animation/motion should be provided as an enhancement.

When JavaScript runs, if the user has not chosen to disable animations then a CSS class (u-animation) is added to the html element and a global JavaScript variable (FRAMEWORK.animation) is set to true that can then be used to enable animations on your components.

The following example shows how animation would be applied, firstly using CSS and secondly using JavaScript.

.a-example {
	transform: scale(1);
}
.a-example:hover,
.a-example:focus {
	transform: scale(2);
}
.u-animation .a-example {
	transition: transform .35s;
}
if ( FRAMEWORK.animation ) {
	element.slideDown( 350 );
} else {
	element.show();
}

The Framework also has some standard animation speeds (in milliseconds) available for use which will be automatically set to 0 if animation has been disabled. These can be used to keep code using animations more manageable.

FRAMEWORK.timings = {
	'current' : {
		t100ms : 100,
		t150ms : 150,
		t200ms : 200,
		t250ms : 250,
		t300ms : 300,
		t350ms : 350,
		t500ms : 500,
		t1s : 1000
	}
};

Between v.4.3.0 and v.4.8.0 the timings available were:

FRAMEWORK.timings = {
	'current' : {
		t150ms : 150,
		t350ms : 350,
		t500ms : 500,
		t1s : 1000
	}
};

Considerations for IE8 and below

Care should be taken to ensure that all Aviva websites still present meaningful and usable content to Internet Explorer 8 and other older browsers. Thus for these browsers:

  • No JavaScript should be supplied to the client;
  • The CSS provided should be free of any media queries, so that the user is presented with a fixed width large layout.