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.
π Material Kit - Product page
π Material Kit - Live Demo
π New to App-Generator? SignIN with GitHub or Download a PRO Starter for only $19.99/mo
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>
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.
Links#
π New to App-Generator? Join our 10k+ Community using GitHub One-Click SignIN.
π
Download
products and start fast a new projectπ Bootstrap your startUp, MVP or Legacy project with a custom development sprint