Design Systems & Components Liraries

Last modified by Thiago Krieck on 2023/12/05 15:33

Available Components Libraries

Here are some design system

CSS UI / Vue Frameworks

  • vuetify
  • bootstrap 4 (bootstrap vue)
  • bootstrap 5 (bootstrap vue next)
  • tailwindcss (radix vue)
  • foundation (does not seem to have vue integration)
  • https://bulma.io/

In the prototype being worked on, an API has been created to abstract the design system and therefore create the "X design system" which would proxy the favored design system and also allow to create multiple implementation of the design system. In the prototype 3 base components (x-alert, x-btn, x-card) have been used with an implementation with implementation in Vuetify and in DSFR. The result is interesting.

Comparison Matrix

FrameworkAcceptabilityDesign & AccessibilityGithub linkMaintainerLicenseProject ActivityVue or web components?Less/Sass?
Vuetifyaccept Potential candidate?

Good # of components

Has a dedicated section on accessibility

Good theming support

Figma Kit available

https://github.com/vuetifyjs/vuetifyaccept CommunityMIT

https://awesomeopensource.com/project/vuetifyjs/vuetify

Stars: 38.2k
Last release: July 25, 2023

Vueaccept saas
Bootstrap 5cancel Does not provide Vue 3 components or Web Components https://github.com/twbs/bootstrapaccept CommunityMIT

https://libraries.io/npm/bootstrap

Stars: 165k

Last release: Sept 14, 2023

 accept sass
Prime Vue

error Open core

But, larger library of "free" components (e.g., has a tree component)

Excellent # of components

Good Theming support and built in themes (including BS5)

Will make use of CSS variables in the near future

WCAG 2.1 AA compliant

Figma Kit available

 

https://primevue.org/accept CommunityMIT

Stars: 4.7k

Last release: Oct 18, 2023

Vueaccept sass
Nextcloud Vueerror Maintained, but only to be used as an alternative is we need to integrate Cristal as part of a Nextcloud extension. https://github.com/nextcloud-libraries/nextcloud-vueaccept CommunityAGPL 3.0

Stars: 198

Last release: Sept 26, 2023

Vueaccept sass
Shoelaceerror Probably not a good choice if mainly maintained by a single actor

Excellent # of components

Support theming

Have accessibility as a core value

Figma Kit Available

https://github.com/shoelace-style/shoelace/error Mainly a single developerMIT

Stars: 9.3k

Last release: Oct 16, 2023

Web Componentserror ?
Buefyerror Probably not a good choice if mainly maintained by a core team of one https://github.com/buefy/buefyerror Core team of oneMIT

Stars: 9.5k

Last release: Sep 26, 2023

Vueaccept sass
Polymer

error Still under Google governance?

cancel project in maintenance, they recommend Lit

 https://github.com/polymer/polymererror At least initially started by Google?BSD 3Start: 22kWeb Components 
France Design System (dsfr)accept This is a special case, this cannot be the default but we want to support it to ease the integration of wikis on french government sites.Figma Kit availablehttps://github.com/GouvernementFR/dsfrFrench GovernmentMIT  accept saas
Radix

error default implement is for react, with an alternative Vue implem

error not so great experience with it during prototyping as it is based on Tailwind (to be confirmed by @Ludovic Dubost)

 accept CommunityMIT

Stars: 1215
Last release: September 20, 2023

 error Can't find the info for radix-vue
Spectrumcancel Not backed by community cancel AdobeApache-2.0 error none
Fastcancel Not backed by community https://github.com/microsoft/fastcancel MicrosoftMITStars: 8.6k
Last release: October 12, 2023
  
Tailwinderror not so great experience with it during prototyping (to be confirmed by @Ludovic Dubost) https://github.com/tailwindlabs/tailwindcssaccept CommunityMIT

https://libraries.io/npm/tailwindcss

Stars: 71k

Last release: Oct 18, 2023

 accept sass
Foundationcancel Not backed by community https://github.com/zurb/foundation-sitescancel ZURBMIT

Stars: 29.5K
Last release: Aug 18, 2023

 accept sass
Material-UIcancel the implementation is react based https://github.com/mui/material-uiaccept CommunityMIT   
Aurocancel Not backed by community  cancel Alaskair    
Boltcancel Too small community https://github.com/boltdesignsystem/bolt  

Stars: 286

Last release: Jun 1, 2023

 accept sass
Calcite Design Systemcancel Too small community https://github.com/Esri/calcite-design-system  

Stars: 240

Last release: 12 Oct, 2023

  
Carbon Design Systemcancel archived https://github.com/carbon-design-system/carbon-web-components     
Clevercancel Not backed by community https://github.com/CleverCloud/clever-components#collection-of-web-components-by-clever-cloudcancel Clever cloud    
Crayonscancel Not backed by community https://crayons.freshworks.com/cancel Freshwork    
Dilecancel Too small community https://github.com/Polydile/dile-components     
Duetcancel not open source https://www.duetds.com/     
Elixcancel Too small community https://github.com/elix/elix     
Graphite Design Systemcancel Not backed by community / too small https://github.com/paqtcom/graphite-design-systemcancel PAQT.com    
Helixcancel Too small community https://github.com/HelixDesignSystem/helix-ui/     
Ignite UIcancel Not backed by community https://github.com/IgniteUI/igniteui-webcomponentscancel infragistics    
 Io GUIcancel experimental       
