Wireframe UI

Another component library, enabling fast prototyping w/ a good UX out of the box.

• Modern mobile-first UI
• A unified developer experience
• Priority-based component variations
• Consistent sizing and theming

Components

| Component | Lib | Story | | -------------- | ------------------ | ------------------ | | Backdrop | :white_check_mark: | Not Needed | | Button | :white_check_mark: | :white_check_mark: | | ButtonCopy | :white_check_mark: | :white_check_mark: | | ButtonSelect | :white_check_mark: | :white_check_mark: | | ButtonUpload | :white_check_mark: | :white_check_mark: | | Container | :white_check_mark: | :white_check_mark: | | Divider | | | | Input | :white_check_mark: | :white_check_mark: | | InputCheckbox | | | | InputLabel | | | | InputMultiline | | | | InputSelect | | | | Loader | :white_check_mark: | :white_check_mark: | | Modal | | | | Stack | :white_check_mark: | :white_check_mark: | | Text | :white_check_mark: | :white_check_mark: | | Theme | :white_check_mark: | Not Needed |

CSS Variable Naming

Terminology

Priority

Priority is used to intuitively let the developer choose the visibility of an element. 1 is the highest priority and more priorities can be added as desired.

Size

In sizing we first specify a base value that will be the standard used to compare other sizes.

Type of value

Type of value is often the same as a CSS property, but can be simplified if desired. For example size for combining width and height in one value.

Global

Order: {type of value}--{variant} Example: --color--red-dark

Contextual

Order: {type of value}--{element}--{priority or size} Example: --color--text--1

Component

Order: {component}--{variant (optional)}--{sub-component (optional)}--{type of value}-{priority (optional)} Example: --form-control--base--icon--color--1

Quick Start

TODO :D