One of the easiest ways to achieve an organised design is to apply a grid system. In the AXA Design System, we have chosen to follow two grid principles - Bootstrap standards and a 8px grid.
How do we use Grid and Spacing ?
We use Grids to help us designing flexible elements - elements that will adapt to the environment they are put in.
For flexible elements, we use a Bootstrap standards grid https://getbootstrap.com/
For the elements that are fixed (do not change with the environnement), we use the spacing units base on the 8px Grid.
Use of Grids - an example
The elements (yellow and green) adapt themselves to the width of the page - this means that the same element will have multiple sizes, depending on the environment on the environment (
width: 120px for desktop and
width: 76px for tablet).
Use of Spacing —an example
In some cases, we need design elements that remain fixed (i.e. do not adapt to the environment). For this purpose we use spacing units, which are made from a space scale, that defines the hierarchy between them. In order to achieve a coherent behaviour of the design element, we use “units” in order to restrict the number of spacing available.
- Grid overview
- Grid 8px
- Small size
- Medium size
- Large size
- Xlarge size
- 2XLarge size