Getting Started

Project Preparation
This is the documentation for the Pure-HTML version.
If you prefer to use include partial or section files you can use the HTML-Twig or PHP version.

In the Pure-HTML version you can directly change the HTML code in each page in this template:

  1. Open your code editor.
  2. Select the HTML file to be edited located in [vendora-project-directory-name/HTML/[theme-name]/].
  3. Open the selected file with your code editor.
  4. Next, you can freely change and add HTML code to the page.
    Note: If you want to change the code section, you should check each documentation page under the SECTIONS & VARIATIONS category.

Even though this is a Pure-HTML version, we include Sass source code to customize the styling.
You have two options, changing the styles directly in CSS or taking advantage of Sass-lang.

If you want to change the styles directly in CSS follow the documentation in Customization » CSS.

If you want to take advantage of Sass-lang follow the next steps below.

Gulp & Sass Preparation

Our project utilizes gulp for complete build flow automation, especially compiling SCSS files into CSS.
Several tools must be installed in your work environment.

Check for node, npm, and npx:

Ensure Node.js is installed on your computer by using the CLI:

node --version

npm --version

npx --version

We recommend using Node.js version 16 or higher. If not installed, follow these installation instructions.


Check for Gulp CLI Utility:

Confirm Gulp is installed on your computer:

gulp --version

If not installed, run:

npm install --global gulp-cli

Gulp is essential for automatically compiling SCSS files to .css and twig templates to .html. Learn more about it here.


Check for Sass Compiler:

Verify Sass compiler installation:

sass --version

If absent, install with:

npm install -g sass

Installing Required Dependencies

The package.json file lists necessary dependencies.

SCSS setup for Vendora HTML-version depends on SRC-Assets Gulp project which has a package.json file.


Navigate to Vendora's SRC-Assets project directory:

cd your-vendora-project-directory-name/SRC-Assets/

Install dependencies:

npm install

This installs all dependencies into the node_modules folder.

Running Gulp Automation

The gulpfile.js contains functions registered in gulp's task system.

To run SRC-Assets automation, execute:

cd your-vendora-project-directory-name/SRC-Assets/
gulp

This compiles assets files (JavaScript, sass, libraries, images, etc.) from SRC-Assets into HTML/[theme-name]/assets/ and watches for code changes.

SCSS:
We recommend making changes in /src/scss/custom.scss rather than overwriting any theme's custom SCSS files. This ensures safer updates without affecting your SCSS modifications.