Mae HTML5 Template Documentation & User Guide

  1. Contents
  2. Introduction
  3. Terminology
  4. Tab
  5. Carousel
  6. Video popup
  7. Buttons
  8. Colors
  9. Icons
  10. Subscribe form
  11. Instagram feed
  12. Patterns
  13. Lazyload
  14. Async videos
  15. Accordion
  16. Progress Bars
  17. Icon Lists
  18. Alerts
  19. Developers
    1. Files structure
    2. Inserting logo
    3. Changing colors
    4. Changing fonts
    5. Custom styles
    6. Optimizing images
    7. Server setup
  20. Changelog
  21. Credit

Introduction

Thanks for purchasing Mae HTML template by Pixudio. This documentation will give you an overview of the template's main features and how they can be customised to suit your requirements. This guide assumes basic knowledge of HTML & CSS.

We have endeavoured to make this documentation as comprehensive as possible but understand that at times, you many need to contact us for additional support. You can reach out for this support by opening a ticket at our dedicated forum on Ticksy. You will need your purchase code in order to signup, you can find this here.

Using an html template

Mae is an HTML template - this means that all domain and hosting should be organised by you.

F.A.Q

Terminology

For you to get the most out of reading this document, we'll introduce some of the terminology used throughout so you'll be able to follow exactly what is meant.

Conventions used in this documentation

Tap

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of a content.

Markup

The tab element is structured using a div.tabs and functions by the user clicking on its child's a.tabs__nav trigger to collapses / uncollapses a div.tabs__item which has a same attribute data-toggle as trigger's attribute data-toggle value.

<div class="tabs" role="tablist">

  <!-- Tabs navigation -->
  <div class="tabs__navs">
    <a class="tabs__nav tabs__nav--active" href="#tabs" data-tab="item-one" tabindex="0" role="tab" aria-selected="true">ITEM ONE</a>
    <a class="tabs__nav" href="#tabs" data-tab="item-two" tabindex="-1" role="tab" aria-selected="false">ITEM TWO</a>
    <a class="tabs__nav" href="#tabs" data-tab="item-three" tabindex="-1" role="tab" aria-selected="false">ITEM THREE</a>
  </div>

  <!-- Tabs content -->
  <div class="tabs__content">
    <div class="tabs__item tabs__item--active" data-tab="item-one" tabindex="0" role="tab" aria-selected="true">
      <!-- Tab one’s content -->
    </div>
    <div class="tabs__item" data-tab="item-two" tabindex="-1" role="tab" aria-selected="false">
      <!-- Tab two’s content -->
    </div>
    <div class="tabs__item" data-tab="item-three" tabindex="-1" role="tab" aria-selected="false">
      <!-- Tab three’s content -->
    </div>
  </div>

</div>

Video popup

Video popup is a essential way to offering embedded youtube and vimeo videos to users, You can simply include it to any link, and lets users to decide what video they are attempt to watch.

Markup

A video popup can be attached to any <a> tag, simply by adding .video-popup class and link to a Youtube or Vimeo video.

<a class="video-popup" href="https://www.youtube.com/watch?v=kHJQ9gG26HQ">Watch video</a>

Buttons

Buttons are used in various places throughout the template to implore the user to continue exploring other parts of the site, or to call them to perform an action such as sign up, book now, become a member etc.

Markup

Buttons are housed in a basic <a> element.

<a class="btn btn--primary btn--large" href="#">Sign up</a>
Class Modifiers

Colors

Colors are designed and developed to serve your ideas and purposes, they bring eye catching and nice contrast to your website.

Color schemes are used to create style and appeal. Colors that create an aesthetic feeling when used together will commonly accompany each other in color schemes. You can include a color scheme right after style.css markup in the document head.

Schemes

Available schemes: scheme-red.css and scheme-neon.css

<link rel="stylesheet" href="style.css" type="text/css" media="all">
<link rel="stylesheet" href="scheme-red.css" type="text/css" media="all">
Markup
<!-- Template’s primary color -->
<p class="color--primary">...</p>

<!-- Template’s primary background color -->
<div class="background-color--primary">...</div>
Class Modifiers
See also: How to change colors

Icons

Icons serve different purposes depending on where they are used - often they are used as decoration, to illustrate a particular service for example. In other cases icons are used to help users navigate a site (a downward arrow denoting a dropdown menu for example).

Markup

Icons use the i.fa element and require another icon class name depending on which icon set is in use.

<i class="fa fa-anchor"></i>

Subscribe form

Mae offers the use of Mailchimp as a marketing email service. While Mailchimp API require an account in order to create an email listing please make sure you have arealy created a Mailchimp account.

Create a new list

