The Standard Life Digital Framework is a library of re-usable solutions, adopting BEM methodology, which enables Developers to build SLAL-branded design solutions without touching a line of code. Fully brand compliant, the framework has been designed with speed in mind, helping Developers to deliver high-quality user interfaces as efficiently as possible.
Framework summary
The framework can be grouped into three sections;
- Pre-built components – These exist for all the design solutions listed in SLAL’s Digital Guidelines
- Pre-built CSS utilities – These are individual CSS classes which Developers can use to build custom components when a bespoke design solution has been used.
- Custom components – These are components Developers have built themselves using the pre-built CSS utilities or by combining other components, to satisfy bespoke design solutions
Framework sections
Pre-built components
Pre-built components are an exact match for a design element in SLAL’s Digital Guidelines (e.g. buttons, cards, navigation bars, footer, heros, etc.). They are approved by SL Aberdeen’s Marketing Digital team as being brand-compliant and provide a quick and easy way for Developers to build a complex user interface without the need for in-depth analysis, investigation or knowledge.
Pre-built CSS utilities
Utilities are a collection of highly-customisable, low-level CSS classes. Utilities are what make the framework different and they come into their own when the design solutions provided vary slightly from the examples provided in the Digital Guidelines (e.g. there’s been a change of colour, font, background or padding/margins). Utility classes are the building blocks for Developers to build their own brand-compliant coding solutions for these bespoke designs. They can be used to override certain styling of an existing component or can be used to build up a custom component from scratch.
Custom components
Custom components are components that Developers have created themselves for a project, using CSS Utilities (or the utilities and a combination of other components). For example, a Developer may need to mix and match existing components or CSS classes to deliver a solution for bespoke design elements which have been produced for a project. Custom-built components are in addition to the main component library. All components are brand compliant and available for re-use.
What's included
Responsive from the ground up
All components and utility classes come with mobile-first, responsive behaviour, making it extremely easy for Developers to build responsive interfaces without resorting to custom CSS.
Browser compliant
As a general rule, all components and utilities in the Digital Framework support IE11 and 2 behind the latest versions of all modern browsers like Chrome, Firefox, Safari, Edge. (The only exception is when you are building custom components using utilities, where, in some cases, a specific ordering may be required to maintain browser support. For example, you’ll need to follow a strict pattern of container -> row -> column in order to be browser compliant in IE11). There is more information on browser compliance within each component and utilities in the Documentation.
Important – Please refer to your project’s delivery requirements for any older browsers a Platform Owner has agreed their platforms need to support.
Accessible
Each component in the Digital Framework has been developed according to Web Content Accessibility Guidelines (WCAG) 2.0 AA standard. This enables Developers to comply with SLAL Digital Guidelines, which dictate SLAL websites and applications meet WCAG AA success criteria. For more information, please refer to Web Content Accessibility Guidelines (WCAG 2.1).
Easy to categorise
Build Solution 1 (BS1)
This applies to any pre-built component in the framework that you can use exactly as is. It’s a straight copy/paste of code and there are no changes to the component mark-up. An example of this would be a direct copy of a design element in the Digital Guidelines (e.g. the information box)
Build Solution 2 (BS2)
This is a pre-built component that you’ve identified needs some modifications before it will match the design solution. There is no additional styling required, just the use of CSS utilities and combining components to create a custom component. An example of this would be copying the information box and adding an icon list inside it. (See the custom component catalogue for other examples).
Build Solution 3 (BS3)
This is a design solution that does not yet have any coding solutions and cannot be created using existing components or CSS utilities. It requires a complete new build, i.e. you’ll create a brand new component.