DOCSEARCHbyAlgolia
Submit Docs

Material Style

website·Indexed 30 days ago

https://materialstyle.github.io/materialstyle/3.1/getting-started/installation/

A CSS framework providing Material Design components, helpers, and utilities. Version 3.1 includes a Sass-based utility API for generating and extending classes, along with components such as Snackbars, Floating Action Buttons (FAB), Progress Bars, and Tooltips, as well as responsive utilities for flexbox, spacing, and sizing.

Tokens
146.9K
Snippets
852
Records
914
Agent score
73%

What's inside Material Style

  1. Overview of Material Style for Bootstrap

    Material Style is a UI library built on top of Bootstrap 4.5. It allows developers to integrate Material Design aesthetics and animations into standard Bootstrap components. The project is open-source and distributed under the MIT license, making it available for use in commercial projects.

  2. Overview of Material Style UI Library

    Material Style is a Material Design UI library built on top of the Bootstrap front-end framework. It provides beautifully crafted components (such as text fields, shaped buttons, and tabs) that follow Material Design principles while leveraging Bootstrap's underlying structure.

  3. Overview of Material Style for Bootstrap

    Material Style is a UI library based on Bootstrap 4.5 designed to add Material Design styles and animations to standard Bootstrap components. It is released under the MIT license, making it available for use in commercial projects.

  4. Overview of Material Style for Bootstrap

    Material Style is a UI library built on top of Bootstrap 4.5. It allows developers to integrate Material Design aesthetics and animations into standard Bootstrap components while maintaining the underlying Bootstrap framework.

  5. Overview of Material Style for Bootstrap

    Material Style is a Material Design UI library based on Bootstrap. It provides a collection of components designed to adapt seamlessly to both light and dark color modes. The library is MIT licensed, making it available for use in commercial projects.

  6. Overview of Material Style for Bootstrap

    Material Style is a UI library built on top of Bootstrap 4.5. It allows developers to integrate Material Design aesthetics and animations into standard Bootstrap components. The project is open-source and distributed under the MIT license, making it available for use in commercial projects.

  7. Generate utility classes using the Material Style Utility API

    Material Style uses a Sass-based API to generate utility classes via the $utilities map. This map contains keyed groups of utilities, each accepting specific options to define the resulting CSS rules. The default utilities are merged with any custom $utilities map provided by the user.
    $utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

  8. Understand how Material Style grid gutters work

    Gutters are the gaps between columns used to space and align content. They are implemented using horizontal padding on each column, with negative margin applied to the start and end of each .row to offset the padding and ensure content alignment. The default gutter width is 1.5rem (24px), which aligns with the spacing scale.

  9. Understand Material Style grid hierarchy and behavior

    Material Style uses a flexbox-based grid system. The required structural hierarchy for layouts is: container → row → column → content. The system provides predefined responsive classes based on six breakpoints and a 12-column grid tier. All content should be placed within columns to avoid unintended layout consequences.

  10. Use Material Style CSS custom properties for real-time customization

    Material Style provides CSS custom properties (variables) in its compiled CSS, allowing developers to customize theme colors, breakpoints, and font stacks in real-time via the browser inspector or prototyping tools without needing to recompile Sass. To prevent conflicts with third-party CSS, all Material Style custom properties are prefixed with bs-.

  12. Use the Material Style Theme Builder

    The Material Style Theme Builder is a tool used to create custom themes without writing manual CSS. It allows developers to select theme colors, adjust border width and radius, and visualize changes via real-time component previews. The builder automatically generates the necessary CSS and SASS for integration into a project.