Documentation

Foreword

Hello and thank you for purchasing Neoto! Its creator, ThemeVillain is always striving for the best possible quality for its templates and themes. If you encounter bugs or need something special done with your template, please contact support@themevillain.com.


Tips from a pro

Trust me, these are helpful!

  • Never start from scratch.
  • Use the custom.css included to make changes to your styles.
  • Please read these docs carefully before contacting support. You might be helped more quickly.
  • If these docs don't help with custom, non-template issues, use Google or stackoverflow for your specific problem.
  • Use find and replace all, if you'd like to change more files at once.
  • Contact support@themevillain.com for customisation jobs or bug reports.

Webpack 4

Neoto includes the entire Webpack 4 project that is used to create the template. You can use the README.md to get started.

Why Webpack?

By using webpack, you can develop much faster. Here's some of the features that I used to create Neoto:

  • Pug (template engine to output HTML files)
  • SASS (powerful CSS precompiler)
  • Hot reload (instantly see your changes)
  • Minification and bundling (makes your production code VERY efficient)

HTML structure

Neoto maintains a default HTML structure throughout the template. This makes it easy to mix and reuse templates. For instance, if you want to have a certain section to be on another page, just copy and paste the entire component.

<html lang="en">
  <head>
    <head>
      // Meta
      // Styles
      // Page title
    </head>
  </head>
  <body>
      <!-- Main Header-->
      <header class="fixed-top">
        <a class="navbar-brand" href="/">
          // Brand images
          <img src="img/logo.svg">
          <img src="img/logo-white.svg"> // Inverted logo
        </a>
        <button class="navbar-toggler"> // Toggles navigation
        </button>
        <!-- Main Navigation -->
        <ul class="nav">
          <li class="nav-item"> <a class="nav-link">Home</a></li>
          <li class="nav-item"> <a class="nav-link">Pages</a></li>
          ... Etc.
        </ul>
      </header>
      <main>
        <!-- section -->
        <section id="home">
          // Section content
        </section>
      </main> // End main
      <footer>
        // Footer contents
      </footer>
    <!-- Scripts-->
    // Scripts
  </body>
</html>

Note: Its important to leave this structure intact. So when copying a section, make sure its inside the "main" element.

Bootstrap

Neoto is powered by Bootstrap v4.5.2. All the goodies that Bootstrap has to offer work well with Neoto.

CSS Structure

Neoto's main css file is well-structured. The table of contents is found at the top of the file: main.css, and looks as follows:

/*

  main.css - All the Neoto CSS goodies
  Version 1.0
  by ThemeVillain

  
  00. fonts
  01. variables
  02. helpers
  03. typography
  04. animation
  05. cursor
  06. header
  07. slider
  08. layout
  09. components
  10. elements
  11. responsive
  12. lightbox

*/

Although its good to know the structure, you probably want to use a seperate css file for customisation of the template. Don't worry, this one is especially prepared for you!

Custom CSS

To make customisations, a custom.css file already exists and is included in the <head>. All you need to do is add your own nifty styles there.

Utilities

Neoto comes with a bunch of sleeky CSS Helper classes, mostly inherited from Bootstrap so less custom CSS is needed. You can do a lot of visual customisation by only changing the markup! Here's the list to help you get started.

JS

All of Neoto's Vanilla Javascript goodies are found in the src/scripts/ folder.

cursor.js

The custom cursor script

functions.js

All custom scripts and behavior that Neoto has to offer.

lightbox.js

The lightbox script!

slider.js

Uses GlideSlider for all the sliding magic that happens on the front page.

main.bundle.js

The template itself uses all these scripts in 1 bundled file called main.bundle.js. This is makes your page load faster

Modification

If you'd like to modify this main.bundle.js, please make use of Webpack (see README.md)

Slider

Awesome isn't it? The slider Neoto uses is based on the popular GlideJS Slider. If you'd like to tweak it, feel free to do so by using Webpack 4 (see README.md) and its documentation.

Contact form

Usually ThemeVillain's Templates make use of a PHP script to handle email. This is however, a bit outdated and vulnerable way to have a contact form on your site. So from now on, HTML templates will only include markup and styles for forms.

Formspree.io

This is an API (there are many more) that makes it possible to transform your contact form markup into a fully functional and safe one with just one line of code. See formspree.io for more details.