TWILLI | Air

Documentation by “Twilli Themes”
Email: twilli.themes@gmail.com

Table of Contents

  1. About TWILLI Air Theme
  2. What's Included
  3. HTML Structure
  4. Main Menu
  5. Sections
  6. Page Background Images
  7. Content Popups
  8. Carousel
  9. Image Carousel in Popup
  10. Tabs
  11. Contact Form
  12. Scalable Font Icons
  13. Social Icons
  14. Sources and Credits

About TWILLI Air Theme - top

TWILLI Air is a responsive one-page scroll HTML/CSS/JS theme/template, with a simple and minimalist concept.

The template is best suited for websites with minimal and concise content, but allows for more content to be displayed in elegant popups.

Bootstrap is used in the theme sections structure.

What's Included - top

Included with this theme are the following:

HTML Structure - top

The main page (index.html) of TWILLI Air is structured as follows:

<div id="outer-container"> <!-- LEFT SIDEBAR --> <section id="left-sidebar"> <!-- logo --><div class="logo"></div> <!-- main menu --><ul id="main-menu"></ul> </section> <!-- MAIN CONTENT --> <section id="main-content"> <!-- section 1 --><article id="section1" class="section-wrapper"></article> <!-- section 2 --><article id="section2" class="section-wrapper"></article> <!-- section 3 --><article id="section3" class="section-wrapper"></article> <!-- etc --> </section> <!-- FOOTER --> <section id="footer"> <!-- social icons --><ul class="social-icons"></ul> <!-- copyright text --><div class="footer-text-line"></div> </section> </div>

To edit the main menu, you have to look for the <ul id="main-menu">.

Sections - top

Each website section is contained in an <article class="section-wrapper"> tag inside the <section id="main-content">.

Sections Intro/Reveal Animations

TWILLI Air includes WOW.js and animate.css to create a smooth intro reveal effect when the user scrolls to each section.
As explained on the WOW website, you can add reveal animations to any html element:

The template comes with reveal animations already set for the intro section at <div class="content-wrapper clearfix wow fadeInDown">. You can edit this or add other effects to any other HTML elements inside the page.

Page Background Images - top

The theme is designed to have at least ONE high-resolution page background image, which stretches along the whole page.

To set the default page background image, insert the image URL in the <body>, as indicated:

<body data-default-background-img="[background image URL]" data-overlay="true" data-overlay-opacity="0.35">

Set "data-overlay" attribute to "false" to disable semi-transparent black overlay on top of the background. Set the opacity/transparency of this overlay in the "data-overlay-opacity".

Custom Page Backgrounds for each section

The theme allows the possibility for the background image to change whenever a user scrolls to each section.

You can set a different background image for each section by including the image URL in the "data-custom-background-img" attribute for each <article class="section-wrapper">. (Read Sections above for more about each section)

If no background image is specified for a section, the default background image is shown by default.

Enable/Disable Background Change

The template is intended to show only one background image on mobile in order for the site to load faster and minimize the data being transferred. Although not recommended, you can still enable the background changes on scroll, on mobile.
In /assets/js/initialise-functions.js:

Content Popups - top

Although TWILLI Air theme is intended to be minimalist as possible, you can still include more content in popups.

To add a new popup, create a <div class="content-to-populate-in-modal"> anywhere inside the page, give it a unique id, and insert content, as below:

<div class="content-to-populate-in-modal" id="[unique id]"> [... content which will be included in the popup ...] </div>

Then, to link a button/link to this popup, add an onClick event to the link/button as indicated below:

<a href="" onClick="populate_and_open_modal(event, '[unique id of popup content]', '[optional ID of section within popup to link to]', '[optional class to add to modal container]');" class="btn btn-outline-inverse btn-sm">read more</a>

Initialising custom Javascript functions after popup is open/closed

If you want to initialise a custom JS function after the popup is opened: In the JS file /assets/js/initialise-functions.js, add the following in the initialise_document_ready_functions():

