Extending the front-end framework

When producing additional CSS and JavaScript to extend the capabilities of the front-end framework the following patterns and rules should be observed.

Breakpoints to use

The core breakpoints being used in the front-end framework are:

  • 35em
  • 60em

Fonts and their fallbacks

The default font for framework sites is:

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

To then apply the brand font (Source Sans Pro) use the following in combination with a top level selector of fonts-loaded so that the brand font is only applied once it 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 is added to the html element (u-animation) and a global JavaScript variable is set to true (FRAMEWORK.animation) 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();
}

Considerations for IE8 and below

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