Getting started

We hope you find this theme useful! In this page we'll cover the folder structure, setting up your development workflow, how to compile, customize and extend the theme. We're here to help! if you get any questions please contact us at support@ui8.net.

ionicons-v5-e Folder structure
  • Inertia/
    • dist/ compiled theme files
    • src/ source files for development
      • assets/
        • fonts/
        • img/
        • js/
        • scss/
        • vendor/
      • docs/ documentation HTML pages
      • ecommerce/ ecommerce HTML pages
      • partials/ HTML partials
      • rtl/ RTL version
      • index.html
    • node_modules/ where npm installs dependencies
    • .gitignore hide untracked files from git
    • gulpfile.js build tasks for development
    • package.json list of dependencies
    • package-lock.json dependencies version tree
    • README.md
ionicons-v5-e Development setup
  • Download and install Node.js if you don't have it already installed in your computer. Inertia uses npm to manage the dependencies listed in package.json.
  • Unzip the theme and then open your terminal, navigate to the root /Inertia directory.
  • Install the Gulp Command Line Interface to be able to use Gulp:
    npm install gulp-cli -g
  • Making sure you're at the root /Inertia directory, install the local dependencies:
    npm install
  • That's it!
If you're not familiar using the command line, you can learn more here.
ionicons-v5-e Compiling with Gulp

Inertia uses Gulp to automate the development workflow. With your command line on the root /Inertia directory you can use the following commands:

  • gulp
    • This is the default task: Compiles the src files into the dist folder, opens a tab in your browser, and watches for any changes made in the src folder - SCSS, JS, HTML, images, etc. When updates are made it automatically re-compiles and reloads your browser.

      To stop the server and terminate the gulp command just hit CTRL + C.

  • gulp build
    • Compiles the src files into the dist folder.

Extra tasks (optional):

  • gulp minifyVendor
    • Minifies all vendor CSS and JS files. If you remove an existing plugin or add a new one, remember to call this task for re-minifying.
    • If you rather reference vendor files individually, go to src/partials/header.html and src/partials/scripts.html and update the lines.
  • gulp optimizeImages
    • Optimizes all images from the dist/assets/img folder.
ionicons-v5-e HTML Partials

Inertia uses the Gulp file include package to enable partials in HTML. This way we can re-use the most common sections that are used throughout the theme, such as: header, footer, navbar, sidebars.

Additionally, you can pass through some parameters when using partials:

  • header.html:
    • title: set an HTML page title.
  • footer.html:
    • classList: set the component's classes.
  • navbar.html:
    • classList: set the component's classes.
    • logo: set another logo img path, different from the default.
    • boxed (true/false): set the layout to be in a container or fluid.
ionicons-v5-e Customize the styles
VIA SCSS

The files mentioned in this section are located in the src/assets/scss folder.

  • _user-variables.scss: In this file you can make overrides to any Bootstrap core and Inertia variables.
  • _user.scss: Use this file to add your own custom SCSS.
VIA Normal CSS

If you prefer not to use SCSS, you can use the theme.css or theme.min.css located in the dist/assets/css/ directory.

Notice: keep in mind that if you work on these files and then switch to compiling with Gulp you would lose your changes as the files would be re-generated.