Skip to content

A fully customisable and tokenised design system boilerplate built by Accenture Song

License

Notifications You must be signed in to change notification settings

deven-org/boiler

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date
Feb 1, 2024
Sep 13, 2023
Dec 27, 2023
Feb 1, 2024
Feb 8, 2024
Feb 8, 2024
Mar 30, 2023
Feb 8, 2024
Apr 13, 2023
Mar 21, 2023
Aug 22, 2023
Feb 3, 2023
Sep 14, 2023
Feb 1, 2024
Dec 7, 2023
Feb 2, 2024
Jan 4, 2024
Feb 6, 2024
Jan 30, 2024
Nov 27, 2023
Jun 8, 2023
Dec 14, 2023
Feb 8, 2024
Feb 8, 2024

Repository files navigation

B01LER

B01LER_UpdateImg_1100-480@2x

πŸ“ƒ Content

⭐ Introduction

B01LER is a fully customisable design system (DS) 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 (the link to the Figma file above is exclusively for members of the Accenture organization, while those outside the organization can download the file here), 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 a token system.

A token system is a collection of values which represent the visual properties of a design system, such as typography, color and spacing.

Utilizing tokens, B01LER is simultaneously consistent and flexible. By changing the tokens, you have the power to change the appearance of the whole design, including all the components and all the digital products build with it. In Figma 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

Accessibility of Web Components

Some articles claim, that Web Components are not accessible 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

πŸ’ 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 hello@boilerds.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).

Questions, feedback or feature requests?

We are happy about anyone who wants to participate in our community. To ask questions or give us feedback please open a discussion on GitHub. For feature requests please use our feature request template.

Report an issue

Please let us know in case you are finding any bugs by reporting them with our bug report template. The template can also be used to report issues with our documentation. In case you discover a security vulnerability please review our security policy for more details on how report it.

βš™οΈ Requirements

  1. First you need to install Git. Git is needed to clone the project to your local machine. If you don't have it installed yet you can follow this installation guide.

  2. This project is a Node.js package. You need Node Version 18 or higher in order to run it. Check your installed version with node -v. For more information check out the Node.js Documentation.

  3. If you don't have Yarn installed, please install it (any version, we will pick the right settings later). For more information check out the Yarn Documentation.

In addition, you might need to install Corepack. For more information checkout Corepack Documentation.

πŸš€ How to start

Installation

Note: You need to run terminal as administrator on Windows machines.

  1. First, open a terminal and navigate to the folder you want to fork or clone this project

    $ cd git_projects
  2. If you want to use B01LER as a starting point for your own design system, the first step is to fork the repository. You can do this via the GitHub web interface and just follow the instructions or read the documentation here. This step is only required for the initial setup of you repository.

    In case you want to contribute to this repository, the first step is to clone the repository:

    $ git clone https://github.com/deven-org/B01LER-Kitchen.git
  3. now we enable corepack for yarn and choose right version

    $ corepack enable
    $ yarn set version 4.0.2
  4. Next, install the app

    $ yarn
  5. Now start up your app

    $ yarn start

Setup

Note: This is not filled out yet! ...

Usage

Note: This is not filled out yet! ...

βœ… How to test

Note: This is not filled out yet! ...

✌️ Contribute

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

πŸ“„ 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.