Chat
1
x
Article

Material Kit + Modification

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 a pleasure to introduce you to the concept of materials in a set of easy-to-use and beautiful components. Along with rearranging Bootstrap elements, you'll find three sample pages with full code, to help you design your next project.

Material Kit makes use of light, surfaces and movement. It uses intentional color choices, 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 evident. The main navigation remains on the left and actions on the right.

The new design has 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 app and need to be consistent, leaving the impression of visually similar elements. It's also a great resource on its own, looks pretty and helps you build your web pages.

screen-materialkit.webp

Original Source

This template was previously published on the Creative Tim website.

Licence

MIT - Copyright (c) 2018 CreativeTim

Feature

The original features in this free version of the template before being modified 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
  • Support Card
  • Support Forms
  • Supports Google Maps
  • Support Capital
  • Support Navs
  • Support Navbar
  • Supports Tables
  • Support Typography
  • Support Video
  • Support Slider

Main Technology

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

Modification

The process of modifying this template includes the following technologies in its configuration :

  • Upgraded 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 CSS MAP sources
  • Configured using Babel v7.10.3
  • Configured using Webpack v4.43.0
  • Configured using TypeScript v3.9.5
  • Transpile with Babylon
  • SASS support
  • Support Autoprefixer
  • Install Dependencies
  • Optimization of material-kit.css and material-kit.scss css files
  • Replaced the material-kit.js file with material-kit-nick.js
  • Delete the demo.css css file has been deleted
  • Replaced the material-kit.css css file and replaced it with the material-kit.min.css file
  • Added Bootstrap 4.5.2 script:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  • Added 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 file /examples/landing-page.html
    • Optimization of the file /examples/login-page.html
    • Optimization of the file /examples/profile-page.html
  • Template Repair

    No fix

    Download

    Password : nickgenom.com

    this file was uploaded using an external service

    Leave comment

    Artikel

    Send reply
    388124 seen

    - of 0

    Reply to this discussion

    You can't edit posts or create replies: You should be logged in before you can post.