$('#common-modal').on('shown.bs.modal', function() { // function to initialise when popup is open });

If you want to initialise a custom JS function after the popup is closed: In the JS file /assets/js/initialise-functions.js, add the following in the initialise_document_ready_functions():

$("#common-modal").on('hide.bs.modal', function() { // function to initialise when popup is closed });

Keep in mind the these two event handlers above apply EVERY TIME a popup is opened/closed.
If you want to apply a custom Javascript function to a SINGLE POPUP (instead of all):

  1. Wrap the particular popup's content inside a container with a unique ID. Example:
    <div class="content-to-populate-in-modal" ...... > <div id="unique-id"> [POPUP Content] </div> </div><!--.content-to-populate-in-modal-->
  2. Then, modify the function that was added above in initialise-functions.js, as below:
    $('#common-modal').on('shown.bs.modal', function() { if ($('#common-modal #unique-id').length > 0) { // function to initialise when ONLY this popup is open } });

TWILLI Air theme includes a Bootstrap carousel in one of the sections (<article id="carousel">).

Each carousel within the page should consist of the following (taking our example as guide):

Image Carousel in Popup - top

The theme also includes Owl Carousel, a responsive slider/carousel which allows you to create elegant image sliders.

In TWILLI Air, Owl Carousel can be placed inside a popup (see section Content Popups above), and initialised when the popup is opened.

The content for the image carousel is placed inside the <div class="content-to-populate-in-modal"> as below:

<div class="content-to-populate-in-modal" id="[modal-id]"> <!-- Owl Carousel Start --> <div id="unique-id-for-image-slider" class="owl-carousel popup-image-gallery"> <!-- slide --> <div> <h6 class="caption">Caption for Image 1</h6> <img class="lazyOwl" data-src="assets/images/other_images/bg1.jpg"> </div> [...] </div> <!-- Owl Carousel End --> </div><!-- .content-to-populate-in-modal -->

Every Owl Carousel which are found inside a popup and have a class of ".popup-image-gallery" are initialised in the /js/initialise-functions.js when the popup is visible, using the Bootstrap "shown.bs.modal" carousel event handler:

$('#common-modal').on('shown.bs.modal', function() { [Owl Carousel parameters] });

The Owl Carousel parameters here can be modified how you want. More information on these can be found on the Owl Carousel website: www.owlgraphic.com/owlcarousel

Since the carousel is in a popup, an extra function in /js/initialise-functions.js destroys the carousel when the popup is closed (it would be re-initialised when popup is re-opened). This is done using the Bootstrap "hide.bs.modal" carousel event handler and the Owl Carousel destroy() function:

$('#common-modal').on('hide.bs.modal', function() { [...] });

Alternative Image Gallery Carousel

The template also offers an alternative image gallery carousel inside a popup. Similar to the instructions mentioned above, the content for the alternative image carousel is placed inside the <div class="content-to-populate-in-modal"> as below:

<div class="content-to-populate-in-modal" id="[modal-id]"> <!-- Owl Carousel Start --> <div id="unique-id-for-alt-image-slider" class="owl-carousel popup-alt-image-gallery"> <!-- image item --> <div class="item"><a href="[URL of image to open on click]" data-lightbox="popup-alt-gallery"><img class="lazyOwl" data-src="[URL of image thumbnail]"></a></div> [...] </div> <!-- Owl Carousel End --> </div><!-- .content-to-populate-in-modal -->

Every alternative image gallery which are found inside a popup and have a class of ".popup-alt-image-gallery" are initialised in the /js/initialise-functions.js when the popup is visible, using the Bootstrap "shown.bs.modal" carousel event handler, as described above.

Please note that although TWILLI Air comes with this type of image carousel INSIDE a popup, you can still use Owl Carousel anywhere in the theme where you want. If you want to do so, or to create a different carousel with different parameters, use the same HTML described above but remove the class ".popup-image-gallery". Then, intialise it in /js/initialise-function.js or at the footer of the page using the unique ID of that particular carousel instead of the class.

Tabs - top

Since version 1.3.0, TWILLI Air includes a Bootstrap Tabs section (<article id="tabs">). This sections is ideal for content which can be categorised in multiple sections. More information about Bootstrap Tabs can be found on Bootstrap's documentation page.

Tab Icons

On TWILLI Air, tabs can include icons (Glyphicon or Font Awesome). These can be enabed/disabled and can replace tab text completely.

Each tab's icon and text are structured as follows:

<li role="presentation"> <a href="#tabs-tab3" aria-controls="tabs-tab3" role="tab" data-toggle="tab"> <i class="icon fa fa-coffee"></i><span>Iaculis</span> </a> </li>
Icons are included in <i> and text in <span>. Either of them can be removed.

To hide text (and show icons only) on different viewports (ex: on small devices only) you assign the following attributes to the <ul class="nav nav-tabs" text-hidden-xs="true"..>

For more information about which icons to use, see section Scalable Font Icons below.

Initialising custom Javascript functions after tab is shown/hidden

If you want to initialise a custom JS function when a tab is shown/hidden, you can use event handlers as described in Bootstrap's documentation.

For example, to initialse a function after a tab pane is shown, in the JS file /assets/js/initialise-functions.js, add the following in the initialise_document_ready_functions():

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // function to initialise when tab is shown });

Contact Form - top

When installing this theme, it is important to change the 2 email addresses at the top of the assets/php/mail.php file:

The form includes the following fields:

The form also includes a CAPTCHA, intended to filter spam. The captcha only works if a PHP server is set (locally you need to use a tool like XAMPP, WAMP, or MAMP).

Scalable Font Icons - top

TWILLI Air makes use of two scalable font icon sets:

Glyphicons

To add a Glyphicons icon, use the following code:
<span class="glyphicon glyphicon-[icon id]"></span>, OR:
<i class="glyphicon glyphicon-[icon id]"></i>

The full list of the available icons and their IDs can be found on: getbootstrap.com/components.

Font Awesome

To add a Font Awesome icon, use the following code:
<span class="fa fa-[icon id]"></span>, OR:
<i class="fa fa-[icon id]"></i>

The full list of the available icons and their IDs can be found on: fortawesome.github.io/Font-Awesome/icons/.

Remember that these icons should be treated as "text" rather than an "image icon". This means that if, for example you want to change their colour, you should use the CSS "color" rule, as you do to any text. If you want to increase their size, you have to alter their "font-size" value... and so on.

Social Icons - top

To edit the social icons list, you have to look for the <ul class="social-icons">.

Sources and Credits - top

Resources:
Fonts:
Images:

TWILLI Themes

Go To Table of Contents