"Design system" for UKIS UIs

[boeckMt]

This is a collection of user interfaces that we need to build UKIS apps or websites.

Requirements

Basic layout components:

• content container
• header
• side/bottom or footer navs
• sometimes a footer
• multiple sidebars
  (split the main content to display more information like charts...)
  (sometimes one for user input and another for results or output)
• tabs

Basic things:

• Icons
• radios and checkbox
• button, button groups, toggle button
• cards, chips/badges
• basic form inputs,
• alerts or messages
• modal/dialog

Advanced:

• filter and searchable table
• searchable selects - multi
• sliders and rangeslider
• sliders connected to inputs
• sliders with pips or ticks and units/values
• date and time - picker // range (for selection)
• date and time - slider // range (for selection)
• date and time stepper

Optional:

• guid user (guided Tour)
• action stepper

---

Links

• Introduction to design systems

[boeckMt]

• https://open-ui.org/design-systems/
• https://www.uxpin.com/studio/blog/best-design-system-examples/
• https://www.designsystems.com/open-design-systems/
• https://medium.com/akveo-engineering/top-10-best-design-systems-for-2020-3994d466f56f
• https://ui-lib.com/blog/free-design-systems-for-web/
• https://github.com/alexpate/awesome-design-systems
• https://designsystemsrepo.com/design-systems/
• https://backlight.dev/mastery/best-web-components-libraries-for-design-systems

---

From DLR Plone

• https://github.com/plone/volto-quanta

[boeckMt]

Angular design system

• https://www.creative-tim.com/product/blk-design-system-angular
• https://akveo.github.io/nebular/
• https://eva.design/
• https://www.bitovi.com/services/frontend/angular-consulting/design-systems
• https://carbondesignsystem.com/

[boeckMt]

• Moon Light Design System // but without slider (range) and date and time (only native)

[boeckMt]

Open Web Components component-libraries