Extending the Framework

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

  • Development standards

    Abeille Assurances' global development standards

    Read more about development standards

  • JavaScript

    Things to consider when using JavaScript

    Read more about JavaScript

  • Locale settings

    Text and settings within JavaScript-enhanced modules which can be updated for the specific locale they are to be used in.

    Read more about locale settings

    • Breakpoints to use

    The core breakpoints being used in the Framework are:

    • 35em
    • 60em

    Fonts and their fallbacks

    v5.X.X

    The brand font (Source Sans Pro) is then loaded automatically and the font weights of light, regular, semi-bold and bold are controlled by using the appropriate css font weight.

    Font weight Font weight CSS value
    Light 300
    Regular 400
    Semi-bold 600
    Bold 700

    If there is a requirement to specify the font family, use the following setup to load the appropriate font files safely depending on the browser's capability:

    v5.5.0 and above

    .m-component {
	font-family: 'source_sans_pro', 'fallback-system-fonts', sans-serif;
}@supports (font-variation-settings: normal) {
	.m-component {
		font-family: 'source_sans_pro_vf', 'fallback-system-fonts', sans-serif;
	}
}

    v5.4.0 and below

    .m-component {
	font-family: "source_sans_pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", "helvetica", sans-serif;
}@supports (font-variation-settings: normal) {
	.m-component {
		font-family: "source_sans_pro_vf", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", "helvetica", sans-serif;
	}
}

    v4.X.X and below

    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 v4.3.0 and v4.8.0 the timings available were:

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

    As of v5.0.0 the jQuery.fx.off variable will be set on page load and if the animation setting is changed via the accessibility settings component, if jQuery is already present on the page. If your module loads jQuery as a dependancy ensure that the jQuery.fx.off variable is set appropriately when your module runs to ensure animations are not used when they shouldn't.

    Considerations for IE8 and below

    Care should be taken to ensure that all Abeille Assurances 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.