HTML Template Documentation

1. Welcome
2. HTML Structure
3. CSS System
4. Javascript Custom
5. Customize Your Template
6. Credits

Themesflat · HTML Templates

Welcome to Themesflat!

This guide shows you step by step how to install, customize and use any of our HTML templates: folder structure, CSS & SCSS, JavaScript, logo, fonts, colors and more. One guide, every template.

Explore more HTML templates

Applies to: every HTML template by Themesflat sold on Vithemes (Advitex, Ovinx and all other HTML items)
Technology: HTML5, CSS3 (compiled from SCSS), Bootstrap grid, JavaScript / jQuery
Version & last update: see the readme / changelog inside your downloaded package
Author: Themesflat

Thank you for choosing a Themesflat HTML template. All HTML items work the same way, so this one guide covers every item: wherever you read Your_Item or index.html, use the name and files of the template you purchased. The exact list of pages, sections and plugins differs from item to item.

Demo images are not included in the download

According to Envato rules, the HTML template package does not contain the full demo images shown in the live preview. The downloaded files only include the template code and the required assets.

Need the full template with all demo images? Create a ticket at https://themesflat.ticksy.com/ or email [email protected] and we will send it to you.

Template Features & Quick Start:

Common features (may vary slightly per item):

Clean, modern HTML5 & CSS3 code
Fully responsive layout based on the Bootstrap grid
SCSS source files included
Smooth animations (WOW.js, GSAP, Swiper sliders)
Icon font included (Icomoon) and Google Fonts
Retina ready, pixel perfect, easy to customize
Multiple homepage and inner page layouts

Quick start:

Unzip the package you downloaded and open the folder that contains index.html.
Double-click index.html to preview the template in your browser (a local server such as VS Code Live Server is recommended).
Edit the pages with any code editor (VS Code, Sublime Text, …).
When finished, upload the whole folder to your hosting by FTP / File Manager.

Demo images are not included in the package (see the note above). Replace them with your own images, or ask us for the full version.

Explore this documentation

Find detailed guides to customize every part of your template.

HTML StructureFolder layout and the basic page skeleton.

CSS SystemSCSS, colors, fonts and plugin styles.

Javascript Custommain.js, sliders, shop and countdown.

Customize Your TemplateTitle, logo, favicon, forms and map.

HTML Structure

All templates use the same page structure. Every page is a plain .html file, so you can open, edit and duplicate it freely.

Folder structure

Depending on the item, the assets are either in the root folder (layout A) or inside an assets folder (layout B). The content is the same.

Layout A                        Layout B
Your_Item/                      Your_Item/
  index.html                      index.html
  about.html ...                  about.html ...
  css/                            assets/
  js/                               css/
  images/                           js/
  font/                             images/
  scss/                             fonts/ , icon/
                                    scss/

Basic page structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Your Item - Page title</title>
    <meta name="description" content="Short description of the page">
    <meta name="keywords" content="keyword 1, keyword 2">
    <meta name="author" content="Your name">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Theme style -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <!-- Font & icon -->
    <link rel="stylesheet" href="font/fonts.css">
    <link rel="stylesheet" href="font/icons/icomoon/style.css">
    <!-- Favicon -->
    <link rel="shortcut icon" href="images/logo/favicon.svg">
</head>
<body>
    <div id="wrapper">
        <header> ... logo, menu ... </header>
        <main> ... page sections ... </main>
        <footer> ... footer, copyright ... </footer>
    </div>

    <!-- Javascript (jQuery first, main.js last) -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/carousel.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

CSS System

The CSS of every template contains 3 parts:

Template style: styles.css, compiled from the SCSS source
Bootstrap & plugin styles: grid, slider, animation, lightbox, …
Fonts & icons: fonts.css and the Icomoon icon font

Template style ( css/styles.css or assets/css/styles.css )

styles.css is generated from the SCSS files. To change the design you can edit styles.css directly, or edit the SCSS and compile it again (recommended):

# install Sass once:  npm install -g sass

# layout A
sass scss/app.scss css/styles.css --watch

# layout B
sass assets/scss/app.scss assets/css/styles.css --watch

SCSS structure ( scss/ )

app.scss            main file, imports everything below
abstracts/          _variable.scss (colors, fonts), _mixin.scss
component/          header, footer, buttons, forms, slider, tabs, shop, ...
core/ or _reset     reset, typography, helper classes
_sections.scss      styles of page sections
_widgets.scss       styles of widgets
_responsive.scss    media queries (mobile / tablet)
(the exact files differ per item)

Change colors