Follow Mailchimp's instructions here on how to create a new list. When you have your list ready, proceed to the next section to learn how to set up your subscribe form.

General forms

After you have created a list, Make sure you are in the list page that you just created, by clicking on lists from main navagation then choosing your list.

Embedded forms

Now you are ready to fetch your form information and insert them into your website’s subscribe form.

Inserting your form keys
<form action="YOUR_FORM_ACTION_URL" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<!-- Action URL sample: //pixudio.us15.list-manage.com/subscribe/post?u=4f175e7a78cd5c1fce7ef555a&id=8f06b51a52 -->

  <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups -->
  <div class="sr-only" aria-hidden="true">
    <input type="text" name="YOUR_FORM_HASHED_KEY" tabindex="-1" value="">
    <!-- Hashed key sample: b_4f175e7a78cd5c1fce7ef555a_8f06b51a52 -->
  </div>

  ...

</form>

Instagram feed

Mae offers you a very simple way to add Instagram photos to your website. While Instagram API require an access token and valid user ID you'll need to get them from Instagram’s API . If you need help with that step, visit “ How to generate an Instagram Access Token ” or just try Googling “ How to get an Instagram client ID ”.

Inserting your accessToken and userId
<section id="feed">
  <script>
    var INSTAFEED_SETTING = {
      userId: 'YOUR_USER_ID', // SAMPLE: 5483791846
      accessToken: 'YOUR_ACCESS_TOKEN' // SAMPLE: 5483791846.37a582e.e59c58fb4e414ba9a9da1c070d06bbf8
    }
  </script>
  <div class="instagram-feed" id="instafeed" data-config="INSTAFEED_SETTING"></div>
</section>

Patterns

Patterns will give your site a colorful and playful look, Users will enjoy to spend more time on your website.

Patterns Config

You can add .paper--patterns into .paper element and add shapes as following:

Each shape’s color, size, rotation and stroke can be modified indevidualy.

<section class="section">
  <div class="paper in-view" id="paper" data-elements="PAPER_CONFIG">
    <script>
      // Config JSON variable
      var PAPER_CONFIG = [
        {
          type: 'wave',
          rotate: 85,
          strokeColor: '#011EFF',
          strokeWidth: 4,
          blendMode: 'normal',
          mobile: {
            x: 90,
            y: -300,
            size: 14
          },
          desktop: {
            x: 160,
            y: -400,
            size: 18
          }
        },
        {
          type: 'raster',
          src: 'assets/media/stock/shape.png',
          rotate: 45,
          blendMode: 'normal',
          mobile: {
            x: -100,
            y: -350,
            scale: 0.3
          },
          desktop: {
            x: -445,
            y: -455,
            scale: 0.5
          }
        },
        // More shapes...
      }
    </script>
    <canvas class="in-view__child in-view__child--fadein"></canvas>
  </div><!-- .paper -->

  <!-- Your content -->

</section>
Gooey Shapes Config

You can add .paper--gooey into .paper element and add shapes as following:

<section class="section">
  <div class="paper paper--gooey in-view" id="gooey" data-elements="PAPER_CONFIG">
    <script>
    // Config JSON variable
    var PAPER_CONFIG = [
      {
        flatten: 32,
        fadeIn: 2000,
        mobile: {
          radius: 380,
          center: { x: 400, y: -500 },
          fillColor: "#eff0f1"
        },
        desktop: {
          radius: 470,
          center: { x: 780, y: -590 },
          fillColor: "#eff0f1"
        },
      },
      {
        type: 'mask',
        src: 'assets/media/stock/image.jpg',
        flatten: 16,
        fadeIn: 2000,
        mobile: {
          radius: 360,
          center: { x: 420, y: -530 },
          fillColor: "#011eff"
        },
        desktop: {
          radius: 450,
          center: { x: 800, y: -640 },
          fillColor: "#011eff"
        },
      },
      // More shapes...
    ]
    </script>
    <canvas></canvas>
  </div><!-- .paper--gooey -->

  <!-- Your content -->

</section>
Star Particles Config

You can add .paper--stars into .paper element and setup particles size, amount and color as following:

<section class="section">
  <div class="paper paper--stars in-view" id="stars" data-elements="PAPER_CONFIG">
    <script>
    // Config JSON variable
    var PAPER_CONFIG = {
    count: 50,
    radius: 5,
    fillColor: '#011eff'
    }
    </script>
    <canvas class="in-view__child in-view__child--fadein"></canvas>
  </div><!-- .paper--stars -->

  <!-- Your content -->

</section>
Class Modifier

A .paper has a position absolute and height 100% by defualt. you might also change its height by adding following classes:


