Working with Nucleus
Where to start#
- Use this documentation to get accustomed with Nucleus and explore what it offers.
- Make use of our feedback channels: Github, Slack, Teams.
- Reach out to any member of the Nucleus team, start a conversation and ask questions.
Designing#
Depending on which stage of your design or discovery work you’re at, the Nucleus team has a growing body of reusable assets, tools, methods and knowledge that can help you create feasible design mock-ups and prototypes. We can help you visualise your ideas and would encourage you to:
- Familiarise yourself with this documentation and Storybook.
- Request access via our Teams channel to the published Figma Library if this is your preferred design tool.
- Alternatively, download the Sketch library
- Take a look at the Nucleus Playground for an easy, visual way to prototype with the components.
- Or if you are familiar with GitHub, you can install the Prototyping Tool on your local machine, check out the Nucleus Prototyping Tool repository!
- Work with the Nucleus team on exploring the feasibility of your concepts and ideas.
- Collaborate with your engineers, involve them in your discovery work.
Developing#
When you build using Nucleus you will be able to use already tested, plug-and-play front-end components. You can find a dedicated wiki for using the design system with in our Ember applications here:
https://github.com/ConnectedHomes/ember-commons/wiki/Nucleus
We have already had a number of successful collaborations with engineers across our teams. We would love you to help shape and improve our design system - come and speak to us.
Testing#
Once we have completed development we make sure the quality of Nucleus meets our standards.
Testing plays a vital role in order to validate and check the quality of our work. In addition to this, regression testing is performed to confirm that any recent addition or changes have not adversely affected existing features.
There are many ways to access www.britishgas.co.uk and we strive to ensure it's as accessible as possible.
Browsers and devices#
We prioritise the following list of browsers and devices identified as the most popular used by our customers.
Last updated - 2021-06-16
| Device | Operating System | Browser | Version |
|---|---|---|---|
| Computer | Windows 10 | Chrome | 90 |
| Computer | Windows 10 | Firefox | 83 |
| Computer | Windows 10 | Edge | 85 |
| Computer | MacOS Catalina | Safari | 13.1 |
| Computer | MacOS Catalina | Chrome | 88 |
| iPhone | iOS 14 (iPhone 12) | Safari | 13 |
| iPhone | iOS 13 (iPhone XS) | Safari | 13 |
| iPhone | iOS 14 (iPhone 12) | Chrome | 86 |
| iPhone | iOS 13 (iPhone XS) | Chrome | 86 |
| iPad | iPad OS 14 (iPad Pro 12.9 2020) | Safari | 13 |
| iPad | iPad OS 14 (iPad Pro 12.9 2020) | Chrome | 86 |
| Android | Android OS 10 (Samsung Galaxy S20) | Chrome | 89 |
| Android | Android OS 11 (Samsung Galaxy S21) | Samsung Browser | 11.1 |
Note : IE11 and Edge 18 browsers are no longer supported as their usage levels are below 0.5% (as of June 2021).
For product owners and business analysts#
While you might not need in-depth knowledge of our shared UI styles and components, understanding their principles and requirements will help when you're reviewing current Proposals and discussing work ahead. We hope that you push your product teams to explore feasibility of existing assets before resolving to build custom, once-off components. After all, we believe the former will lead to better results for our business in the long run.
We're working towards an evidence driven and purposeful use of UI components. If you think an asset of ours is performing particularly well or poorly in a certain context, please let us know. It will help us curate and improve our shared assets and documentation.
For content managers#
Sometimes things get squeezed in where they shouldn't. We hope that with shared documentation and tools available, you'll see less of this taking place. One means for this change will be our growing body of shared, brand aligned, plug and play assets. Another one will be tools like Storybook that help us stress test and collaborate on content with more ease. We also know that changing workflows takes some time and practice. To get there faster, we hope you'll also study the guidance provided here, the better to suggest alternative solutions when needed.