Main colors are CSS variables declared in :root inside abstracts/_variable.scss (and in the compiled styles.css). Change the value once and the whole template updates:

:root {
    --Primary: #0075ff;   /* main color (the variable name differs per item: --Primary, --primary ...) */
    --White:   #ffffff;
    --Black:   #000000;
}

Change fonts

Fonts are loaded in fonts.css (Google Fonts). Replace the font link / @import there, then set the font name in abstracts/_variable.scss:

$font-main: "Inter Tight", sans-serif;   // change to your Google Font

Plugin CSS files

bootstrap.css / bootstrap.min.css       grid & components
animate.css / animate.min.css             animations
swiper-bundle.min.css                     sliders
odometer.min.css                          number counters
photoswipe.css / magnific-popup.min.css   image lightbox
drift-basic.min.css                       product image zoom
bootstrap-select.min.css                  select dropdown
(the list differs per item: only the files linked in your HTML pages are used)

Javascript Custom

Custom scripts of the template are in the js folder (or assets/js). Plugins are in the same folder or in js/plugin. Always load jQuery first and main.js last.

main.js        menu / mobile menu, sticky header, go-top button, counters, tabs,
               accordion, filters, popups, parallax, preloader, WOW animation
carousel.js    Swiper sliders: change slides, speed, autoplay, breakpoints here
shop.js        shop / product pages: quantity, price range, cart (demo only)
zoom.js        product image zoom
count-down.js  countdown timer: change the end date here
(the file list differs per item)

Example: change the autoplay speed of a slider in carousel.js:

new Swiper(".tf-sw-slider", {
    slidesPerView: 1,
    loop: true,
    autoplay: { delay: 3000 },   // milliseconds
});

Customize Your Template

Tip

Common changes you will make on every template. Use your editor’s Find & Replace in files to change a text on all pages at once.

1. Page title, description, keywords

Edit these tags inside <head> of each page:

<title>Your Brand - Page title</title>
<meta name="description" content="Your page description">
<meta name="keywords" content="your, keywords">
<meta name="author" content="Your Brand">

2. Logo

Logos are in images/logo (or assets/images/logo). Two ways, depending on the item:

Image logo: replace the file or change the src of the logo image (header, mobile header and footer each have their own logo).
Inline SVG logo: in some templates the logo is an <svg> inside <a class="site-logo">. Replace the whole <svg> with an <img> tag.

<a href="index.html" class="site-logo">
    <img src="images/logo/logo.svg" width="141" height="36" alt="Your Brand">
</a>

3. Favicon

<link rel="shortcut icon" href="images/logo/favicon.svg">
<link rel="apple-touch-icon-precomposed" href="images/logo/favicon.svg">

4. Menu, links and footer

The menu is inside <header> and the copyright text is inside <footer> (look for footer-bottom or Copyright). The header and footer are repeated in every page, so apply the change to all pages.

5. Images

Put your images in the images folder and keep the same file names, or change the src attribute. Use compressed JPG/WebP for photos and SVG/PNG for logos and icons.

6. Forms (contact, newsletter)

Forms do not send emails by default

Forms in the HTML templates are front-end only (action="#"). Connect them to your own backend (PHP, Node.js) or a form service (Formspree, Mailchimp, …) by changing the action attribute and the form fields.

7. Google Map

Open your place on Google Maps, choose Share → Embed a map, copy the <iframe> and paste it in place of the map iframe of the contact page.

Credits

Photos
- All images are used for preview purposes only and are NOT included in the final purchase files.
Fonts & Icons
- Google Fonts (https://fonts.google.com): the fonts used are listed in fonts.css of your item
- Icomoon icon font (https://icomoon.io)
Javascript & plugins (depending on the item)
- jQuery (https://jquery.com)
- Bootstrap (https://getbootstrap.com)
- Swiper (https://swiperjs.com)
- GSAP (https://gsap.com)
- WOW.js (https://wowjs.uk)
- Odometer (https://github.hubspot.com/odometer/)
- Drift (https://github.com/imgix/drift)
- PhotoSwipe (https://photoswipe.com)
- noUiSlider (https://refreshless.com/nouislider/)
- Lenis (https://lenis.darkroom.engineering)
- Magnific Popup (https://dimsemenov.com/plugins/magnific-popup/)
- Isotope (https://isotope.metafizzy.co)

Still need help?

Thank you for choosing Themesflat. If something in this guide is unclear, or you need the full template with demo images, our team is happy to help. Create a ticket or send us an email and we will reply as soon as possible.

Create a ticket [email protected]Explore more HTML templates

HTML Template Documentation

Welcome to Themesflat!