Overview

Bubbles Design System is our frontend components system build over React and well documented with Figma (with information about grid, measures, etc..) and StoryBook (final components).

Bubbles is based on atomic design philosophy and we also provide completed templates for several functionalities.

• Design & layout definitions

• Public StoryBook packages (external links):

  • Components
  • Editors
  • Notifications
  • Calendars

Design documentation summary

Here you can review the basics definitions of our design system.

Layout

Review layout definitions

• Shell
• Grid and Measures
• Layouts

Theme

Review theme definitions

• Theme default

Navigation

Review navigation definitions

• Organizational
• Contextual

Actions

Review actions definitions

• Buttons
• Edit & Detail panels
• Forms

Content

Review content definitions

• Cards
• Tables
• Text elements

App

Review layout definitions

• Mails
• Modals
• Headers

Help and phatic functions

Review help definitions

• Alerts
• Contextual help
• Initial setup
• Tooltip

How to create new Bubbles components (Johan)