Ivory 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. Google Map
  12. Accordion
  13. Countdown
  14. Progress Bars
  15. Icon Lists
  16. Alerts
  17. Lazyload
  18. Developers
    1. Files structure
    2. Inserting logo
    3. Changing colors
    4. Changing fonts
    5. Custom styles
    6. Optimizing images
  19. Changelog
  20. Credit

Introduction

Thanks for purchasing Ivory 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

Ivory 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 / expands 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" 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.

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 drop down menu for example).

Markup

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

<i class="icon i-apple"></i>

Subscribe form

Ivory 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 already 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 navigation 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>

Google Map

Google Maps allows you to display your business address as a map on your web page

Markup

The Google Map element is structured using a div.google-map and set options by html data attributes.

<div class="google-map" data-key="YOUR_GOOGLE_MAPS_JAVASCRIPT_API_KEY" data-location="{"lat":37.763436,"lng":-122.421506}"
data-address="" data-marker="true" data-icon="{"url":"assets/media/icon/map-marker.svg","size":{"width":72,"height":72}}"
data-theme="standard" data-zoom="16" style="height:480px"></div>
Config
See also: Get API key

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>

Countdown

A countdown is a sequence of backward counting to indicate the time remaining before an event is scheduled to occur.

Markup

The countdown timer element is structured using a div.countdown and set options by html data attributes.

<div class="countdown" data-count="October 13, 2019 4:00 pm">
  <div class="countdown__el" data-display="days">
    <div class="countdown__count">00</div>
    <div class="countdown__label">Days</div>
  </div>
  <div class="countdown__el" data-display="hours">
    <div class="countdown__count">00</div>
    <div class="countdown__label">Hours</div>
  </div>
  <div class="countdown__el" data-display="minutes">
    <div class="countdown__count">00</div>
    <div class="countdown__label">Minutes</div>
  </div>
  <div class="countdown__el" data-display="seconds">
    <div class="countdown__count">00</div>
    <div class="countdown__label">Seconds</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.has-icons and add icons into the list items.

<ul class="has-icons">
  <li>
	<i class="icon icon--18 i-directions-walk" aria-hidden="true"></i>
	<!-- list content -->
  </li>
  <li>
	<i class="icon icon--18 i-directions-walk" aria-hidden="true"></i>
	<!-- list content -->
  </li>
  <li>
	<i class="icon icon--18 i-directions-walk" 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="icon icon--18 i-close"></i>
  </button>
</div>
Class Modifiers

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>

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
Files structure

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

development/
|
├── dist/
|   // Public folder will renders by “$ sudo npm run build” script,
|   // and it includes all production files.
├── src/
|   ├── fonts/
|   ├── iconfont/
|   ├── js/
|   ├── media/
|   ├── pug/
|   ├── scss/
|   ├── static/

Make sure you are in development directory

$ cd development

Install dependencies

$ sudo npm install

Development script

$ sudo npm start

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

Gulp watch

$ sudo npm run watch

How to build

$ sudo npm run build
Inserting logo

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

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

Gulp media task will copy your new logo into dist assets/media/logo/ folder

Note: if your filename or file format is anything different than "logo.svg". You need to update development/src/pug/template-parts/navigation/site-branding.pug as well.

Changing colors

Find development/src/scss/modules/_variables.scss file then go ahead and change color values with your colors of choice.

development/
| ...
├── src/
|   | ...
|   ├── scss/
|   |   ├── modules/
|   |   |   | ...
|   |   |   | _variables.scss
// Colors
$color--body: #32353a !default;
$color--body-alt: #acb1bc !default;
$color--body-background: #fff !default;

$color--primary: #00bf7c !default; // high contrast with lighter colors
$color--secondary: #ff9700 !default; // high contrast with lighter colors
$color--tertiary: #efefef !default; // lighter color, high contrast with darker colors

$color--border: #f8f8f8 !default; // lighter color, high contrast with darker colors

$color--code: #00bf7c !default;
$color--code-background: #32353a !default;
Changing fonts

Custom fonts

Find development/src/scss/modules/_variables.scss file and go ahead and add your chosen font files into $fonts variable:

// Fonts
$fonts: (
	body: (
		family: "HK Grotesk",
		files: (
			regular: (
				weight: 400,
				formats: "eot" "woff" "woff2",
				styles: (
					normal: "assets/fonts/HKGrotesk-Medium",
					italic: "assets/fonts/HKGrotesk-MediumItalic"
				)
			),
			bold: (
				weight: 700,
				formats: "eot" "woff" "woff2",
				styles: (
					normal: "assets/fonts/HKGrotesk-SemiBold",
					italic: "assets/fonts/HKGrotesk-SemiBoldItalic"
				)
			)
		)
	),
	display: (
		family: "HK Grotesk",
		files: (
			regular: (
				weight: 300,
				formats: "eot" "woff" "woff2",
				styles: (
					normal: "assets/fonts/HKGrotesk-Light",
					italic: "assets/fonts/HKGrotesk-LightItalic"
				)
			),
			bold: (
				weight: 700,
				formats: "eot" "woff" "woff2",
				styles: (
					normal: "assets/fonts/HKGrotesk-Bold",
					italic: "assets/fonts/HKGrotesk-BoldItalic"
				)
			)
		)
	)
) !default;


Google fonts

Find development/src/pug/template-parts/layout.pug and add google font stylesheet links right before stylesheet link

development/
| ...
├── src/
|   ├── pug/
|   |   ├── template-parts/
|   |   |   | layout.pug
// Example
link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Karla:400,700i,700|Poppins:700")

link(rel="stylesheet", href="icons/style.css", type="text/css", media="all")
link(rel="stylesheet", href="style.css", type="text/css", media="all")

Then find development/src/scss/modules/_variables.scss file and go ahead and change font families and font weights value like this given example:

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

// font weights
$font-weight--body: 400;
$font-weight--body-bold: 700;
$font-weight--display: 700;
Custom styles

Find development/src/scss/custom.scss file and add your custom styles

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

By placing your images into development/src/media/ directory and running gulp media task, your images will be optimized and transferred into dist assets/media/ 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/
|   |   |
|   |   ├── favicon/
|   |   |   | favicon.png
|   |   |
|   |   ├── icon/
|   |   |   | ...
|   |   |
|   |   ├── logo/
|   |   |   | ...
|   |   |
|   |   ├── stock/
|   |   |   | ...

To proceed the task run

$ sudo gulp media

Changelog

Version 1.1
Version 1.0

Credit