| New Styleguide page for "Loading" | |
| Introduce CDN links to all images | |
| Add Section with index-tiles to branding page | |
| New Styleguide page for "Branding" | |
FC | Extend ".wui-bs-alert" with all fruit-color-variantes |
| Font-Awesome has been updated to version 5.12.0 | |
Ut | "Utils" has been extended with opacity, heights and colors |
Do you have any design-related questions or suggestions? We'd love to hear from you.
Please contact Wuiman to discuss your ideas.
Wui Building Blocks
Summary
The wescale user interface can be composed of different building blocks. These building blocks can be divided into different areas. Normally, the user cannot recognize to which area the respective building block belongs - but this is also not relevant for the user. For a developer, however, it is, because each of these building blocks fulfills different requirements from a technical point of view and can be implemented and used in different ways.
- wui Elements. The static markup (HTML/CSS) of UI building block that can be used recurrently in different places across the platform.
- vue Components. Interactive and dynamic UI building block based on wui Elements but extended by a functionality.
- Form Generator Fields. Fields are based on vue Components. For better reusability, these rather generic components are simplified for specific use cases by defining only the most necessary parameterization options.
Related pages
wui Elements
We speak of "wui Elements" when we are talking about pure HTML and/or CSS. A wui Element can be a simple class, like ".wui-color--primary", but also the combination of CSS and HTML as in a ".wui-growl" for example. It is also possible to combine different Elements into one new Element.
The most obvious difference to other building blocks in wui is that Elements do not contain any functionality or logic. To stay with the wui-growl-example - when a growl fades in or out, or which growl appears at all, is not defined by the wui Element, but rather by the vue component (see next section). Elements are static and are used only for the purpose of display.
They are the smallest unit and serve as a starting point for most UI building blocks. For example, when we say "something is in wui", we mean that the styling, i.e. the rules for the visual appearance of a UI building block, is defined in wui.css.
Name | Root Element |
|---|---|
| (WIP) Accordion | .wui-table-accordion |
| Alerts | .wui-bs-alert |
| Appicon | .wui-appicon2 |
| Badge | .wui-badge (badges shows e.g. how many items are in your shopping cart) |
| Balloonicon | .wui-balloonicon |
| Breadcrumb | .wui-breadcrumb |
| Button | .wui-btn / .input-group-btn / .wui-split-btn |
| Card | .wui-card2 |
| Carousel | .wui-carousel (the carousel shows e.g. different matching products under the GP wizard) |
| Content-tile | .wui-content-tile |
| Definition list | .wui-definition-list |
| Divider | .wui-divider (the divider is e.g. used within the icon-picker) |
| Drilldown | .wui-drilldown |
| Dropdown | .wui-dropdown |
| Dropdown / panel dropdown | .wui-panel-dropdown (e.g. all your notifications are shown in a .wui-panel-dropdown) |
| Empty state image (ESI) | .wui-empty-state |
| Error page | .wui-error-page |
| Filter | .wui-filter-select (mostly usded to filter within overview tables) |
| Flow-text / editorial-text | .wui-flow-text |
| Grid | .wui-grid |
| Growls | .wui-growl-notification |
| Icons | .wui-icon / .fa.fa-fontawesome-icon |
| Image | .wui-image (e.g. every product image in a .wui-card2) |
| Index tiles / context overview | .wui-index-tile |
| Inline list / spacing | .wui-inline-list |
| Input select | .wui-input-select |
| Label / tag | .wui-label / .wui-tag |
| Landing page | .wui-landing-page (only used for login-page) |
| Message / field validation | .wui-message |
| Modal | .wui-bs-modal |
| Pagination | .wui-pagination (e.g. in table header and footer) |
| Panel-nav / subnavigation | .wui-panel-nav |
| (WIP) Panel | .wui-bs-panel |
| (WIP) Progress / multi step progress | .wui-multi-step |
| Scene / header | .wui-scene-header |
| Scene flyout | .wui-scene-flyout (e.g. the button to start GP in shopping) |
| Search | .wui-search |
| (WIP) Select | .wui-select |
| Skeleton | .wui-skeleton-text (shown on cards while loading) |
| Sticky Footer | .wui-sticky-footer (e.g. used for the comparison of shopping items) |
| Strength meter | .wui-strength-meter (shows the strength of your PW) |
| Table | .wui-bs-table / .wui-th / .wui-td |
| Table grid | .wui-table-grid (is used, for instance, to divide the card header evenly) |
| Tag input | .wui-tag-input |
| Date picker | .wui-tiny-date-picker2 (used everytime you select a date in a form) |
| Tree view | .wui-tree-select__roots |
| Widget (Dashboard) | .wui-widget |
| Widget (Sidebar) | .wui-bs-panel |
vue Components
Within a vue Component, the static HTML/ CSS (wui Element) is extended by functionality. A vue Component goes beyond the mere display and offers the user the ability to interact with the UI.
Most of what the user sees in wescale are vue Components. However, many of the vue Components are designed for a specific context and cannot (yet) be reused out of the box. Our goal is to make all vue Components available as reusable building blocks within the Monorepo. For a list of currently available vue Components follow the link.
Form Generator Fields
In the context of the Form Generator we speak of "Fields". Usually a Field bases on existing vue Components like an input field or a select. However, the functionality (such as choices, validators, onChangeEvents etc.) is no longer within the vue Component, but is provided by the base classes and validators of the Form Generator. With the help of the Form Generator, a Field can be created which, in the best case, no longer needs to be programmed for implementation in a form, but only needs to be declared.