Build tools

Learn how to use Now UI Kit compiling SCSS, change brand-colors and more.

Tooling setup

Change brand colors

  • You will find all the branding colors inside assets/scss/_variables.scss.

Compile SCSS

  1. Download the project’s zip.
  2. Make sure you have node.js ( 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('index.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.


We have created two options for the background of sections. You can go with a black or orange color. We built an attribute named data-background-color="color", so at once you add this attribute to div with class .section you can access our two background options color. To see how they look, you can check them out below.

<span class="pick-class-label label-tooltip" data-background-color="orange" data-toggle="tooltip" data-placement="top" title="" data-original-title="data-background-color='orange'"> </span>
<span class="pick-class-label label-tooltip" data-background-color="black" data-toggle="tooltip" data-placement="top" title="" data-original-title="data-background-color='black'"> </span>