Migrating to v3

Review changes in Material Style source files, documentation, and components to migrate from v2 to v3.

v3.1.1

Based on Bootstrap v5.3.2

Docs

Added documentation for Layout, Utilities & Helpers

Forms

Text and Select Fields now use the global border-width & border-radius

Theming

We have created Theme builder, a tool for customizing Material Style. With this tool, you can effortlessly select your theme color, set the global border-width, and adjust border-radius. The tool offers real-time previews on components, making it easy to visualize your design choices. Additionally, it automatically generates CSS variables based on your theme color selection.

v3.1.0-alpha1

Based on Bootstrap v5.3.0-alpha3

Follows the following Bootstrap migration guides:

Docs

  • Added Light and Dark modes.
  • Added Customization docs.

Customization

Color modes

  • Material Style supports Light and Dark color modes. See the color modes documentation to learn more.
  • Theme colors are adaptive to Light and Dark modes by default.

Theming

Theme colors can be customized using CSS variables. And the components are updated to use theme colors from the CSS variables. It allows for custom theming using CSS variables. Helpful for CDN users. See theming to learn more.

Colors

  • Breaking Colors red, pink, purple, indigo, blue, cyan, teal, green, yellow & orange have been removed in favour of custom theming.

Components

  • Added elevated buttons (Buttons with shadows).
  • Added support for Dark Select and Text Fields.
  • Breaking Classes .base-[color] & .primary-[color] are depricated from Selects, Text fields & Tabs.

v3.0.0

Based on Bootstrap v5.3.0-alpha3

Material Style v3.0.0 is a major rewrite of the entire project. The most notable changes are summarized below.

Follows Bootstrap v5.2.0 migration guide.


Utilities

Colors

  • Breaking To avoid increased file sizes, v3 uses only a subset of the v2 color palette. It uses Bootstrap’s default theme colors + pink, purple, indigo, teal, orange, white & black.
  • Breaking Color shades (Example: red-50, blue-500, pink-a100) have been removed to reduce file size.

Ripple

  • v3 uses the official Material Design Ripple package @material/ripple for the ripple effects.
  • Breaking Unlike v2, where the ripple effect is directly applied to components, in v3, we need to add an element <span class="ripple-surface"></span> to the desired component like a Button and activate the effect on the ripple-surface.

Shadows

  • Breaking Classes raised-*dp have been renamed to shadow-*dp
  • Breaking Class unelevated has been replaced with shadow-none

Components

Buttons

  • Breaking Classes btn-text-[color] have been dropped. btn-outline-[color] border-0 can be used for Text Buttons.
  • Breaking File inputs now use Bootstrap’s default styling. Classes m-file-input and btn-file have been dropped.

Floating Action Buttons

Breaking Class extended-fab has been dropped. rounded-pill can be used.

Cards

  • Breaking Classes card-outline-[color] have been dropped. border border-[color] can be used for Cards with border.
  • Breaking Classes card-actions, card-buttons & card-icons have been dropped as well.

Drawer / Sidebar

Breaking v3 uses Bootstrap 5’s Offcanvas component for Drawers.

Progress bars

  • Breaking Class m-progress has been renamed to progress-bar-indeterminate.
  • Breaking Class m-rainbow has been renamed to progress-bar-rainbow.

Spinners

  • Breaking Class m-spinner has been renamed to spinner-material.
  • Breaking Classes spinner-[color] have been dropped. text-[color] can be used for colored spinners.

Forms

Text Fields

  • Breaking v3 uses Bootstrap 5’s .form-floating for Text and Select fields.
  • Introduced .form-floating-with-icon to support icons and spinners on Text and Select fields.
  • Breaking Classes m-text-field, m-text-field-outline, static-label & floating-label have been removed.
  • Breaking Color class primary-[color] has been replaced with base-[color].
  • Breaking Color class accent-[color] has been replaced with primary-[color].

Select Fields

  • Breaking v3 uses Bootstrap’s dropdown component for the Select options.
  • Breaking v3 uses Bootstrap 5’s .form-floating for Text and Select fields.
  • Introduced .form-floating-with-icon to support icons and spinners on Text and Select fields.
  • Breaking Classes m-select, m-select-outline, static-label & floating-label have been removed.
  • Breaking Color class primary-[color] has been replaced with base-[color].
  • Breaking Color class accent-[color] has been replaced with primary-[color].

Input groups

v3 supports .input-group on Text and Select fields.

Form validation

v3 supports form validation.

Checkbox, Radio & Switch

Breaking Color classes input-[color] have been dropped.

Material Style Logo
Theme Builder
Personalize Material Style to reflect your product's brand identity.