Material Kit

Material Kit#

Material Kit represents Creative-Tim’s interpretation of Google’s Material Design principles, crafted specifically for web applications. This kit goes beyond basic Material Design implementation by adding carefully curated animations, color schemes, and enhanced components while maintaining the core principles of material elevation, motion, and interaction.

👉 New to App-Generator? Sign IN with GitHub or Generate Web Apps in no time (free service).

Material Kit - open-source dashboard template provided by Creative-Tim

Project Architecture#

material-kit/
    ├── dist/                   # Production-ready files
    ├── src/
    │   ├── assets/
    │   │   ├── css/
    │   │   │   ├── material-kit.css
    │   │   │   └── material-kit.min.css
    │   │   ├── scss/
    │   │   │   ├── material-kit/
    │   │   │   │   ├── bootstrap/
    │   │   │   │   ├── cards/
    │   │   │   │   ├── mixins/
    │   │   │   │   └── variables/
    │   │   │   └── material-kit.scss
    │   │   ├── js/
    │   │   │   ├── core/
    │   │   │   ├── plugins/
    │   │   │   └── material-kit.js
    │   │   └── img/
    │   ├── docs/
    │   └── pages/
    └── gulpfile.js

Material Components#

Cards with Elevation#

Material Kit provides enhanced card components that follow Material Design elevation principles:

<div class="card move-on-hover">
    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
        <a class="d-block blur-shadow-image">
            <img src="image.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
        </a>
        <div class="colored-shadow" style="background-image: url(image.jpg)"></div>
    </div>

    <div class="card-body text-center">
        <h5 class="font-weight-normal">
            <a href="javascript:;">Material Card</a>
        </h5>
        <p class="mb-0">
            Find unique solutions for your design needs
        </p>
    </div>
</div>

Material Buttons#

<!-- Contained button (raised) -->
<button class="btn bg-gradient-primary">Primary</button>

<!-- Text button -->
<button class="btn btn-text">Text Button</button>

<!-- Outlined button -->
<button class="btn btn-outline-primary">Outlined</button>

<!-- Button with icon -->
<button class="btn bg-gradient-primary">
    <i class="material-icons">favorite</i>
    With Icon
</button>

<!-- Floating action button -->
<button class="btn btn-primary btn-fab btn-round">
    <i class="material-icons">add</i>
</button>

Additional Resources#

  • Material Design Guidelines: material.io

  • Creative Tim Documentation

  • Support Forums

  • GitHub Repository

  • Regular Updates via npm

Remember to keep your Material Kit installation updated for the latest features and Material Design specification updates.