Getting started

Hey! 👋,

In this page we'll cover the folder structure, setting up your development workflow, how to compile, customize and extend the theme. I'm here to help! if you get any questions please contact me at e.adrian90@gmail.com.

ionicons-v5-e Folder structure
  • public/
    • dist/ compiled theme files
    • src/ source files for development
      • assets/
        • fonts/
        • img/
        • js/
        • scss/
        • vendor/
      • docs/ documentation HTML pages
      • partials/ HTML partials
      • 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. This theme uses npm to manage the dependencies listed in package.json.
  • Unzip the theme and then open your terminal, navigate to the /spacial/public directory.
  • Install the Gulp Command Line Interface to be able to use Gulp:
    npm install gulp-cli -g
  • Making sure you're at the /spacial/public 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

This theme uses Gulp to automate the development workflow. With your command line on the root /spacial 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 task:

  • 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.
ionicons-v5-e HTML Partials

This theme 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.
  • navbar.html:
    • classList
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 Spacial 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.