Customization

MedSafe team has provided possibility to customize colors palette with CSS variables. For a proper work it should be set as HSL colors, so each type of colors has 3 variables with one of the nex suffixes (h, s, l). For example:

--{{colorName}}--primary-color-h: 194;

--{{colorName}}-color-s: 23%;

--{{colorName}}-color-l: 48%;

Where {{colorName}} could be replaced by one of the next color names related to palette:

• primary;

• secondary;

• link;

• warning;

• alert;

• success;

• error;

We also have list of system colors that are responsible for base colors such as background shadows etc. :

• white

• athens

• athens-darken

• mystic

• hit-grey

• boulder

• cape-cod

• black

They could also be customized by the same way as palettes colors.

Updating of these colors will replace base Bootstrap 4 theme colors and related classes provided by UI framework. Also we have extended list of classes with help of list of colors so each block could have a .bg-athens class that will apply background according to athens variable. API with custom and customized classes is shown below:

Text

• Text alignment according to Bootstrap 4 Grid:
  .text-(xs|sm|md|lg|xl)-left
  .text-(xs|sm|md|lg|xl)-center
  .text-(xs|sm|md|lg|xl)-right

• Text sizes:
  .text-xs - 11px
  .text-sm - 13px
  .text-md - 14px
  .text-lg - 16px
  .text-xl - 18px

• Text transformations:
  .text-lowercase
  .text-uppercase
  .text-capitalize

• Font weight:
  .font-weight-light
  .font-weight-lighter
  .font-weight-normal
  .font-weight-bold
  .font-weight-bolder

• Text colors:
  .text-{colorName}

Shadows

We have customized shadow class for applying consistent shadows to containers.

.shadow-sm[[-inset]]
.shadow[[-inset]]
.shadow-lg[[-inset]]

Labels

Also we have provided .label class for containers that works same way as other Bootstrap 4 components. So we should just apply .label .label-success classes and see what happens.

Icons

Essential JS provides icons with icons font. But for our requirements it is not always enough so we developed component based icons and connected them to our application. It is reusable functionality and could be expanded with different SVG icons. They are supporting theming, sizing, customization of the hover color and click handling.