Features

This page shows all features you can expect in this boiler.

blue-deeporange

dark-primary
#1976D2
default-primary
#2196F3
light-primary
#BBDEFB
text-primary
#FFFFFF
accent
#FF5722
primary-text
#212121
secondary-text
#757575
divider
#BDBDBD

Style Classes

Implementing the colors is by class they may be used for text or backgrounds and this can be achieved by either prefixing text- ,or by prefixing bg- to the names in the color blocks seen above.

Below please see the available options:

Text Color Classes
  • text-dark-primary
  • text-default-primary
  • text-light-primary
  • text-text-primary
  • text-accent
  • text-primary-text
  • text-secondary-text
  • text-divider
Background Color Classes
  • bg-dark-primary
  • bg-default-primary
  • bg-light-primary
  • bg-text-primary
  • bg-accent
  • bg-primary-text
  • bg-secondary-text
  • bg-divider

Theming

Out of the box the application contains default themes:

  • black-white
  • blue-deeporange
  • blue-green
  • blue-greyindigo
  • brown-grey
  • deeporange-yellow
  • grey-bluegrey
  • indigo-blue
  • pink-indigo
  • teal-pink
  • yellow-lightblue
Adding more themes

New color schemes can be created by visiting Material Palette from there you can select a new color scheme and download it as a css file.

Once the css file produces by Material Palette has been received copy it to static/lib/theme/colorsnext time the app is build it will install the new theme and it will appear as a selectable theme on the floating theme button.

Additional CSS Classes

Typography

When you add the class mnext to any of the heading tags h1 h2 h3h h4 h5 h6 then your your html will adopt the theme colors as follows.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

3D Floating objects

furthermore when adding the class of mnext to a element class will then transform the heading into a material next floating object. These headings were created to follow the material design principles of elevation and lighting.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
format_paint
Title

A bunch of text