The HTML template is the ideal starting point for creating customized versions of the template and designing user interfaces that meet your specific needs. It is particularly useful if you want to create a website or app using a specific stack other than React, Vue, or Laravel.
If you need to use our interfaces to build an app using a framework or site generator that we do not provide, we suggest starting with the HTML template. The basic idea is to set up your own environment and import the necessary components or elements from our templates into your application. This approach will allow you to customize the integration to suit your specific needs.
The HTML template provides ready-to-use HTML pages with a pre-compiled CSS file, making it a “vanilla HTML” option. It doesn’t require any build tool to function: we’ve kept it simple and used the Tailwind CLI tool only. So, if you’re familiar with Tailwind CSS, you’ll know that changes to class names may require recompiling CSS, and that can be done with a simple terminal command. Let’s dive in and see how it works!
Quickstart
Once you have downloaded and unzipped the main folder, proceed with unzipping the folder with the -html suffix.
Open the folder with your preferred code editor. We use Visual Studio Code, which includes a fully-featured integrated terminal. You can launch the terminal from the appropriate menu or with a keyboard shortcut.
Run the command npm i to install the Tailwind CSS dependency, and then npm run dev to scan your template files for classes and build your CSS on-the-fly.
At this point, you can open up the HTML files in your browser and start working on the website’s code and content. Whenever you make changes to one of the *.html or *.js files, the Tailwind CLI tool will automatically rebuild the CSS, and all you need to do is refresh the browser window.
Folder structure
The template’s structure is super basic and easy to understand. In the root directory of the template there is an HTML file for each page, the Tailwind configuration file (which you don’t need to modify unless you have a specific requirement), and the style.css file, which should never be edited directly because its contents are automatically generated by the Tailwind CLI tool.
In addition to these files, you will find the following directories:
- The
css/folder includes Tailwind directives and imports additional styles, as well as Google Fonts, if present. Inside the css/ folder, you will also find a folder called “vendors” that includes any other dependencies’ CSS, if present (e.g., AOS, Swiper, etc.). - The
fonts/directory includes embedded fonts, if any. - The
images/folder contains all the images included in the template. - The
js/directory includes the libraries used, initialized in themain.jsfile.
Third-party JS libraries
For our templates, we generally use some third-party JS libraries, such as AOS for scroll-reveal animations, Swiper for creating carousels and sliders, Chart.js for charts displaying in our admin dashboard template, and more. These libraries are typically included in the js/vendors/ and css/vendors/ folders.
As for basic JavaScript functionalities (such as dropdowns, accordions, mobile menus, and more), our HTML templates use the Alpine.js library, which perfectly aligns with the Tailwind ecosystem. For more information on using this library, please refer to the official documentation at this link.