IBM have created Carbon Design System for their Cloud products.
The team describe the system as 'a collection of reusable HTML and SCSS partials to build websites and user interfaces'. So it is similar to other boilerplate frameworks.
Benefits
As mentioned, they have reusable components, both HTML and SCSS.
They have decent support for accessibility which has been severely lacking over the years (I was well into Zeldman and accessibility ~2003).
It is easy to customise and create themes. Because of SCSS variables etc it is easy to modify components. They have provided an interactive theme so you can modify and save for your bespoke app.
They have a responsive grid (up to 12 columns) system.
Use with React
Components are usable with the React Carbon Components implementation. They have a guide in the Readme how to install. A great thing they have a Storybook implementation.
Putting it all together
- Install carbon react components:
yarn add carbon-components-react carbon-components carbon-icons
- Create custom theme
- Import styles from
carbon-components - Create grid layout
- Create React components using Storyboard
E.g:
npx create-react-app carbon
cd carbon
yarn add carbon-components-react carbon-components carbon-icons
In different terminals:
yarn run storybook
yarn start
yarn test