Review of Carbon Design System

Owned by Adam Butterworth (Deactivated)
Last updated: Apr 03, 2023 by Brian Smith
3 min read

Reference:

Component Repo (Vanilla JS + SCSS): https://github.com/IBM/carbon-components
React Component Repo: https://github.com/IBM/carbon-components-react
Themes: http://themes.carbondesignsystem.com/

Demo App: 

Adam's takeway

It appears that it would take significant work for IBM to make Carbon truly theme friendly. I find their layout system lacking and the documentation, though beautiful, complex and difficult to navigate. Carbon seems to me to be more component library than CSS framework. In my opinion, our current solution with Bootstrap seems like a simpler and potentially better solution for helping our teams move faster.

Notes

Doing more than color theming is somewhat difficult (and likely brittle)

Most things other than color style need to be overridden (instead of themed). There's little documentation on the css/class front so you need to dig through the code.

  • Changing the font family is difficult. This leads me to believe IBM has designed this for internal products only, since it's using IBM Helvetica.
  • Not all components have theme variables. Seems like few do actually. (https://www.carbondesignsystem.com/guidelines/themes)
  • There is a documented theme variable for 'card' which is not a component in the documentation.
  • For buttons:
    • It’s difficult to remove the outline on focus
    • It’s difficult to use box-shadow instead (for rounded buttons this is important)
    • Both are possible via overriding styles after the theme, but since buttons are styled using mixins, there's no generic button class to modify – you need to find all the the class names for all the buttons and override all of them.

See: https://github.com/IBM/carbon-components/blob/master/src/components/button/_button.scss#L40 and https://github.com/IBM/carbon-components/blob/master/src/components/button/_mixins.scss#L49


Compiling SCSS on save takes more time than expected.

Nearly 10s. (Which is annoying)


(Minor) Cannot pass className through DataTable to element nodes.

Looks like you can do this on most components with a className prop.


It seems that spacing and layout are mostly left to the app developer

Unlike bootstrap which has a well documented grid system, flex-box helper classes, and layout/spacing utilities, Carbon has minimal documentation on their grid system (https://www.carbondesignsystem.com/guidelines/grid/code). There don't seem to be any layout or spacing utilities (https://www.carbondesignsystem.com/guidelines/spacing) seems to be done in SCSS.  Looks like Carbon leaves spacing up to the application developer. Bootstrap's layout section for comparison: https://getbootstrap.com/docs/4.2/layout/overview/


Most elements have zeroed-out margins.

They chose to leave most (all?) elements to have 0 margin by default. I suppose this is good for building UI heavy applications, but somewhat frustrating if you want a page to look reasonable before you ever get to SCSS.

I think this represents the large difference in this framework compared to Bootstrap: When you build with Bootstrap you may be able to build an entire application that looks fine without ever touching CSS, whereas in Carbon you need to write SCSS as you go to manage spacing and layout. In my opinion, Bootstrap appears to help you build pages more quickly and only provides a simple library of components (though zero in React) and Carbon gives you complex components styled and ready to go, but leaves out defaults/springboards/utilities for layout and visual elements out (likely anticipating use in UI heavy applications).


(Plus) Carbon leverages an import-once mixin to prevent multiple imports of the same scss file.

Allows components to freely require their dependencies: https://github.com/IBM/carbon-components/blob/master/src/globals/scss/_import-once.scss This is great but, may be what is responsible for the slow compile time.  Also not sure if it’s working properly at the moment.


Accessibility gap in React version of dropdown (V2 is on the way, not sure if it addresses it)

React Dropdown: http://react.carbondesignsystem.com/?selectedKind=Dropdown&selectedStory=Default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel
Vanilla Dropdown: https://www.carbondesignsystem.com/components/dropdown/code
(Notice arrow keys don't work in Vanilla.)


Documentation for React Components is not ideal.

The documentation for the library on https://www.carbondesignsystem.com/components/overview is Vanilla JS forward, all documentation for React is done in Storybook (which is fine, but definitely not as good as the rest of their documentation). 


Misc

  • Modal override wasn’t so hard. Modal places focus on an element inside it, you can specify a selector to change the default focus (defaults to primary button). In the data table case this can be clunky.
  • Theming with CSS seems to be mostly colors. The rest of the css is pretty opaque. I’d say this is a component library only – not a CSS Framework + Component Library.