Gumo dummy image
Documentation

Documentation

Foreword

Hello and thank you for purchasing Gumo! 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 the docs don't help, 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.

HTML structure

Gumo 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 class="alt-nav">
    <div class="wrapper">
      <!-- Main Header-->
      <header class="main-header">
        <a class="brand" href="/">
          // Brand
          <img src="img/logo.svg">
        </a>
        <!-- Main Navigation -->
        <nav class="main-nav">
          <ul class="nav-items">
            <li class="nav-trigger">Menu</li>
            <li><a class="nav-item" href="#work">Work</a></li>
            <li><a class="nav-item" href="#about">About</a></li>
            <li><a class="nav-item" href="#contact">Hire me</a></li>
            ... More items?
          </ul>
        </nav>
      </header>
      <div class="content">
        <!-- Home section -->
        <section id="home">
          // Section content
        </section>
        <footer class="bg-black p-4">
          // Footer contents
        </footer>
      </div> // End .content
    </div> // End .wrapper
    <!-- Scripts-->
    // Scripts
  </body>
</html>

Note: Its important to leave this structure as is. So when copying a section, make sure its inside the .content div.

CSS Structure

Gumo'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 Gumo CSS goodies
  Version 1.0
  by ThemeVillain

  01. reset
  02. variables
  03. typography
  04. helpers
  05. layout
  06. grid
  07. blockquote
  08. form
  09. header
  10. buttons
  11. navigation
  12. sections
  13. footer
  14. list
  15. thumbnail
  16. 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.

CSS Helpers

Gumo comes with a bunch of sleeky CSS helpers, so less custom CSS is needed. You can do a lot from the markup itself! Here's a list to help you started:

  • .w-[0-10] < Sets width from 0 to 10 (where 10 = 100% percent)
  • .h-[0-10] < Sets height from 0 to 10 (where 10 = 100% percent)
  • .pv-[0-10] < Sets vertical padding from 0 to 10 (where 1 = 1rem)
  • .ph-[0-10] < Sets horizontal padding from 0 to 10 (where 1 = 1rem)
  • .pt-[0-10] < Sets top padding from 0 to 10 (where 1 = 1rem)
  • .pb-[0-10] < Sets bottom padding from 0 to 10 (where 1 = 1rem)
  • .p-[0-10] < Sets padding from 0 to 10 (where 1 = 1rem)
  • .mv-[0-10] < Sets vertical margin from 0 to 10 (where 1 = 1rem)
  • .mh-[0-10] < Sets horizontal margin from 0 to 10 (where 1 = 1rem)
  • .mt-[0-10] < Sets top margin from 0 to 10 (where 1 = 1rem)
  • .mb-[0-10] < Sets bottom margin from 0 to 10 (where 1 = 1rem)
  • .m-[0-10] < Sets margin from 0 to 10 (where 1 = 1rem)
  • .font-size-[0-10] < Sets font-size from 0 to 10 (where 1 = 1rem)
  • .opacity-[0-10] < Sets opacity from 0 to 10 (where 1 = 0.1)

JS

All of Gumo's Vanilla Javascript goodies are found in the /scripts/ folder. In version 1, we have 4 files:

  • gumo-lightbox.js
  • imagesloaded.pkgd.min.js
  • isotope.pkgd.min.js
  • main.js

gumo-lightbox.js

A custom-crafted, very lightweight lightbox script

imagesloaded.pkgd.min.js

A plugin to call functions after images are loaded. Used by main.js

isotope.pkgd.min.js

The masonry + filter script for your portfolio!

main.js

This is where the Gumo magic happens, such as the navigation, scroll behavior and defining the filterable grid.

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 use markup only for them.

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.

That's all folks.
Happy coding!

Made something super awesome or found a bug? Let me know!