B01LER

Content

• B01LER
  • Content
  • ⭐ Introduction
    • Benefits of B01LER
    • Common misconceptions
      • 1. Web Components are not accessibile
  • Resources
  • Help & Feedback
    • Slack
    • Teams
    • Email
    • B01LER Monthly
    • Feedback
  • Requirements
  • 🚀 How to start
    • Prerequisites
    • Installation
    • Setup
    • Usage
  • ✅ How to test
  • ✌️ Contribute
  • 🐛 Bugs and Issues
  • 📄 License
  • 💚 Code of conduct

⭐ Introduction

B01LER is a fully customisable design system that enables you to easily create cohesive and consistent digital products across multiple platforms and brands.

B01LER provides pre-built components that exist in design in the form of a component library in Figma, as well as in code in a repository (the one you have opened right now), which is also displayed in the web using Storybook. Both the components in design and in code are connected via the token system.

Utilizing design tokens, which represent the visual properties of a design system, such as typography, color and spacing, B01LER is simultaneously consistent and flexible. By changing the tokens, you have the power to change the appearance of the whole design system, including all the components and all the digital products build with it. In design and in code.

Overall, B01LER is a powerful tool that helps you work smarter, not harder. By streamlining the design and development processes B01LER empowers you to create better products faster.

Benefits of B01LER

1. Increased efficiency in building design systems on brand, because semantic structure and architecture are pre-built
2. Increased efficiency, through automated processes. Documentation, DEV Handover, and more
3. Increased effectivity, because the time saved on building all the components can be used to build features right away
4. Increased acceptance of DS because components work right from the beginning of project phase
5. Immense cost savings, because the DS ramp-up phase is reduced from multiple months to days

Common misconceptions

1. Web Components are not accessibile

Some articles claim, that Web Components are not accessibile or that they are not complying with standard accessibility guidelines. The argument says that assistive technologies like screenreaders can not access the shadow DOM and for example are not able to "see" aria or role attributes that are needed to make components accessible. This is wrong. Modern screenreaders are not "looking" at the DOM. Instead they are accessing the accessibility tree, which is provided by the browser and also contains information from the shadow DOM.

Resources

• Check out our Figma File
• Have a look at our components in Storybook

Help & Feedback

Slack

Slack is our main internal communications channel and will most likely be the place where you can reach us best. Join the #boiler channel and say hi 👋 (you need to be part of the Accenture Org to join).

Teams

We are also on Microsoft Teams. Join the B01LER channel and say hi 👋 (you need to be part of the Accenture Org to join).

Email

You can send us messages via boiler@accenture.com, which the team will try to respond to as quickly as possible.

B01LER Monthly

Join the B01LER Monthly Session and ask questions, if you have any. The session takes place on the last Thursday of each month from 4 PM to 4:30 PM (CET). You can add the session to your calendar by following the guide in the pinned post of our dedicated Teams channel for the session (you need to be part of the Accenture Org to join).

Feedback

Link to Feedback-Form will be added with issue #428.

Requirements

Please list all the requirements the user has to fullfill to be able to run your code. Consider adding links to other tech documentations of possible dependencies to help users meet the requirements.We've added two examples of how you could structure this section:

1. This setup is working for all operating system, testing on Windows 8, Windows 8.1, Windows 10, Mac and Linux. This project is a Node.js package. You need Node Version 4 or higher and npm Version 2 or higher, check your installed version with node -v and npm -v.

2. To run our code you have to meet the following requirements:

   • Node.js v18
     (for more information check out the Node.js Documentation)
   • yarn (any version, we will pick the right settings later)
   • corepack (might need to be installed additionally)

🚀 How to start

Prerequisites

...

Installation

In this section you're supposed to provide the user with a step by step guide on how to install and use your project. We've added an example below to give you an idea of how you could structure your guide.

1. First, create a folder and a package.json file

   $ mkdir my-app
   $ cd my-app
   $ npm init -y

2. now we enable corepack for yarn and chooose right version

   $ corepack enable
   $ yarn set version 4.x

3. Next, install the app

   $ yarn

4. Now start up your app

   $ yarn start

Setup

...

Usage

...

✅ How to test

Please provide a short explanation on how and where to run your tests. You can also add a link to the Testing page to give further information. Also check out the following example to see one possibility to structure this section.

Example:

Local Setup

$ git clone project-name
$ cd project
$ npm install

The project test suite is run with

$ yarn test

✌️ Contribute

For a detailed documentation on how to contribute to the B01LER project, have a look at our contribution guide.

🐛 Bugs and Issues

If you would like to open an issue, you can gladly use this page. But please, have a look at the Contribute page before filing a bug.

📄 License

This project is licensed under the MIT license.

💚 Code of conduct

[The B01LER is using the Contributor Covenant Code of Conduct. You can read the whole code of conduct here.