Build tools

Learn how to use Now UI Dashboard Pro to build your admin theme, compile SCSS and change brand-colors.

Change brand colors

  • You will find all the branding colors inside assets/scss/now-ui-dashboard/_variables.scss.

Compile SCSS

  1. Download the project’s zip.
  2. Make sure you have node.js (https://nodejs.org/en/) installed.
  3. Type npm install in terminal/console in the source folder where package.json is located.
  4. 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').
  5. Run in terminal gulp compile-scss for a single compilation or gulp watch for continous compilation of the changes that you make in *.scss files. This command should be run in the same folder where gulpfile.js and package.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>