Abeille Assurances DESY Framework

Introduction

What it is

Framework is a set of user interface design patterns and front-end (HTML/CSS/JS) code for use across Abeille Assurances' global websites. We want to provide a consistent global experience for our customers.

As an atomic UI library, atoms (form labels, inputs, buttons) combine to form molecules (cards, search fields) which can combine further to form organisms (global navigation, search result listings).

We're open and inclusive, seeking feedback, suggestions and ideas to create awesome customer experiences.

What it isn't

Framework doesn't include back-end functionality. Along with JavaScript dependencies, these are the responsibility of product team.

It doesn't tell you where to use atoms, molecules or organisms within your design or how to layout your page. That is the role of the designer.

If you need a hand, check out the Element library for specific guidance and tips. If you need more help please don't hesitate to ask the team.

How it works

New components are being added to Framework all the time, packaged into monthly releases.

If your product needs are met by using existing design patterns, you're good to go. If you need something different, you should ask your development team and then come to the Framework team for advice. If you end up building custom functionality, please submit a ticket for us to consider your new pattern for a future release.

Which version to use

Check with your product team which version they're using e.g. v2.0, v3.1 etc. Alternatively, you can check for yourself with the Framework version finder. Version releases are documented here, if you need to know about versions older than v2.0, please ask the team.