Please check the official documentation in docs/documentation.html
or directly to this link: http://demos.creative-tim.com/marketplace/material-kit-pro/docs/2.0/getting-started/introduction.html
We've also included an optional Gulp file to help you get started with theme customization. You'll need to install Node.js and Gulp before using our included gulpfile.js.
- Download the project's zip
- Make sure you have node.js (https://nodejs.org/en/) installed
- Type
npm install
in terminal/console in the source folder wherepackage.json
is located - You will find all the branding colors inside
assets/scss/variables/_brand.scss
. You can change them with aHEX
value or with other predefined variables fromassets/scss/variables/_colors.scss
- Run in terminal
gulp compile:scss
for a single compilation orgulp watch
for continous compilation of the changes that you make in*.scss
files. This command should be run in the same folder wheregulpfile.js
andpackage.json
are located - Run in terminal
gulp
for opening the Presentation Page (default) of the product.
If you experience any problems with the above, or if you think you've found a bug with your theme - please don't hesitate to reach out to https://www.creative-tim.com/support thanks!!
Within the download you'll find the following directories and files:
material-kit-pro/
├── CHANGELOG.md
├── README.md
├── assets
│ ├── assets-for-demo/
│ ├── css/
│ │ ├── material-kit.css
│ │ ├── material-kit.css.map
│ │ └── material-kit.min.css
│ ├── img/
│ ├── js/
│ │ ├── bootstrap-material-design.js
│ │ ├── bootstrap-material-design.min.js
│ │ ├── core/
│ │ │ ├── jquery.min.js
│ │ │ └── popper.min.js
│ │ ├── material-kit.js
│ │ ├── material-kit.min.js
│ │ └── plugins/
│ │ ├── bootstrap-datetimepicker.min.js
│ │ ├── bootstrap-selectpicker.js
│ │ ├── bootstrap-tagsinput.js
│ │ ├── jasny-bootstrap.min.js
│ │ ├── jquery.flexisel.js
│ │ ├── moment.min.js
│ │ └── nouislider.min.js
│ └── scss/
│ ├── bootstrap/
│ ├── core/
│ │ ├── mixins/
│ │ └── variables/
│ ├── material-kit-pro.scss
│ ├── plugins/
│ │ ├── _plugin-bootstrap-select.scss
│ │ ├── _plugin-datetime-picker.scss
│ │ ├── _plugin-flexisel.scss
│ │ ├── _plugin-nouislider.scss
│ │ └── _plugin-tagsinput.scss
│ └── pro/
│ ├── _cards.scss
│ ├── _example-pages.scss
│ ├── _fileupload.scss
│ ├── _media.scss
│ ├── _sections.scss
│ ├── _social-buttons.scss
│ ├── _tables.scss
│ └── sections/
│ ├── _blogs.scss
│ ├── _contactus.scss
│ ├── _features.scss
│ ├── _footers.scss
│ ├── _headers.scss
│ ├── _pricing.scss
│ ├── _projects.scss
│ ├── _social-subscribe-lines.scss
│ ├── _team.scss
│ └── _testimonials.scss
├── docs
│ └── documentation.html
├── examples
│ ├── about-us.html
│ ├── blog-post.html
│ ├── blog-posts.html
│ ├── contact-us.html
│ ├── ecommerce.html
│ ├── landing-page.html
│ ├── login-page.html
│ ├── pricing.html
│ ├── product-page.html
│ ├── profile-page.html
│ └── signup-page.html
├── gulpfile.js
├── index.html
├── package.json
├── presentation.html
└── sections.html