DOCSEARCHbyAlgolia
Submit Docs

Daemonite Material v4.6

website·Indexed 31 days ago

https://djibe.github.io/material/

A Material Design implementation for Bootstrap 4.6. This documentation covers Material components such as data tables, tooltips, steppers, expansion panels, navigation drawers, and text fields, alongside Bootstrap layout grids, utilities, and migration guides.

Tokens
87.8K
Snippets
506
Records
586
Agent score
75%

What's inside Daemonite Material

  1. Overview of Material Design for Bootstrap

    Material Design for Bootstrap is a front-end framework that combines the HTML markup and technology of Bootstrap with the visual language of Google Material Design. It allows developers to use standard Bootstrap markup while achieving a Material Design aesthetic. The project provides styling for existing Bootstrap components and introduces unique Material Design components (like floating buttons, pickers, and steppers) that require specific additional markup.

  2. Overview of Top App Bars in Material Design

    The top app bar is a UI component used to provide branding, screen titles, navigation, and actions related to the current screen. It is designed to be flexible and can transform into a contextual action bar depending on the application state.

  3. Implement a Circular Progress indicator

    Circular progress indicators are used to inform users about the status of ongoing processes. They are constructed using a nested group of HTML elements. To change the color of the spinner, add a color modifier class to the root .progress-circular element. Supported modifiers include brand colors (-primary, -secondary) and helper colors (-danger, -info, -success, -warning).

    <!-- Default Circular Progress --> <div class="progress-circular"> <div class="progress-circular-wrapper"> <div class="progress-circular-inner"> <div class="progress-circular-left"> <div class="progress-circular-spinner"></div> </div> <div class="progress-circular-gap"></div> <div class="progress-circular-right"> <div class="progress-circular-spinner"></div> </div> </div> </div> </div>

    <!-- Primary Colored Circular Progress --> <div class="progress-circular progress-circular-primary"> <div class="progress-circular-wrapper"> <div class="progress-circular-inner"> <div class="progress-circular-left"> <div class="progress-circular-spinner"></div> </div> <div class="progress-circular-gap"></div> <div class="progress-circular-right"> <div class="progress-circular-spinner"></div> </div> </div> </div> </div>

  4. Understand the Bootstrap source code directory structure

    The full Bootstrap source code download contains both precompiled assets and the original source files. The dist/ directory contains the precompiled CSS and JS. The scss/ and js/ directories contain the source Sass and JavaScript. The site/docs/ directory contains the documentation source and usage examples.
    bootstrap/
├── dist/        # Precompiled CSS and JS
├── site/        # Documentation and examples
├── js/          # Source JavaScript
└── scss/        # Source Sass

  5. Listen to Bootstrap carousel events

    Bootstrap's carousel component triggers events on the carousel element (<div class="carousel">). These events provide metadata about the transition, including the direction ("left" or "right"), the relatedTarget (the DOM element sliding into place), the from index, and the to index.

    Available events:

    • slide.bs.carousel: Fires immediately when the slide method is invoked.
    • slid.bs.carousel: Fires after the carousel has completed its slide transition.
    $('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

  6. Ensure accessibility compliance with Material UI

    Material UI components are designed to be compatible with WCAG 2.1 (A/AA/AAA) and Section 508 standards. However, overall accessibility depends on the developer's implementation of markup, additional styling, and scripting. Interactive components (modals, dropdowns, tooltips) use WAI-ARIA roles and attributes to support touch, mouse, keyboard, and screen reader users. Because components are generic, developers may need to add specific ARIA roles or JavaScript behavior to accurately convey a component's precise functionality.

  7. Tab component events lifecycle

    When a new tab is activated, the following events fire in sequence:

    1. hide.bs.tab: Fires on the current active tab.
    2. show.bs.tab: Fires on the tab about to be shown.
    3. hidden.bs.tab: Fires on the previous active tab.
    4. shown.bs.tab: Fires on the newly active tab after the transition completes.

    Note: If no tab was previously active, hide.bs.tab and hidden.bs.tab will not fire.

  8. Understand the Bootstrap 4 Reboot CSS approach

    Reboot is a CSS reset that builds upon Normalize. It provides opinionated baseline styles using only element selectors, ensuring that additional styling is handled via classes. Key design principles include:

    • Using rem instead of em for scalable component spacing.
    • Avoiding margin-top to prevent margin collapse and simplify the mental model.
    • Using rem for block element margins to facilitate scaling across device sizes.
    • Minimizing font-related property declarations, preferring inherit where possible.

  9. Create a basic Card container

    A card is a flexible content container built with flexbox. By default, cards have no fixed width and will fill the full width of their parent element. They also have no default margin, so spacing utilities should be used as needed.
    <div class="card" style="width: 18rem;">
  <img loading="lazy" class="card-img-top" src=".../100px180/" alt="Image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

  10. Implement a basic pagination component

    Create a pagination component using a wrapping <nav> element for accessibility, containing a <ul> with the .pagination class. Each page link should be wrapped in an <li> with the .page-item class and use an <a> tag with the .page-link class. It is recommended to provide a descriptive aria-label on the <nav> element to identify the purpose of the navigation (e.g., aria-label="Search results pages").
    <nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

  11. Vertically align flex items in a column

    To move a specific flex item to the top or bottom of a container, combine flex-direction: column with align-items and auto margins (mt-auto or mb-auto).
    <!-- Push item to the bottom of a 200px column -->
<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div class="mt-auto">Item 3 (at bottom)</div>
</div>

  12. Implement a basic Snackbar using Bootstrap toast markup

    Snackbars are temporary notifications that appear at the bottom of the screen. They are implemented using default Bootstrap toast HTML markup. To ensure the default centered bottom alignment, wrap the toast in a .toast-container. Use the data-delay attribute (in milliseconds) to control how long the snackbar remains visible; recommended durations are between 4000ms and 10000ms.
    <div class="toast-container">
  <div class="toast" id="toast-example1" role="alert" aria-live="assertive" aria-atomic="true" data-delay="4000">
    <div class="toast-header">
      Saved in "Wedding" album
    </div>
  </div>
</div>