Documentation

Search value is required

Overview

This is a toolkit for building modern, cross-compatible branded user interfaces for our websites and applications.

The framework provides a set of branded CSS assets such as buttons, typography, tables, form elements and many more UI/UX components. An extensive collection of utilities are also made available to allow developers to quickly build accessible and cross-browser compatible websites and application UIs.

A subset of Bootstrap 4 tools are also available such as the framework's main layout grid system. Such tools are available to use in projects with the combination of brand and custom CSS assets.

Bootstrap

As the framework uses a subset of components from Bootstrap 4, an overview of theses components is detailed below:

  • Reboot

    Bootstrap's browser reset component, Reboot is used to normalise HTML elements so that they render more consistently across different browsers.

  • Grid

    Bootstrap's grid component provides a feature-rich layout system, based on flexbox, to allow the speedy and consistent development of layouts. The framework modifies Bootstrap's default grid breakpoint values with Standard Life's prescribed values from the brand guidelines. This makes it easy to build layouts and components without having to re-write margins, padding and gutters. Many developers will find the classes and layout patterns familiar. In addition, the grid system provides the backbone for the forms component.

  • Forms

    The framework extends Bootstrap's Forms component, making use of Bootstrap's core markup patterns and styles, and are then customised for Standard Life. Complex form layouts can be built easily using Bootstrap grid classes. The Forms layout section in the Bootstrap documentation provides guidance on the utilities available for laying out forms.

  • Layout utilities

    Bootstrap's layout utilities are included in the framework. See the section in the Bootstrap documentation for more detail on these classes.

  • Responsive breakpoints

    The framework uses Bootstrap's responsive breakpoints mixins to provide a feature-rich toolset for controlling styles with media queries. As previously mentioned, the breakpoints have been customised for Standard Life. When developing with the framework Sass files, uses these mixins in your own code to ensure predictable and consistent behaviour in relation to the core framework components.

Browser compatibility

All demos and markup examples are browser tested to ensure the framework currently supports the last 2 stable versions of all major browser and platforms.

Accessibility

Information and supplementary examples are available within the framework's documentation to aid the development of solutions which are accessible to a range assistive technologies. At minimum, it is recommended that an overall accessibility of a UI meets the AA level requirements and ideally the AAA standard. For more information regarding accessibility requirements and the set of criteria to meet each level of the standard, please vist www.w3.org for in depth information about the Web Content Accessibility Guidelines (WCAG 2.1).

Note on use of [namespace] placeholder:

The text [namespace] used in this styleguide denotes a placeholder for the string of characters represented by the $ns Sass variable. By default, we have set this to slb. This variable is used wherever a block element starts, (e.g. #{$ns}-button) in order to namespace the framework CSS from any other CSS used on your website.

This is helpful to keep in mind when copy/pasting any markup from the styleguide into your app. When using the Sass source files in development, you can override this variable with whatever namespace string you like, but you will have update any copy/pasted markup, replacing slb with your chosen namespace.