Note:
We do not recommend that you include more than one .paper per page.

Lazyload

Lazyloads images or iframes loads only when the users need them to display. In this way, user won’t have to wait for all the elements in the page to be loaded and therefore, can start using the web page sooner. The user will be seeing only the images above the fold. The rest will come as soon as user scrolls.

Markup

A lazyload element uses the class lazyload in conjunction with a data-src and/or data-srcset attribute. Optionally you can also add a src attribute with a low quality image.

<img
class="lazyload lazyload--el"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="image.jpg"
data-srcset="image.jpg 1800w, image-1600x900.jpg 1600w, image-1280x720.jpg 1280w, image-768x432.jpg 768w"
width="1920"
height="1080"
alt="">
ls.unveilhooks

ls.unveilhooks plugin extends lazyLoad to background images, video’s posters and scripts.

Background-Image:
For background images, use data-bg attribute:
<figure class="lazyload lazyload--el" data-bg="image.jpg"><figure>

Video’s poster:
For video tag use data-poster and preload="none":
<video class="lazyload lazyload--el" data-poster="image.jpg" preload="none">
  <!-- sources -->
</video>

Scripts:
For scripts use data-script:
<div class="lazyload" data-script="module-name.js"></div>

Script modules using require:
For modules using require use data-require:
<div class="lazyload" data-require="module-name"></div>

Async videos

Same as Lazyload images, videos sources can be load asynchronous to prevent block rendering and increase site performance if you are going to autoplay or preload them.

Markup

An async video uses the data-sources attribute. Optionally you can also add multiple sources devided by |.

<video data-sources="video.mp4|video.ogg" loop autoplay></video>

Accordion

An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner. Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore.

Markup

The accordion element is structured using a div.accordion and functions by the user clicking on its child's acc div.accordion__header h5 label trigger to collapses / expands a div.accordion__body which is a sibilian of div.accordion__header.

<div class="accordion">
  <div class="accordion__card accordion__card--collapse">
    <div class="accordion__header">
      <h5>
        <label>Item #1 title
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
            <path d="M24,0A24,24,0,1,0,48,24,24,24,0,0,0,24,0Zm8,25H16V23H32Z"></path>
            <path d="M24,0A24,24,0,1,0,48,24,24,24,0,0,0,24,0Zm0,46A22,22,0,1,1,46,24,22,22,0,0,1,24,46Zm1-23h7v2H25v7H23V25H16V23h7V16h2Z"></path>
          </svg>
        </label>
      </h5>
    </div>
    <div class="accordion__body">
      <div class="accordion__content clearfix">
        <p>
          <!-- content item #1 here -->
        </p>
      </div>
    </div>
  </div>
  <div class="accordion__card accordion__card--collapse">
    <div class="accordion__header">
      <h5>
        <label>Item #2 title
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
            <path d="M24,0A24,24,0,1,0,48,24,24,24,0,0,0,24,0Zm8,25H16V23H32Z"></path>
            <path d="M24,0A24,24,0,1,0,48,24,24,24,0,0,0,24,0Zm0,46A22,22,0,1,1,46,24,22,22,0,0,1,24,46Zm1-23h7v2H25v7H23V25H16V23h7V16h2Z"></path>
          </svg>
        </label>
      </h5>
    </div>
    <div class="accordion__body">
      <div class="accordion__content clearfix">
        <p>
          <!-- content item #2 here -->
        </p>
      </div>
    </div>
  </div>
</div>

Progress Bars

A progress bar tag represents the progress of a task or skill.

Markup (horizontal)

The progress bar element is structured using a div.progress and set options by html data attributes.

<div class="progress">
  <div class="progress__wrap">
    <div class="progress__bar" role="progressbar" style="width:60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>
Markup (vertical)

Wrap the progress bar element with a div.vertical.

<div class="vertical">
  <div class="progress">
      <div class="progress__wrap">
        <div class="progress__bar" role="progressbar" style="width:60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
  </div>
</div>

Icon Lists

A icon lists is simply a list element with prepend icon.

Markup

The icon list element is structured using a ul.fa-ul and add icons into the list items.

<ul class="fa-ul">
  <li>
	<i class="fa fa-li fa-cube" aria-hidden="true"></i>
	<!-- list content -->
  </li>
  <li>
	<i class="fa fa-li fa-cube" aria-hidden="true"></i>
	<!-- list content -->
  </li>
  <li>
	<i class="fa fa-li fa-cube" aria-hidden="true"></i>
	<!-- list content -->
  </li>
</ul>

Alerts

A alert provides an easy way to create predefined alert messages.

Markup

The alert element is structured using a div.alert.

