Build tools

Learn how to use Material’s included npm scripts to compile source code, run tests, and more.

Change brand colors

  • You will find all the branding colors inside assets/scss/variables.scss.
  • You can change them with a HEX value or with other predefined variables from assets/scss/variables/_colors.scss.

Compile SCSS

  1. Download the project’s zip.
  2. Make sure you have node.js installed.
  3. These commands below should be run in the same folder where gulpfile.js and package.json are located.
Task Description
npm install This command installs a package, and any packages that it depends on. Read more
gulp compile-scss This command will compile the scss files located inside assets/scss/* into assets/css/*.css. Read more and Command Line
gulp watch For continuous compilation of the changes that you make in *.scss files.
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')

Using input labels in a form

You have two use-cases for using the inputs label inside of a form:

  • .md-label-static is recommended for using with a placeholder for an input
<div class="form-group md-form-group">
  <label class="md-label-static">Fist Name</label>
  <input type="text" class="form-control" placeholder="Your name here">
</div>
  • .md-label-floating is recommended for using without the placeholder
<div class="form-group md-form-group">
  <label class="md-label-floating">Fist Name</label>
  <input type="text" class="form-control">
</div>