search

AxaFrance / react-toolkit

Flexible components html + css + react using BEM convention. Maybe, you can call it "Design System" !
https://axafrance.github.io/design-system/
MIT License
97 stars 62 forks source link
axa bem-convention design-system front-end-development javascript reactjs software storybook tools

readme

@axa-fr/react-toolkit

Build status Quality Gate Reliability Security Code Corevage lerna Twitter

About

A set of independent components. Awesome library based on HTML and CSS using BEM convention with the JavaScript ReactJS implementation. Each component is autonomous and extensible. Pick and use only what you need!

How React-toolkit does CSS isolation?

Only by using BEM (Block Element Modifier) CSS convention. No need for intricate technologies, just pragmatism.

Components are simple to use (just drag and drop it), simple to customize (by using CSS modifier) to your own need. Each component may evaluate internally (HTML, CSS, JS) and minimize any impact on your application.

You can easily build a new app from scratch or integrate some components into an existing application.

html+css documentation website react storybook website

Getting Started

Make you sure that sass and bootstrap modules are installed :

npm install -D sass
npm install bootstrap@4.3.1

After installing bootstrap, add these css imports in the root file of your components tree :

import 'bootstrap/scss/bootstrap-grid.scss';
import 'bootstrap/scss/bootstrap-reboot.scss';

You can either install everything and use only what you need. If you do that you will be able to use tree shaking to have a smaller bundle. However, you will need to import all the styles and not only the style related to your component.

npm install @axa-fr/react-toolkit-all --save
import React from 'react';
import { Alert } from '@axa-fr/react-toolkit-all';

import '@axa-fr/react-toolkit-all/dist/style/af-toolkit-core.scss';

const MyAlertComponent = () => <Alert icon="ok" title="This is an alert" />;

Or you can install only the components you need:

npm install @axa-fr/react-toolkit-alert --save
import React from 'react';
import Alert from '@axa-fr/react-toolkit-alert';
import '@axa-fr/react-toolkit-alert/dist/alert.scss';

const MyAlertComponent = () => <Alert icon="ok" title="This is an alert" />;

Packages

Concept

Each component should be autonomous (HTML + CSS + JS) and extensible.

How Does It Work

List of supported browsers

Here is the list of browsers we tested this toolkit on:

Contribute

Roadmap