Built according to Cubefuse branding on top of Bootstrap (4.1.3), Qube provides a solid foundation for web projects, while being lightweight with a stylesheet weighing just 13.5kb.
Qube is based on the Shards UI framework by DesignRevision, and offers the same developer experience while adhering to Cubefuse Brand Guidelines.
Colors
Typography
Qube uses IBM Plex Sans as its primary typeface for headings and the system’s UI font with a Roboto-first fallback (only on non-Apple devices) for the remaining content.
| Type | Example | Font | Font Size | Line Height |
|---|---|---|---|---|
| Heading 1 |
ABCabc |
IBM Plex Sans Semibold | 3.052 REM | 3 REM |
| Heading 2 |
ABCabc |
IBM Plex Sans Medium | 2.441 REM | 2.25 REM |
| Heading 3 |
ABCabc |
IBM Plex Sans Medium | 1.953 REM | 2.25 REM |
| Paragraph |
ABCabc |
System UI / Roboto | 1 REM | 1.5 |
Icon Packs
Qube supports by default both Material and FontAwesome packs. Icons can be placed in almost any element without the need of modifying the kit.
Material Icons
Over 900+ Icons
Font Awesome
Over 600+ Icons
Form Controls
All form controls are improved with micro-transitions and shadows that bring depth and improve the overall user experience.
Simple Forms
Using Icons
Form controls can be stylised by utilizing icons from either supported packs. They can be placed inside default or seamlessly integrated input group addons.
Seamless
Default
Custom Controls
The default custom form fields are improved and extended. One of the new additions being the toggle switch control.
Checkboxes
Radio Buttons
Toggles
Sizes
Custom Dropdown
Custom File Input
Validation
Form validation is also improved to match the new overall form feel, while following the same interaction principles for consistency.
Sliders
Sliders are also a new custom control and can be integrated almost anywhere with minimal markup (a single element) and extended customisation options via JavaScript.
Datepickers
Datepickers are also available and similar to slider controls they are very easy to create, being based on a single input element. Datepickers are customisable as well, letting you create complex configurations with range selections for example.
Cards
We wanted cards to stand out and bring depth without changing their original structure. All of this while allowing them to play well with the other components.
Sample Card Title
He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...
Read More
Sample Card Title
He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...
Read More
Sample Card Title
He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...
Read More
Sample Card Title
He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...
Read MoreProgress Bars
In addition to the default styles Qube allows you to adjust the width and add labels to your progress bars.
Widths
Labels
Modals
Display confirmation messages, forms or any type of content to your users using beautiful and non-disruptive modals.
Badges
Badges are similar to buttons and are available in all theme colors with filled and outlined modes and also with three variation styles: rounded, pill-shaped and squared.
Tooltips & Popovers
Don't let your uses guess by attaching tooltips and popoves to any element. Just make sure you enable them first via JavaScript.