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.
Included with this theme are the following:
The main page (index.html) of TWILLI Air is structured as follows:
To edit the main menu, you have to look for the <ul id="main-menu">.
Each website section is contained in an <article class="section-wrapper"> tag inside the <section id="main-content">.
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.
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:
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".
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.
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.
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:
Then, to link a button/link to this popup, add an onClick event to the link/button as indicated below:
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():
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():
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):
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:
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:
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:
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:
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.
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.
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:
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.
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():
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).
TWILLI Air makes use of two scalable font icon sets:
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.
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.
To edit the social icons list, you have to look for the <ul class="social-icons">.