Material Kit + Modification 10 times seen


Material Kit is a Free Bootstrap 4 UI Kit with a new and fresh design inspired by Google's material design. You asked for it, so we made it. It's great fun to introduce you to the concept of materials in a convenient and beautiful set of components. Along with rearranging the Bootstrap elements, you'll find three sample pages with full code, to help you design your next project.

Material Kit makes use of light, surface and movement. It uses a deliberate choice of color, edge-to-edge imagery and large-scale typography. The general layout resembles a sheet of paper following several different layers, so that depth and regularity are clear. Main navigation remains on the left and actions on the right.

This new design features elements that are the result of research into ink and paper and the way objects and materials interact in real life. The result is a beautiful, consistent set of elements that can help you get started on your next project. Material Kit is a great tool if you want to create a web presence for your Android application and need to be consistent, leaving an impression of visually similar elements. It's also a great resource on its own, looks beautiful and helps you build your web page.


Original Source

This template has been previously published on the website Creative Tim


MIT - Copyright (c) 2018 Creative Team


The original features in this free version of the template before modification are as follows:

  • Bootstrap v4.0.0
  • Gulp v4.0.3
  • gulp-autoprefixer v6.1.0
  • gulp-clean v0.4.0
  • gulp-install v1.1.0
  • gulp-open v3.0.1
  • gulp-sass v4.0.2
  • gulp-sourcemaps v2.6.5
  • Supports Alerts
  • Supports Card
  • Supports Forms
  • Supports Google Maps
  • Supports Capital
  • Supports Navs
  • Supports Navbar
  • Supports Tables
  • Supports Typography
  • Supports Videos
  • Slider support

Main Technologies

  • Bootstrap v4.0.0
  • jQuery v3.2.1
  • PopperJs


The template modification process includes the following technologies in its configuration:

  • Upgrade from Bootstrap 4.0.0 to version 4.5.2
  • Minify JS using Terser v4.8.0
  • Minify CSS using Less v3.11.3
  • Minify SCSS using Node Sass v4.14.1 + Dart Sass v1.26.2
  • Support source MAP JS
  • Support MAP CSS source
  • Configured using Babel v7.10.3
  • Configured using Webpack v4.43.0
  • Configured using TypeScript v3.9.5
  • Transpile with Babel
  • Support SASS
  • Support Autoprefixer
  • Install Dependencies
  • Optimization of material-kit.css and material-kit.scss css files
  • Replacing the material-kit.js file with material-kit-nick.js
  • Delete the demo.css css file has been deleted
  • Replacing the material-kit.css css file and replacing it with the material-kit.min.css file
  • Added Bootstrap 4.5.2 script:
<script src="" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  • Add dependency script in development mode:

    • Gulp v4.0.3
    • gulp-autoprefixer v7.0.1 (updated)
    • gulp-clean v0.4.0
    • gulp-install v1.1.0
    • gulp-open v3.0.1
    • gulp-sass v4.1.0 (updated)
    • gulp-sourcemaps v2.6.5
  • Optimization of the template.html file

  • Optimization of the /examples/landing-page.html file

  • Optimization of the /examples/login-page.html file

  • Optimization of the /examples/profile-page.html file

Template Improvements

  • There is no improvement

Tags: Bootstrap 4 HTML5 Template on 23 September 2020


Forum Diskusi

Post a reply

Reply to this discussion