Installation

Install and start to develop with Krait UI

Quick start

Before you started, make sure you have installed Node.js and npm. To check if you have Node.js installed, run this command in your terminal:

          
  node -v
          
        

The command will show installed Node.js version on your machine. If you can't run the command, it means you don't have Node.js installed, please download Node.js and install it. Once the install complete, you can run node -v again to make sure Node.js is successfully installed.

The theme uses Gulp for task automation. Install Gulp Command Line Utility globally to make Gulp command available anywhere.

          
  npm install --global gulp-cli
          
        

The next step is installing dependencies, make sure you are at project root directory where you can see package.json file right under your current directory (root). It may take some times to download packages and once the process is finised, all packages are placed under node_modules directory.

          
  npm install
          
        

If you see EACCESS error during installation, usually it's related to permissions. Please follow these instructions at NPM docs to install Node via NVM which resolves the errors.

If everything's ok, run gulp.

          
  gulp
          
        

Once finished, notice that a new directory dist/ is created. In this stage, you can get compiled theme HTML along with the assets, CSS and JS files on that directory.

For development purposes, you should watch files changes with the following command:

          
  gulp watch
          
        

Gulp

In short, when we run gulp command, anything from src/ directory is processed, then the result stored into dist/. Actually, there are several tasks involved when we run gulp which we can find it at gulpfile.js.

• copyAssets : copy all required JS and CSS files to src/js/vendor/ for upcoming process, meanwhile plugins assets are directly copied to dist/assets/.
• html: process html files using gulp-file-include and store the result to dist/ and maintain directory structure.
• optimizedImages : compress images and store the optimized images to dist/assets/images/.
• css : compile SASS (.scss) files into CSS and store the result to dist/assets/css/.
• js : bundle core JS files from src/js/vendor/ and main JS files, then create minimized version of it.

File include

One of Gulp task is processing HTML files with gulp-file-include , a gulp plugin for file includes.

This plugin help us avoid doing repetitive writing the same text and script, for example writing copyright text at all HTML files. Instead, we create a partial HTML file containinig copyright text and include it in your HTML page. Any changes to partial HTML file will affect to all HTML files that include it. So, we can change copyright year once and it will change all HTML pages.

You can find partial HTML files at src/html/, any files with prefix inc_ are partial HTML files. This will be useful if you plan to port the theme into CMS or Web App.

          
    
  @@include('../../inc_admin_header.html', {activeMenu: "customers", plugins: {datatables: "true"}})
  
    <!-- Title -->
  <div class="d-flex justify-content-between align-items-center py-3">
    <h2 class="h5">Customers</h2>
    <a href="add-customer.html" class="btn btn-primary btn-sm btn-icon-text"><i class="bi bi-plus"></i> <span class="text">Add Customer</span></a>
  </div>

  ... 

  @@include('../../inc_admin_footer.html', {plugins: { datatables: "true" }})

  
          
        

From above snippet which is taken from src/html/pages/admin/customers.html, we can find:

• inc_admin_header.html and inc_admin_footer.html are partial HTML files that accept some variables.
• activeMenu is variable to determine active menu in navigation
• plugins is collection of plugin used, if it's in inc_admin_header.html it will include required plugin CSS files. If it's in inc_admin_footer.html, it will include required plugin JS files.
• On other file, you may find variable assets_path to provide correct assets relative path and light which determine navbar styles (dark/light).