<div class="alert invert pattern" role="alert">
  <!-- alert content -->
  <button class="btn--transparent close" type="button" data-dismiss="alert" aria-label="Close">
    <i class="fa fa-times"></i>
  </button>
</div>
Class Modifiers

Developers

We assume you are familiar with shell commands and you have already installed latest version of node.js and npm on your machine.

  1. Files structure
  2. Inserting logo
  3. Changing colors
  4. Changing fonts
  5. Custom styles
  6. Optimizing images
  7. Server setup
Files structure

Dev files are located in the developement directory. You can find and review package.json and gulpfile.js files in development folder

development/
|
├── public/
|   // Public folder will renders by “$ sudo npm run build” script,
|   // and it includes all production files.
├── src/
|   ├── jade/
|   ├── js/
|   ├── media/
|   ├── scss/
|   ├── template/

Make sure you are in developement directory

$ cd development

Install dependencies

$ sudo npm i

How to build

$ sudo npm run build

Running the test

$ sudo npm start

... and then open a browser and go to http://localhost:8082

Inserting logo

Insert your logo file into development/src/media/ directory

  development/
  | ...
  ├── src/
  |   ...
  |   ├── media/
  |   |   | ...
  |   |   | logo.svg // this file will transform to public/assets/media/ location

Run gulp media tasks to copy your new logo into public assets/media/ folder

$ sudo gulp media

Make sure gulp watch is running

$ sudo gulp watch

Find all .site-branding a img in blog.jade, index.jade, page.jade and post.jade files ( usally 3 logos per file - top header logo, footer logo and mobile menu logo ) and update them with your logo name and size if your logo file name is anything but logo.svg and sized 232x144 pixel

development/
| ...
├── src/
|   ├── jade/
|   |   | *.jade
img(src="assets/media/logo.svg", alt="", width="232", height="144")
Changing colors

Make sure gulp watch is running

$ sudo gulp watch

Find development/src/scss/modules/_colors.scss file then go ahead and change color values

development/
| ...
├── src/
|   | ...
|   ├── scss/
|   |   ├── modules/
|   |   |   | ...
|   |   |   | _colors.scss
$color--body: #222;
$color--body-alt: #8D929C;
$color--body-lighten: #FFF;
$color--body-background: #FFF;

$color--primary: #011EFF; // high contrast with lighter colors
$color--secondary: #FF00BF; // high contrast with lighter colors
$color--tertiary: #EFF0F1; // lighter color, high contrast with darker colors

$color--link: #011EFF;
$color--link-hover: #FF00BF;

$color--code: #ABB2BF;
$color--code-background: #282C34;

Note: You probably want to change patterns colors to match them with the rest of the site as well, to do so please find PAPER_01 variable located in index.jade then go ahead and update strokeColors. See also Patterns

Changing fonts

Make sure gulp watch is running

$ sudo gulp watch

Find all google font stylesheet links in blog.jade, index.jade, page.jade and post.jade files ( located in the *head ) and update them with your choose of fonts

development/
| ...
├── src/
|   ├── jade/
|   |   | *.jade
link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Karla:400,700i,700|Poppins:700")

Then find development/src/scss/modules/_all.scss file and go ahead and change font-families value

development/
| ...
├── src/
|   | ...
|   ├── scss/
|   |   ├── modules/
|   |   |   | _all.scss
// font-families
$font-family--display: 'Poppins', sans-serif;
$font-family--body: 'Karla', sans-serif;
Custom styles

Make sure gulp watch is running

$ sudo gulp watch

Then find development/src/scss/custom.scss file and go ahead and add your custom styles

development/
| ...
├── src/
|   | ...
|   ├── scss/
|   |   | ...
|   |   | custom.scss
Optimizing images

By placing your images into development/src/media/stock/ directory and running gulp media task, your images will be optimized and transferred into public assets/media/stock/ folder.

Note: Any file ( image, audio or video ) that has placed into development/src/media/ folder directly will only transfer into assets/media/ without any changes.

development/
| ...
├── src/
|   ...
|   ├── media/
|   |   |
|   |   ├── favicons/
|   |   |   | favicon.png
|   |   |
|   |   ├── stock/
|   |   |   | image-needs-to-be-optimized.jpg
|   |   |
|   |   | image-does-not-need-to-be-optimized.jpg

To proceed the task run

$ sudo gulp media
Server setup

Find development/src/server.conf file then go ahead and update it with your changes.

development/
| ...
├── src/
|   | ...
|   | server.conf

To generate new config file in public/server.js

$ sudo gulp server

Then run

$ sudo npm start

... Now visit your site on the browser.

Changelog

Version 3.0
Version 2.0
Version 1.0

Credit