Docs
Welcome to the Airy HTML documentation. This guide was created for everyone that wants to create their own website using this template and is not that familiar with coding. All steps are thoroughly explained, so that using this template becomes as easy as it can get!
Table of Contents
#01
Get Started
Introduction, CSS classes, File Structure, Javascripts
This template is very easy to use, it has comments all over its files and clearly visible and understandable element structure. First, keep the copy of the template in a folder and copy the whole folder to your server or test folder on your computer. Make sure the index.html file is in the root of your server. This template uses PHP for a contact form, so make sure that your server has PHP installed and enabled for you. Other than that, it is pure HTML / CSS / Javascript.
Common CSS classes
Airy uses many css classes that you can re-use to create a perfect page.
For example:
- Use .big, .extrabig, .small or .extrasmall class if you want bigger or smaller text.
- Use .justifyright to align the text to right.
- Use .alignright to right-float an element.
- Use .aligncenter for an image or other element to be centered.
- Use .smaller-padding or .smaller-margin on elements if you want them to take less space underneath.
- Use .no-padding or .no-margin on elements to take almost no space underneath.
- Use .divider class on hr element for extra space.
- Use .button class on a element to create a button.
- Use .blue class (or other color name) on an element to change its color or background color.
- Use .circle-image class on a wrapper div around img to have a circled image.
- Use .colorful-content-box class on a wrapper div to create a nice box.
- ...etc
Tip: See editor-style.css in the css folder for common classes to use on elements.
File structure
Every .html file is in the root folder of the template. Javascript files are in the js folder, images in the imgs folder. Contact form files reside in the contact folder. Main css files (style.css and editor-style.css) are in the root folder. Plugin-related CSS files are in the css folder.
Javascripts
In each .html file, we only load jQuery (or the google map javascript files) in <head>. All other scripts are loaded before the closing body tag. This is best practice. File script.js must always be loaded last.
#02
Creating Your Logo
Photoshop, SVG animation, Logo size
Your logo should be created in vector shapes. You can create it in Photoshop, Illustrator, Inkscape, or any other software that can produce a vector shape and export it to PNG. Your logo can be any size, the demo logo size is 64x64px.
Static logo (classic)
You have to create to logos - black and white one. Export your logo to PNG format and save to imgs folder. Logo file name should be logo.png. This logo is dark (has black lines - demo logo color is #222222). Change the logo color to white and export as logo-white.png.
Dark logo is used on pages without image background, the classic pages.
White logo is used on pages with image background, the fullscreen pages.
For retina displays, add the "@2x" suffix to the filename and create a PNG file two times that big (logo@2x.png, logo-white@2x.png).
In the style.css file, the #logo img (currently on line 95) has display: none; Remove the display: none;.
SVG logo
With a wide browser adoption of SVG you can now have your logo in a vector shape. Export your logo shape (whatever color) into one SVG file. You can export it from Illustrator or export it from Photoshop using some SVG export plugin like SVG Hero or create the shape in Inkscape. You don't have to create larger files for retina displays, SVG can endlessly stretch without quality loss.
Change the logo HTML element in each html file to:
<h1 id="logo"> <a href="/" rel="home"> <svg xmlns="http://www.w3.org/2000/svg" width="XXX" height="YYY" viewBox="0 0 XXX YYY"> ... PATHS ... </svg> </a> </h1>
The logo needs two colors of course, dark and white for normal and fullscreen pages:
#logo svg path { fill: #222; }
body.fullscreen #logo svg path { fill: white; }
Animated logo
To create an animation, you first have to have your vector logo in an SVG format. Add the logo to all html files:
<h1 id="logo"> <a href="/" rel="home" id="logo-svg-animated"> </a> </h1>
Note the addition of logo-svg-animated id.
Include the Lazy Line Painter plugin before the closing body tag:
<script src="js/jquery.lazylinepainter.min.js"></script>
Use the instruction on their site and their converting tool to create your animation javascript that you will copy to the js/script.js file (locate and replace:)
var $svg_logo = jQuery('#logo-svg-animated');
if ( $svg_logo.length > 0 ) {
var pathObj = {
"logo-svg-animated": {
... PUT THE STROKES HERE ...
}
};
jQuery(window).load( function() {
$('#logo-svg-animated').lazylinepainter({
"svgData": pathObj,
"strokeWidth": 3 // ADJUST TO YOUR LIKINGS
}).lazylinepainter('paint');
});
}
#03
Creating a Page with Columns and Images
HTML elements: Columns, Images, Captions, Team Members, Icons
So we've got a page and want to fill it up with content. How to do it in a nice way? Our pages are full-width and a content stretching accross all that space would look too wide. Let's use some columns to break it up and ensure good readability!
Columns HTML
It's easy to create various columns widths, we just need a wrapper that will hold the column divs (in this case a 3-column grid):
<div class="column-grid column-grid-3"> COLUMNS HERE </div>
Let's put 3 columns inside:
<div class="column-grid column-grid-3"> <div class="column column-span-1 column-first"> COLUMN 1 CONTENT </div> <div class="column column-span-1"> COLUMN 2 CONTENT </div> <div class="column column-span-1 column-last"> COLUMN 3 CONTENT </div> </div>
If we want one column to span a little wider, we would do:
<div class="column-grid column-grid-3"> <div class="column column-span-1 column-first"> COLUMN 1 CONTENT </div> <div class="column column-span-2 column-last"> COLUMN THAT SPANS 2x WIDER </div> </div>
And that's the way this documentation page is done too!
The CSS styling of columns is controlled from columns.min.css file in css folder. The original can be found at https://github.com/justintadlock/grid-columns/tree/master/css, WordPress Grid Columns plugin by Justin Tadlock.
Images
Every page can a have a "featured image" stretching accross the page on the top, below the menu. To add such image, write just outside the .wrapper element:
<div class="featured-image-header"> <img src="imgs/image.jpg" alt="" /> </div>
To add a simple image, floated left, right, centered or spanning accross the page, just do:
<img src="imgs/image.jpg" alt="" class="alignleft" /> <img src="imgs/image.jpg" alt="" class="alignright" /> <img src="imgs/image.jpg" alt="" class="aligncenter" /> <img src="imgs/image.jpg" alt="" class="alignnone size-full" />
To add right-aligned caption below, you can do:
<img src="imgs/image.jpg" alt="" /> <p class="small justifyright"><em>A caption.</em></p>
To add an image with a link to a page or larger image and hovered caption, do:
<figure class="image-with-caption"> <a href="imgs/large-image.jpg" class="popup"><img src="imgs/image.jpg" alt="" /></a> <figcaption> <h3>Caption of an image</h3> <p>Description of an image</p> </figcaption> </figure>
For a lightbox popup effect, always add the popup class to a link.
Always include the magnific popup script before the ending body tag for popups to function:
<script src="js/jquery.magnific-popup.min.js"></script>
Team Members
The team members boxes on the demo's about page are a combination of columns and captioned images. Let's do the the columns first:
<div class="column-grid column-grid-3"> <div class="column column-span-1 column-first"> TEAM MEMBER 1 </div> <div class="column column-span-1"> TEAM MEMBER 2 </div> <div class="column column-span-1 column-last"> TEAM MEMBER 3 </div> </div>
Into each of these columns, let's add a captioned image:
<div class="column column-span-1"> <figure class="image-with-caption"> <img src="imgs/image.jpg" alt="" /> <figcaption> <h2><strong>NAME</strong></h2> <h5>POSITION</h5> <p>TEXT</p> <p><a href="#" class="button"><i class="icon-bubble"></i> Email</a></p> </figcaption> </figure> </div>
Icons
Let's look at the Typography & Elements page of the demo. You can see all available icon set codes displayed there. To add an icon to a HTML page, do:
<i class="icon-CODE"></i>
To create your own icon set, go to https://icomoon.io/app/#/select and select your desired icons. After selection, Generate the font (bottom right button) and copy the font files to the css/fonts folder of the template. The generated style.css now has to be renamed to icomoon.css and copied to the css folder of the template. Now you can use your new icons!
#04
Setting up a Gallery
All galleries, whether it's a masonry gallery or a horizontal gallery, have the same HTML basis:
<div class="gallery TYPE-gallery"> <figure class="gallery-item"> HEADER WITH IMAGE <figcaption class='gallery-caption'> CAPTION </figcaption> </figure> ... </div>
There are various gallery types available, just change the TYPE keywod in the gallery wrapper class:
- Masonry: masonry-gallery
- Horizontal: horizontal-gallery
- Vertical: vertical-gallery
- Fullscreen: fullscreen-gallery
- Fullscreen KenBurns: fullscreen-gallery kenburns-gallery (both classes)
And now for the real code:
<div class="gallery masonry-gallery"> <figure class="gallery-item"> <header class='gallery-icon'> <a href="imgs/large-image.jpg" class="popup"><img src="imgs/image.jpg" alt="" /></a> </header> <figcaption class='gallery-caption'> <div class="entry-summary"> <h3>Caption of an image</h3> <p>Description of an image</p> </div> </figcaption> </figure> ... </div>
Masonry Gallery
First make sure you included the isotope script before the ending body tag:
<script src="js/isotope.pkgd.min.js"></script>
Masonry Gallery has 3 columns by default. If you want to change the number of columns, change the col-X class of the gallery-item:
<figure class="gallery-item col-4">
To add a filter to the top of a gallery, add:
<nav id="gallery-filter"> <ul> <li><a href="javascript:void(0)" data-filter="*" class="active">All</a></li> <li><a href='javascript:void(0)' data-filter='.category1'>Cat 1</a></li> <li><a href='javascript:void(0)' data-filter='.category2'>Cat 2</a></li> ... </ul> </nav> <nav id="gallery-grid-changer"> <ul> <li class="col-3"><a href="javascript:void(0)" class="active">ICON</a></li> <li class="col-5"><a href="javascript:void(0)">ICON</a></li> </ul> </nav>
Don't forget to add a category class to each gallery-item you want filterable:
<figure class="gallery-item col-4 category1">
Horizontal Gallery
Add a .horizontal-gallery class to the gallery wrapper. This gallery is a custom gallery, which means you can find its javascript functions in the template's scripts.js file.
Make sure there is a mousewheel script loaded before the closing body tag, so that the gallery can be controlled with user's mouse.
<script src="js/jquery.mousewheel.min.js"></script>
Vertical Gallery
Add a .vertical-gallery class to the gallery wrapper. This gallery is a custom gallery, which means you can find its javascript functions in the template's scripts.js file.
Make sure there is a cycle and mousewheel script loaded before the closing body tag.
<script src="js/jquery.mousewheel.min.js"></script> <script src="js/jquery.cycle.min.js"></script>
Fullscreen Gallery
Add a .fullscreen-gallery class to the gallery wrapper. This gallery is a custom gallery, which means you can find its javascript functions in the template's scripts.js file.
Add a .fullscreen class to the <body> so the page covers browser's screen.
Use your white logo on a fullscreen page for contrast.
On fullscreen pages, copyright info is replaced with gallery navigation.
Make sure there is a cycle script loaded before the closing body tag.
<script src="js/jquery.cycle.min.js"></script>
The thumbnails for this gallery are generated automatically at the bottom of the page. If you want to remove them, hide them with CSS: If you want to control the size of the thumbs, adjust the height:
#gallerythumbs { display: none; }
#gallerythumbs { height: 70px; }
Caption to each image is shown at the bottom. If you want a permanent text over the gallery, wrap it in the .position-absolute class:
<div class="position-absolute"> TEXT OVER GALLERY </div> <div class="gallery fullscreen-gallery"> GALLERY </div>
Fullscreen KenBurns Gallery
Add a .fullscreen-gallery and .kenburns-gallery class to the gallery wrapper. Also there needs to be an extra canvas element inside the gallery:
<div class="gallery fullscreen-gallery kenburns-gallery"> <canvas id="kenburns"></canva> <figure class="gallery-item"> ...
This gallery is a custom gallery, which means you can find its javascript functions in the template's scripts.js file.
Add a .fullscreen classes to the <body> so the page covers browser's screen.
Use your white logo on a fullscreen page for contrast.
Make sure there is a cycle and kenburns script loaded before the closing body tag.
<script src="js/jquery.cycle.min.js"></script> <script src="js/kenburns.js"></script>
Control the gallery speed and other options in js/scripts.js:
jQuery('#kenburns').kenburns({
images: gallery_set,
frames_per_second: 30,
display_time: 5000,
fade_time: 1000,
zoom: 1.2,
background_color:'#F7F6F5'
});
Video Gallery
You can have a self-hosted videos (mp4, ogv) or a youtube/vimeo video in an auto-play fullscreen background. There are some drawbacks though: The self-hosted video will not work on mobile (because mobiles prevent auto-play videos to be loaded). You have to provide an image fallback (save it as imgs/video/fallback-video.jpg). The youtube/vimeo videos might have black stripes from the sides, if the video does not match the screen size.
Self-hosted video
Add this gallery HTML code to the WYSIWYG part of the page:
<div class="gallery fullscreen-gallery">
<figure class="gallery-item">
<header class='gallery-icon'>
<div class="gallery-video" style="background-image: url('imgs/video/fallback-video.jpg');">
<div id="video-wrap" class="video-wrap">
<video preload="metadata" autoplay loop id="my-video">
<source src="imgs/video/movie.mp4" type="video/mp4">
<source src="imgs/video/movie.ogv" type="video/ogg">
</video>
</div>
</div>
</header>
<figcaption class='gallery-caption'>
<div class="entry-summary">
TEXT
</div>
</figcaption>
</figure>
</div>
To load a self-hosted video, save the video as imgs/video/video.mp4 and imgs/video/video.ogv (use a good converting software like The Miro video converter) and load this plugin before the closing body tag:
<script src="js/backgroundVideo.min.js"></script>
<script>
$(document).ready(function() {
$('#my-video').backgroundVideo({
pauseVideoOnViewLoss: false
});
});
</script>
Vimeo/Youtube video
To load a youtube or vimeo video, add this code and plugin before the closing body tag:
<script src="js/okvideo.min.js"></script>
<script>
$(function(){
$.okvideo({ video: '121007977' }) // YouTube or Vimeo ID
});
</script>
You can find more options for this plugin at https://github.com/okfocus/okvideo.
Before / After Gallery
This is a special kind of gallery of only 2 images with the same width and height, therefore there's a different, simpler markup for this:
<div class="gallery before-after"> <img width="600" height="400" src="imgs/image-before.jpg" alt="before" /> <img width="600" height="400" src="imgs/image-after.jpg" alt="after" /> </div>
Make sure both images are the same size. Change the width and height above.
Make sure there is an imagereveal script loaded before the closing body tag.
<script src="js/jquery.imagereveal.js"></script>
#05
Setting up Your Homepage
Fullscreen One-Image Gallery, Text Carousel
Your index.html should can be any page you want, a simple page with a simple gallery, or a fullscreen page with a large gallery. The demo index page is a fullscreen gallery with just one image, with headings and a simple text carousel below.
Use your white logo on a fullscreen page for contrast.
Add a .fullscreen classes to the <body> so the page covers browser's screen.
The markup of the gallery looks like this:
<div class="gallery fullscreen-gallery"> <figure class="gallery-item"> <header class='gallery-icon'> <img src="imgs/image.jpg" alt="" /> </header> <figcaption class='gallery-caption'> <div class="entry-summary"> <h2 class="big no-margin"><strong>HEADING</strong></h2> <h2>Smaller heading</h2><br /> <div class="blog-oneline-carousel"> <h3>Latest</h3> <div class="viewport"> <ul class="overview"> <li>Text 1</li> <li>Text 2</li> </ul> </div> </div> </div> </figcaption> </figure> </div>
Make sure you added the carousel script:
<script src="js/jquery.tinycarousel.min.js"></script>
#06
Blog Page Styles
The blog page is a standard page that has a div wrapping around blog posts summaries and a div wrapping around the blog post. Such page can have a featured image header, but doesn't have to. It's up to you which design you prefer.
<div id="blog-timeline"> <article> <div class="featured-image"> <a href="blog-post.html"><img src="imgs/image.jpg" alt="" /></a> </div> <div class="entry-meta"> <div class="entry-date"> <strong>23</strong> / May 2015</time> </div> <div class="entry-category"> <a href="#" rel="category tag">Category</a> </div> </div> <h2>Heading</h2> <div class="entry-summary"> <p>TEXT</p> <p><a href="blog-post.html">Read more</a></p> </div> </article> ... MORE ARTICLES ... </div> <div id="blog-post"> BLOG POST ARTICLE </div>
Don't forget to add masonry script before the ending body tag:
<script src="js/isotope.pkgd.min.js"></script>
#07
Contact Page - Contact Form and Google Map
PHP for Contact Form, Google Map
The contact page has a map and form. Make sure you have PHP installed on your server first. Go to the
For a google map in the featured image area, add these scripts in the <head> just below jquery:
<script src='http://maps.google.com/maps/api/js?sensor=true&ver=4.0'></script> <script src="js/jquery.gmap.min.js"></script>
The google map goes to the featured image header, along with the script:
<div class="featured-image-header">
<div id="gmap">
<script>
jQuery(document).ready(function() {
jQuery("#gmap").gMap({
scrollwheel: false,
zoom: 14,
markers:[{
address: "2949 4th Ave W, Vancouver, BC V6K 1R3",
icon: {
image: "imgs/mapmarker.png", iconsize: [48,48], iconanchor: [48,48]
}
}],
controls: {
panControl: true, zoomControl: true, mapTypeControl: false, scaleControl: true, streetViewControl: false, overviewMapControl: false
},
});
});
</script>
</div>
</div>
Here you can control many aspects of the map, but the most important would probably be the address. Change it and you're good to go!
Make sure the maps.google.com site can find your address for the map to work.
#08
Custom Color Scheme
Creating Your Own Color Scheme
To create your own color scheme, there is a my-color-scheme.css css file prepared for you in the css folder. Add it in the <head> right under style.css. This will override all colors with your own.
<link rel="stylesheet" href="style.css" media="screen" /> <link rel="stylesheet" href="css/my-color-scheme.css" media="screen" />
The my-color-scheme.css file contains the default color for the light background and dark text. For a dark background and light text, load dark-color-scheme.css under style.css.
To change colors quickly, find and replace (Ctrl+H in your editor) the individual colors:
- Background (Default: #F7F6F5)
- Links Color (Default: #EA6200)
- Text Color (Default: #222)
- Middle Grey Color (Default: #555)
- Light Grey Color (Default: #ccc)
The background color is also used as a text color - content over images has to be white to be readable.
The grey colors are used for input borders and various lines.
Switch the logos white ↔ dark if you're using the dark color scheme.