Bored with Bootstrap Design? Try out the Carbon Design System!

There has been a tremendous amount of change in the field of web development. To build a modern and sophisticated web app you have to use a framework which will make your work much faster, managed and elegant. Building a modern web app without a proper framework will have issues in Responsiveness, compatibility, and accessibility.

So, I think you’re aware of the most popular and widely CSS Framework i.e., Bootstrap Framework. For years and still, it is continuing to be the No.1 Framework used by web developers to build websites/apps.

Bootstrap does contain many elements, predefined classes, responsive columns i.e, stacking of columns based on the screen size, widgets, styles, etc. It is surely a good framework. I’ve personally used this framework for almost all of my projects. But, today I’m going to introduce a newer, modern, elegant framework called Carbon.

Carbon is a design system used in almost every application at IBM. It represents a fresh approach to the design. This project is developed by the Carbon team at IBM and it is open source, so even you can contribute to it.

The Carbon Design System is a series of individual styles and components, that when combined make beautiful, intuitive designs. These designs are systemic and logical, as they all follow the same universal principles. The component library gives developers a collection of re-usable HTML and SCSS partials for building their products.

Carbon Design System

Top Features of Carbon Design System:

#1. New and Fresh Components

components Carbon Design System

There are tons of new intuitive components apart from the regular ones like the buttons, forms, data tables, date picker, file uploader, modals, multi-select, notifications, overflow menu, search, tabs, tags, tooltips, etc. Out of all these components, I personally liked the dropdown and date picker. They were simple but robust enough to handle all types of modern inputs.

#2. Built-in Support for Data Visualization

The Carbon Design System provides a built-in support for visualizing our data. The charts are simple yet follows a modern design approach by IBM. Bar charts, Grouped bar charts, Line charts, Pie charts, gauges, Scatter Plot are some of the data visualization charts provided by it.

#3. Utilities that make our work even easier

data-table-skeleton-state

It provides a very good way to show placeholder sort of UI when loading data elements like data tables, tiles, containers. It is referred as progressive loading which shows a placeholder in the place of actual data when the data is loading. This approach has been in a trend in many modern web apps. And I really liked the way Carbon team included the support for it.

#4. React and Angular Ready

Yeah! You heard it right. The Carbon Design System not only provides the code for normal HTML (Vanilla JavaScript) but also provides the code and support for React and Angular Frameworks. The conventional Bootstrap lacks here. All the components are reusable which means less code, more manageable work.

#5. Always adapting the best

The carbon design system is always in a search of better. So, the carbon team and the other open source contributors often release experimental updates. These updates constantly provide new features, bug fixes, etc.

How to use The Carbon Design System:

Firstly you need to download the Carbon Kit. You can do so by firing up your terminal and executing this command.

$ npm install –save carbon-components

Or you can directly download via CDN and include it in your project.

After including it in your project, you can start using the components. For example, to use buttons. Here’s the code for Vanilla JS.

<button class=”bx–btn bx–btn–primary”  type=”button”>Button</button>

And here’s the code for ReactJS.

<Button className=”some-class” onClick={onClick} onFocus={onFocus}>Button</Button>

Also, It doesn’t let Angular fans go down, as Angular is also supported.

Conclusion:

While me being an active user of the bootstrap design system, I hesitated a bit to try out the Carbon. But it was worth shifting to carbon design system as it is more beautiful, intuitive and most importantly it supports my favorite framework React. And I suggest you people to try it out once for sure!