materialstyle

Restyle Bootstrap with Material Style - A Material Design UI Library based on Bootstrap.

MIT License

Downloads
544
Stars
25
Committers
1.5K
View Code on GitHub Visit Website
Ecosystems: Bootstrap, Sass, JavaScript, CSS

Bot releases are hidden (Show)

materialstyle - v3.1.1 Latest Release

Published by nkdas91 about 1 year ago

Material Style 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.

🗒️ Full Changelog https://github.com/materialstyle/materialstyle/compare/v3.0.0...v3.1.1

materialstyle - v3.1.0-alpha1

Published by nkdas91 over 1 year ago

Material Style 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.

🗒️ Full Changelog https://github.com/materialstyle/materialstyle/compare/v3.0.0...v3.1.0-alpha1

materialstyle - v3.0.0

Published by nkdas91 about 2 years ago

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

Follows Bootstrap v5 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.

📝 Full Changelog: https://github.com/materialstyle/materialstyle/compare/v2.0...v3.0.0

Package Rankings
Top 10.95% on Npmjs.org
Badges
Extracted from project README
npm version
Related Projects
material

Material Design for Bootstrap 4

19 Feb 2015 3,197
material-angular-dashboard

Material Angular Admin Template

01 Dec 2017 1,054