Ionic Web Componentscancel build to support https://ionicframework.com/ a framework for mobile UI       
Korcancel Too small community https://github.com/kor-ui/kor     
Lightningcancel Not backed by community / too small https://github.com/salesforce/lwccancel Salesforce    
Lioncancel Not backed by community https://github.com/ing-bank/lioncancel ING    
Nordhealth Componentscancel Not backed by community https://nordhealth.design/components/cancel Nordhealth    
Vaadinerror Probably tightly coupled to the Java code base? https://github.com/vaadin/web-components     
Materializecancel Too small community https://github.com/materializecss/materializeCommunityMIT  Sass
BaklavaSmall selection of components compared to other DS

cancel Less components than other libraries

cancelDon't have accessibility as a token for development, only a github issue label

Figma Kit available

https://baklava.design/?path=/docs/documentation-welcome--documentation
https://github.com/Trendyol/baklava
TrendyolMIT

Stars: 1.1k

Last Release: 23 Oct, 2023

Web Components 

Accessibility with Web Components

https://stackoverflow.com/questions/75546623/web-components-a11y

Accessibility is NOT baked in on web components, so it falls on the creator of the components to take accessibility into account. Of the two web components DS being evaluated, only Shoelace has a dedicated page on a11y (see table above). Baklava only has some issues on Github, so it's a start, but maybe we should wait for it to have more a11y maturity to progress on this DS.

There is an experimental API for accessibility being drafted by Google, Apple and Mozilla, but currently it is not well-supported. Maybe something to keep an eye on for the future. https://wicg.github.io/aom/explainer.html

Abstracting the Design System

From our experience on XWiki, we know that going away from a design system is challenging and time consuming.

In the goal of making that easier, we propose to define a set of base visual components that we would abstract away.

Meaning that, it would be possible to modularily provide several design system implementations, and to switch between them by configuration.

The table below tries to map a few design systems to the corresponding abstract components.

Risk: This is effectively re-building a design system as we will need to identify the (least) common denominator of the implementations we'd like to support.

Note 1: We also have to take into account accessibility, so we need to take care to provide (as much as possible) options that are accessible by default.
Note 2: Following this approach will greatly limit the amount of fine-tuning that will be possible. A simple comparison of the options proposed by bootstrap and vuetify for the customization of buttons already shows a large variety of differences (size configuration, shape of the corner, icon positioning...)

Abstract ComponentAPIdsfr (https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton )Bootstrap 5 (https://getbootstrap.com/docs/5.3/components/buttons/)vuetify (https://vuetifyjs.com/en/components/buttons/)
Button (primary)<CristalButton level='primary'/>
  Label
</CristalButton>

 

<button class="fr-btn">
  Label
</button>
<button type="button" class="btn btn-primary">
  Label
</button>
<button class='v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated'>
  Label
</button>
Button (seconday)<CristalButton level='secondary'/>
  Label
</CristalButton>

 

<button class="fr-btn fr-btn--secondary fr-btn--tertiary">
  Label
</button>
<button type="button" class="btn btn-secondary">
  Secondary
</button>
<button class='v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-tonal'>
  Label
</button>
Button (tersary)<CristalButton level='tersary'/>
  Label
</CristalButton>
<button class="fr-btn">
  Label
</button>
<button type="button" class="btn btn-light">
  Label
</button>
<button class='v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined'>
  Label
</button>

Mapping DS components

For a more exhaustive mapping, see Mapping of Cristal Components.

Performance Measurements

TLDR

  • Test is only done on the alert component (1000 loads).
  • The slowest is less than 0.4ms per component. The fastest 0.04ms per component.
  • Done with the production build
  • Fastests: Shoelace (index 100), DSFR (300), Vuetify (600)
  • Wrapping an empty component is 0.007ms per component. Wrapping realcomponents seem to cost 20 to 50ms for 1000 components (0.02 to 0.05 per component).
  • Wrapping shoelace is more expensive (probably because for the others it's vue to vue, with shoelace it adds the vue overhead).
  • Web Components is possibly faster than VueJS components (but need to consider that it depends what the component does).
  • Firefox seems slower than Chrome (up to 2x)

Chrome using Production build (lerna run start) with alert only

  • Vuetify empty: 7ms
  • Vuetify direct: 287ms to 350ms
  • Vuetify encapsulated: 333ms to 400ms
  • DSFR empty: 6ms
  • DSFR direct: 150ms to 180ms
  • DSFR encapsulated: 160ms to 200ms
  • Shoelace empty: 5ms
  • Shoelace direct: 30ms to 50ms
  • Shoelace encapsulated: 60 to 70ms

Chrome using Production build (lerna run start) with alert + button

  • Vuetify encapsulated: 500ms to 700ms
  • DSFR encapsulated: 240ms to 350ms
  • Shoelace encapsulated: 90 to 150ms

 

Tags:
    

Get Connected