dWeb Design Kit is based off of the famous and highly-used Bootstrap 4 framework, with a few extras: 10 extra custom components and two pre-built landing pages. Itâs also lightweight with its stylesheet weighting only ~13kb minified and gzipped.
In order to improve the contrast and accessibility, we have added a custom color palette to override Bootstrap's default color selection. Our native dWeb apps and websites use this same color selection.
dwDK uses Poppins 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|
|Poppins Semibold||3.052 REM||3 REM|
|Poppins Medium||2.441 REM||2.25 REM|
|Poppins Medium||1.953 REM||2.25 REM|
|System UI / Roboto||1 REM||1.5|
Icon Packs ð¦
dWeb UI supports both by default Material and FontAwesome packs. Icons can be placed in almost any element without the need of modifying the kit.
All form controls are improved with micro-transitions and shadows that bring depth and improve the overall user experience.
Form controls can be stylised by utilizing icons from either supported packs. They can be placed inside default or seamlessly integrated input group addons.
The default custom form fields are improved and extended. One of the new additions being the toggle switch control.
Custom File Input
Form validation is also improved to match the new overall form feel, while following the same interaction principles for consistency.
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.
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.
In addition to the default styles Shards allows you to adjust the width and add labels to your progress bars.
Display confirmation messages, forms or any type of content to your users using beautiful and non-disruptive modals.
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