Overview

This is the Mappr UI toolkit which can be used as the main UI theme during Mappr application generation. It is a highly-modular design system based on Bootstrap 4 for rapid web page development. It contains different materials that can be assembled into more complex page layouts.

Being an extension of Bootstrap it matches with all the main concepts of Bootstrap grid and general styling. All known Bootstrap classes, elements and components are available. Mappr UI overrides some of the Bootstrap styles and provides some additional classes.

This guide contains real working examples, code snippets, documentation, and style guidelines.

Usage

Mappr UI uses the Bootstrap SASS module which allows it to be fully customized. It comes as an npm package and can be added to your project with the following command:

npm i -S @mappr/ui

Mappr UI is a collection of SCSS files that wrap and customize Bootstrap. It comes with 2 available variants: light and dark. Start using the UI by including one of the themes of the package to your main SCSS file:

@import "~@mappr/ui/scss/variants/light";

or

@import "~@mappr/ui/scss/variants/dark";

Now the Mappr custom Bootstrap Theme will override all the element styles in your web page.

Bootstrap Base

As Mappr UI is a Bootstrap Theme, it provides all the default styles and behaviour of the page elements. So all the concepts, classes, helpers and elements of Bootstrap 4 are available.
This documentation will list only the parts that were customized and added to the default Bootstrap theme. To get deeper knowledge of all Bootstrap possibilities please refer to their official docs.

Colors

Mappr UI has its default color scheme that is mainly based on default Bootstrap colors.

For the branded customization options the theme provides the possibility to set the primary and secondary colors that are used throughout the theme in various elements.

The default primary and secondary colors are:

You can easily override this colors in your style before including the Mappr UI theme, just like this:

$primary: #842bb0;
$secondary: #fb0e53;
@import "../../../../../scss/variants/light";

Some of the other colors available in the theme are:

contextual

other

Typography

Mappr UI styles the default typography elements, texts, headings and paragraphs like this:

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Heading with muted text

Lead paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following is rendered as bold text.

The following is rendered as italicized text.

An abbreviation of the word attribute is attr.

Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Pellentesque ornare sem lacinia quam venenatis vestibulum.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Blockquotes