Build tools
Learn how to use Material Dashboard Pro using NPM scripts to build your admin theme, compile SCSS, change brand-colors and more.
Change brand colors
- 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
.
Compile SCSS
- Download the project’s zip.
- Make sure you have node.js installed.
- Type
npm install
in terminal/console in the source folder wherepackage.json
is located. - Run in terminal
gulp open-app
for opening the Dashboard Page (default) of the product. You can set in gulpfile.js from your downloaded archive any page you want to open in browser, at line 30:gulp.src('examples/dashboard.html')
. - 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.
Using input labels in a form
You have two use-cases for using the inputs label inside of a form:
.bmd-label-static
is recommended for using with a placeholder for an input
<div class="form-group bmd-form-group">
<label class="bmd-label-static">Fist Name</label>
<input type="text" class="form-control" placeholder="Your name here">
</div>
.bmd-label-floating
is recommended for using without the placeholder
<div class="form-group bmd-form-group">
<label class="bmd-label-floating">Fist Name</label>
<input type="text" class="form-control">
</div>