Introduction

Welcome to the comprehensive documentation for our HTML templates. This guide is designed to help you quickly and effectively get started with building and customizing your website. Whether you're a seasoned developer or a beginner, this documentation provides all the essential information and instructions you need to make the most out of our templates.

Dive into the sections that are relevant to your needs and follow the detailed instructions to create a stunning and functional website. This documentation is your go-to resource for any questions or assistance you might need.

Let's get started on building something amazing!

Resources and credits:

This template is fully coded and built on top of Open Sources, more details here:

  • Bootstrap : Open source front-end framework.
  • Popper.js : This is an excellent library for handling poppers.
  • AOS : Animate on scroll library.
  • Prism : A lightweight, extensible syntax highlighter (We used it to improve the visual appearance of the documentation).
  • Glide : A lightweight, flexible, and fast JavaScript ES6 slider and carousel. Built for sliding.
  • GLightbox : A touchable pure Javascript lightbox with mobile and video support.
  • Typed : A JavaScript typing animation library.
Images:

We used some images from these websites:

Additionally, we sometimes use AI-generated images when we don’t find related images on stock photo sites or to create unique visuals that don’t exist elsewhere. This ensures that our template remains distinctive and visually engaging.

So, to change images in the template we are using two types of methods: sometimes the <img> HTML tag or the background's CSS style:

  1. Changing images using the <img> HTML tag:

    The <img> tag is used to display images in an HTML document. To change an image using the <img> tag, you can follow these steps:

    • Locate the Image File: Find the new image file on your computer that you want to use in place of the existing image.
    • Rename the New Image File (Optional): If you prefer, you can rename the new image file to match the name of the existing image file. This ensures a seamless replacement.
    • Upload the New Image File: Upload the new image file to the same directory as the old image file on your web server.
    • Edit the HTML File: Open the HTML file containing the <img> tag you want to change using a text editor.
    • Find the <img> tag: Locate the <img> tag in the HTML file. It will look something like this:
    • Update the src Attribute: Replace the src attribute with the new path to the image file. For example:
    • Save and Refresh: Save the HTML file and refresh your web page to see the new image.

  2. Changing images using the background style:

    The background CSS style is used to set a background image for an HTML element. To change an image using the background CSS style, you can follow these steps:

    • Locate the New Image File: Find the new image file on your computer that you want to use in place of the existing image.
    • Rename the New Image File (Optional): If you prefer, you can rename the new image file to match the name of the existing image file for a seamless replacement.
    • Upload the New Image File: Upload the new image file to the same directory as the old image file on your web server.
    • Edit the HTML File: Open the HTML file containing the element with the background style using a text editor.
    • Find the Background CSS Style: Locate the element with the background CSS style. It will look something like this:
    • Update the background Property: Replace the URL in the background property with the new path to the image file. For example:
    • Save and Refresh: Save the HTML file and refresh your web page to see the new image.

And that's it! With these simple steps, you can easily change images in the template using either the <img> HTML tag or the background CSS style.

Icons:

Through most of the examples in this template, we are using Bootstrap Icon and Heroicons . So, all you need to do is to add icons using the <svg> tag directly to your HTML code. Here's an example:

And sometimes, we used other icons in the SVG format from these icons libraries:

Quick start

Note: By default all of these quick starts are configured on the template, so don't worry!

To start using this template you will need to import some files in your current project or start from scratch using our template (scroll down in this page to view it).

Tooling setup:
CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

JavaScript

Many of our components require the use of Bootstrap JavaScript to function. Specifically , Popper.js. Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them. Popper.js is included on bootstrap.bundle.min.js.

Bootstrap starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

Important globals:

This template employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

Bootstrap Documentation

If you want to learn more, we recommend you check the Bootstrap documentation, click here for the documentation

RTL: Right to Left Laguages

RTL means Right to Left laguages like Arabic and Hebrew
Learn how to enable support for right-to-left text in Bootstrap across our layout, components, and utilities.

Required HTML

There are two strict requirements for enabling RTL in Bootstrap-powered pages.

  1. Set dir="rtl" on the <html> element.
  2. Add an appropriate lang attribute, like lang="ar", on the <html> element.

From there, you’ll need to include an RTL version of our CSS. For example, here’s the stylesheet for our compiled and minified CSS with RTL enabled:

Starter template

You can see the above requirements reflected in this modified RTL starter template.

Color Modes (Light, Dark, and Auto Mode Toggle)

This template includes a toggle switch in the top-right corner of the page that allows users to switch between light mode, dark mode, and auto mode. When the toggle switch is set to auto mode, the template will automatically switch between light mode and dark mode based on the user's device settings.

Note: The toggler initially defers to a user’s current system color mode but provides an option to override that and pick a specific color mode.

Enabling the Toggle

To enable the light, dark, and auto mode toggle, you need to include the color-modes.js file at the top of your HTML document, just after the opening </head> tag:

Bootstrap Documentation

For more information on how to customize the colors and styles used in the light and dark modes, refer to the official Bootstrap documentation. The documentation includes detailed information on how to modify the Sass variables to customize the colors used in the light and dark modes, and how to use the data-bs-theme="..." attribute to apply the specific style like data-bs-theme="dark".

Compiling SCSS and Managing Dependencies

Prerequisites: To ensure the smooth compilation and functionality of your SCSS files using our toolkit, it is crucial to download and install the recommended versions of Node.js and npm. We strongly advise using Node.js v16.17.0 (LTS) along with npm v8.15.0 to guarantee compatibility and stability. You can download Node.js v16.17.0 (LTS) from the official Node.js website . This LTS (Long Term Support) version ensures that you have the most stable and reliable environment for development. After installation, if necessary, update npm to version 8.15.0 using the following command:

Follow these steps to effectively compile Bootstrap SCSS and manage dependencies:

1. Navigate to the SCSS Folder

Start by locating the target SCSS folder within your project directory. This is where the SCSS files, including those for Bootstrap, are stored.

2. Install Dependencies and devDependencies

Once Node.js is installed, open your terminal and execute the following command to install the required dependencies:

This command will fetch and install the dependencies outlined in your project's package.json file.

3. Make Desired Changes

Feel free to make any necessary changes to your SCSS files. This could involve adjusting Bootstrap variables, customizing styles, or adding your own stylesheets.

4. Compile to Minified CSS

To compile your SCSS files, including Bootstrap's SCSS, into a minified CSS file, execute the following command:

This command triggers the compilation process and generates a minified CSS file. The compiled output will be placed within the designated CSS folder under name main.min.css that is located at this path assets/css/.

5. Compile To Unminified CSS

If you prefer to compile the SCSS files without minification, use the following command:

Running this command will compile all SCSS files, including Bootstrap's, and produce an unminified CSS file. The compiled output will be saved in the same CSS folder under name main.css that is located at this path assets/css/.

6. Example: Changing the Website’s Color Scheme Using SCSS

To modify the color scheme for the entire website, locate the _color_palette.scss file within the assets/scss/color_palette/ directory. Navigate to the end of this file to find the variables that control the primary color, as well as the text and background colors for the website. You should find something that looks like this:

Note: You can easily customize the colors of this template by changing the SCSS variables. Use the website uicolors.app/create to generate a range of color values (from 50 to 950) based on your brand's primary color. Then update the variables above with your desired colors to match your brand's identity.

7. Generating RTL CSS File

First install the rtlcss package, by executing the following command: (You can learn more on this guide: rtlcss.com)

To create a right-to-left (RTL) version of your main.min.css for languages that read from right to left, execute the following command:

Running this command will transform your main.min.css into main.min.rtl.css, which can be used to support RTL languages.
Note: run it at the same folder that locate main.min.css file.

Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Our primary palette is comprised of neutrals. These colors are present across most touch points from marketing to product.

1 - Background colors:
.bg-primary
.bg-primary-subtle
.bg-secondary
.bg-secondary-subtle
.bg-success
.bg-success-subtle
.bg-danger
.bg-danger-subtle
.bg-warning
.bg-warning-subtle
.bg-info
.bg-info-subtle
.bg-light
.bg-light-subtle
.bg-dark
.bg-dark-subtle

.bg-body-secondary

.bg-body-tertiary

.bg-body
.bg-black
.bg-white
.bg-transparent
2 - Text colors:

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

.text-black

.text-white

Changing the Font Family

If you'd like to customize the font family used throughout the template, it's a straightforward process. By following these steps, you can easily modify the font-family to better match your design preferences.

Step 1: Locate the style.css File

The first step is to locate the style.css file in your project. This file is added to all pages. You can find it in the ./assets/css/ folder within your project's directory structure.

Step 2: Identify the Font Import

At the beginning of the style.css file, you might notice an @import rule that brings in an external font. This is where the current font, in this case, 'Inter var', is being imported and defined. Here's an example of what it might look like:

Step 3: Change the Font Family

To change the font family, you need to locate the font-family property in the CSS code. It will typically be applied to the body selector or other relevant elements. In your case, the code might look like this:

To change the font family, simply replace 'Inter var' with the name of the new font you want to use. You can use any font that is available in your project's font directory or an external font import.

Step 4: Save Your Changes

After modifying the font-family property, save the style.css file. Your chosen font family will now be applied to all elements that use the body selector or other relevant selectors, providing a consistent look across all pages.

Updating Meta Tags and Title Tags for SEO and Social Sharing

Modify the meta tags, title tags, Twitter Card meta tags, and Open Graph meta tags in the head section of your HTML code for effective social sharing and SEO (search engine optimization). By adjusting these tags, you can control how your content appears when shared on social media platforms and index it by search engines like Google and Bing.

Here is what the content head tag may look like:

Note: You can use a favicon generator tool to convert your image to a favicon in different formats. For example, you can use the tool at favicon.io to upload your PNG image and download your favicon in ICO and PNG formats. Tip: Make sure to upload a square image to ensure the tool generates better logo formats.
You can also use the tool to generate a favicon from text or emojis
Be careful if you change the site.webmanifest file, as you need to update the src attribute of the icons array to match the new path of your icon files. Otherwise, your icons may not display correctly on some devices.

Grid

Bootstrap grid is a powerful mobile-first flexbox grid which helps you build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Grid System

Bootstrap grid system uses a series of containers, rows, and columns to layout and aligns content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

One of three columns
One of three columns
One of three columns

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .container.

Grid Options

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follows:

  • Extra small (xs)
  • Small (sm)
  • Medium (md)
  • Large (lg)
  • Extra large (xl)
  • Extra extra large (xxl)

As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints:

xs
<576px		 sm
≥576px		 md
≥768px		 lg
≥992px		 xl
≥1200px		 xxl
≥1400px
Container max-width None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns 12
Gutter width 1.5rem (.75rem on left and right)
Custom gutters Yes
Nestable Yes
Column ordering Yes
Auto-layout columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to xxl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
Variable width content

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3

Utilities

Bootstrap has a lot of utility/helper classes to quickly style elements without using any CSS code.

Flexbox

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

I'm a flexbox container!

I'm an inline flexbox container!

Responsive variations also exist for .d-flex and .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex
  • .d-xxl-flex
  • .d-xxl-inline-flex
Spacing: Margin

Utilities for controlling an element's margin.

Note: Use the mt-*, me-*, mb-*, ms-*, mx-*, my-* utilities to control the margin on other sides of an element. And they have the same value as the example above. And they are responsive as well like mt-sm-5.

Note:To use a negative margin value, add n before the requested size. Here’s an example class that’s the opposite of .mt-1:

Spacing: Gap

Utilities for controlling gutters between grid and flexbox items.

Spacing: Gutters

Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.

Note: They are responsive as well like g-sm-5.

Spacing: Padding

Utilities for controlling an element's padding.

Note: Use the pt-*, pe-*, pb-*, ps-*, px-*, py-* utilities to control the padding on other sides of an element. And they have the same value as the example above. And they are responsive as well like pt-sm-10.

Sizing: Max-Width

Utilities for setting the maximum width of an element.

Sizing: Width

Utilities for setting the width of an element.

Sizing: Height

Utilities for setting the height of an element.

Borders: Border Radius

Utilities for controlling the border radius of an element.

Note: They are responsive as well like rounded-sm-6.

Typography

Enhance your text styling with our versatile typography classes. Customize font size, line height, letter spacing, and text clamping for a refined, responsive design. Use these classes to apply specific styles and ensure your content looks great across all devices.

Font Size

Utilities for controlling the font size of an element.

Line Height

Utilities for controlling the leading (line height) of an element.

Letter Spacing

Utilities for controlling the tracking (letter spacing) of an element.

Line Clamp

Utilities for clamping text to a specific number of lines.

Contact Form Configuration (PHP)

Now, let's discuss setting up the contact form so that you can receive messages by adding your email.

1 - PHP Configuration

To make sure you are able to receive the contact information from the form, you will need to update the email address in the email.php file located in the ./assets/php directory. Simply enter your email address in place of the current one "You_Email@example.com" and this will ensure that any messages sent through the contact form are delivered directly to your inbox. It's important to use the email address that you regularly check and use for receiving emails from the contact form.
Keep in mind that the email may end up in your spam or junk folder, so be sure to check those folders if you don't see the email in your inbox.
This will allow you to stay up-to-date and easily respond to any inquiries or messages you receive.

2 - JavaScript Functionality

Make sure you have the ./assets/js/scripts.js javascript file at the bottom of the page. (By default it is included!)

Subscribers Form Configuration (Mailchimp)

Mailchimp is an email marketing platform that allows businesses to create embedded forms for collecting email subscribers. In this section, we will show you how to create a Mailchimp embedded form, customize it, and copy only the action URL. The action URL is the link that tells Mailchimp where to send the form data. By copying only the action URL, you can easily integrate the form with your email campaigns while keeping your code clean and organized.

Here's what you need to do:

  1. Log in to your Mailchimp account and navigate to the audience dashboard.
  2. Select the audience for which you want to create the embedded form:
    Mailchimp Screen
  3. Click on the "Signup Forms" tab:
    Mailchimp Screen
  4. Click on the "Create embedded form":
    Mailchimp Screen
  5. Fill out the inputs: "Embedded form name" and select the "Audience", then click "Begin" button.
    Mailchimp Screen
  6. Click on the "Continue" button:
    Mailchimp Screen
  7. You should see a code snippet that begins with "<form action=...".
    Copy only the URL part of the action attribute and remove the quotation marks around it, as shown on this screen:
    Mailchimp Screen
  8. Please locate the file named scripts.js within the directory path assets/js/. Open the file on your favorite text editor like Sublime Text or Visual Studio Code, and identify the constant formActionURL which is typically defined at the beginning of the file. You can recognize it by its declaration, which should resemble the following on your screen:
    Mailchimp Screen
  9. After that, replace enter_your_form_action_url_here with your actual action attribute value of the embedded form from Mailchimp that you copied before, as shown on the following screen. And then save the file!!!
    Mailchimp Screen
  10. And don't forget to include scripts.js at the bottom of your page, (by default it is included!):

And that's it! You should now have a fully functional subscribers form with only the action URL copied.

Accordion

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

How it works

The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add the .open class on the .accordion.

Example

Click the accordions below to expand/collapse the accordion content.

Frequently asked questions

A pixel is the smallest unit of a digital image that displays a specific color and brightness.

Design thinking is a human-centered approach to problem-solving that involves understanding the needs and emotions of the users, defining the problem, generating and testing ideas, and implementing solutions.

A QR code is a type of barcode that can be scanned by a smartphone or a QR reader to access information, such as a website, a text, or an image.

A wireframe is a low-fidelity sketch or blueprint of a website or app that shows the layout, structure, and functionality.

A chatbot is a software program that simulates a conversation with a human user using natural language processing and artificial intelligence.

A podcast is a digital audio file that can be downloaded or streamed online and listened to on various devices. Podcasts usually have a theme, topic, or genre.
Always open

Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success).

Link color

Use the .alert-link utility class to quickly provide matching colored links within any alert.

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

With icons

Similarly, you can use flexbox utilities and SVG Icon Format to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.

Dismissing

Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:

  • Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
  • Add a close button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the close button.
  • On the close button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.
  • To animate alerts when dismissing them, be sure to add the .fade and .show classes.

You can see this in action with a live demo:

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Link
Soft buttons

Stylish and visually appealing buttons that utilize a softer background color scheme for a subtle, elegant look. Ideal for creating a harmonious and modern user interface. Your can use .btn-soft-* classes.

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.

Toggle states

Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies.

Block buttons

Create responsive stacks of full-width, “block buttons”. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.

Button group

Group a series of buttons together on a single line or stack them in a vertical column.

Basic example, wrap a series of buttons with .btn in .btn-group.

Mixed styles
Outlined styles

Social Buttons

Pure HTML and CSS Bootstrap social buttons with plenty of examples. Also, easy to extend or add new brands.

Examples
Share Instagram LinkedIn Github Youtube Apple Android Pinterest Vimeo Slack Dribbble Reddit Behance Quora Paypal Medium Snapchat Whatsapp Telegram Signal Messenger Discord Google Skype Stack Overflow Spotify Tiktok Meta
Icon only
Circle
Outline

Algolia Search

Algolia is a powerful search-as-a-service platform with a REST API for indexing and searching data. It is an excellent solution for enhancing your static site with robust search functionality.

To get started, you'll need three pieces of information from Algolia:

  • Application ID: This is a unique identifier for your application.
  • Search API Key: This key is used to search the index.
  • Index Name: The name of the index you've created (Usually, this is the name of the JSON file you uploaded!).
Algolia Setup

Creating an Account and an Application: If you haven't done so already, create an account with Algolia.

When you create an account for the first time, a default application named "My First Application" is automatically created for you. You can use this application instead of creating a new one. Or if you want, you can create a new application by using this link: create an application.

Algolia Screen
Populating the Index

To enable search functionality, we need to populate the index with data. For now, we will use the Algolia UI to do this. Here’s how to do it using the Algolia UI:

When you click on "My First Application", you'll see something like the following screenshot, and then click on the upload a file card.

Algolia Screen

Then, a pop-up window will appear, where you need to upload the JSON file.

Algolia Screen

The JSON file is located at assets/img/algolia/algolia-json.json. Open it with your favorite text editor, such as Sublime Text or VS Code. Make the necessary changes to fit your website content, and then upload the updated file.

Alternatively, you can copy this example and create a new file:

When the file uploaded, then choose 'title' for the primary text field and 'description' for the secondary text field. As shown on this example:

Algolia Screen

And then click the 'Continue' button three times. Then copy the 'Application ID' and 'Search API Key'

Algolia Screen

Once you have this information from the Algolia platform, paste these values into the variables located at the top of the scripts.js file found in the assets/js/ directory (by default the file is included!), like this:

Including the Search Button for Algolia

To enable the search functionality with Algolia and trigger the search modal, ensure you include the following button code in your HTML file. This button, when clicked, will open the search modal, allowing users to perform searches using Algolia. This code is included in the file by default:

Note:

Ensure you have the following files in these folders:

  • assets/libraries/algolia/algoliasearch-lite.umd.js
  • assets/libraries/algolia/instantsearch.production.min.js

We have included a script located in assets/js/scripts.js. This script dynamically includes the above files and creates the search modal. To enable this functionality, simply include the scripts.js file at the bottom of your HTML file.

Here’s how you can include the scripts.js file: (by default the file is included!)

CSS Modification:

We've added some CSS to modify its style. It is located on the assets/css/style.css. (by default it is included!)

Additionally, you can learn more about setting up Algolia search in this blog post.

Animation: AOS

AOS: CSS-Driven “On Scroll” Animation Library,

How AOS Works

The idea behind AOS is straightforward: watch all elements and their positions based on settings you provide them. Then add/remove the class aos-animate. Of course, in practice, it’s not always that easy, but the idea behind AOS is as simple as that. Every aspect of animation is handled by CSS.

Check this example for the Demo
this is the source code at GitHub Source Code
👉 To get a better understanding how this actually works, I encourage you to check the post on CSS-tricks.

Here are some examples of how you can use it:

And you need to include some packages: (they are included by default!)

CSS Package:
JS Package:

This is how we initialize it:

This is initialized by default at the file scripts.js located a the folder path: assets/js/

Countdown Timer

This section provides a step-by-step guide for editing a countdown timer on an HTML page. By following the instructions, you can easily update the launch date and time of your countdown. Let's dive in!

  1. Open the HTML file containing the countdown in your preferred text editor.
  2. Look for the line of code that sets the data-future-date attribute. It should look something like this:
  3. Change the date and time to your desired launch date and time, while making sure to maintain the exact format. For example:
    Please use the short forms for the months like this:
    • January (Jan)
    • February (Feb)
    • March (Mar)
    • April (Apr)
    • May (May)
    • June (Jun)
    • July (Jul)
    • August (Aug)
    • September (Sep)
    • October (Oct)
    • November (Nov)
    • December (Dec)
  4. And don't forget to include scripts.js at the bottom of your page, (by default it is included!):
  5. Save the changes you modified from the HTML file.
  6. Open the HTML file in your web browser to confirm that the countdown has been updated to reflect the new launch date and time.

And that's it! You've successfully edited the countdown on your HTML page.

Embed Videos

This template provides support for embedding videos. for Youtube, Vimeo, and locally hosted videos. let's start with the hardest one which is Modal (or popups) videos.

Modal Videos:

you need to have a class="video-play-button video-btn-modal" , type="button" data-bs-toggle="modal", data-bs-target="#videoModal" data-bs-src="https://www.youtube.com/embed/YourIdHere", you can find YourIdHere from Youtube when you click Share Button -> Embed Button

Look at iframe, you can find src="https://www.youtube.com/embed/YourIdHere" and Change it!!

For modal you need to have it like this example:

For Javascript, we have added the script to make it work on scripts.js file. So include the file at the bottom (by default it is included!) or use this code:

Simple embedding
1 - Embedding Youtube & Vimeo videos:

To embed a YouTube video on a webpage, follow these steps:

  1. Find the video you want to embed on YouTube and click on the "share" button below the video.
  2. Click on the "embed" button. This will display a piece of code that you can copy.
  3. Copy the code and paste it into the HTML of your webpage.
  4. The video will now be embedded on your webpage and will be displayed to visitors when they visit your site.

Note: You may also need to adjust the width and height of the "iframe" element to ensure that the video is displayed properly on your webpage.

Example:

2 - Local Hosted Video:
To add a locally hosted video to an HTML page, you can use the "video" element. Here's how:
  1. Create a "video" element in the HTML of your webpage.
  2. Use the "src" attribute to specify the location of the video file. For example:
  3. You can also use the "controls" attribute to display playback controls for the video, like so:
  4. If you want to support multiple video formats, you can use the "source" element to specify multiple sources for the video. For example:

Google Maps

To embed a Google Map on a webpage, you can use the Google Maps Embed API. Here's how:

  1. Go to the Google Maps website and search for the location you want to display on the map.
  2. Click on the Share or embed map button and then click on the embed map tab.
  3. Customize the size and appearance of the map using the options provided, then click on the copy HTML button to copy the embed code.
  4. Paste the embed code into the HTML of your webpage. The map will now be displayed on your webpage and will be interactive for your visitors.

Example:

Typed

Typed.js is a library that types. Enter in any string, and watch it type at the speed you’ve set, backspace what it’s typed, and begin a new sentence for however many strings you’ve set. Live Demo
The README on GitHub is going to be very helpful for any questions, features, or use cases.

Text animation example

Unlock the power of

creativity innovation collaboration technology inspiration
Input example
Find your perfect stay... Search for homes, apartments, and more... Discover unique places to stay... Explore top-rated rentals... Start your adventure... Book a cozy getaway... Find a family-friendly home... Explore beachside retreats... Discover city apartments...

And you need to include a JS package at the bottom: (It's included by default!)

For Javascript, we have added the script to make it work on scripts.js file. So include the file at the bottom (by default it is included!) or use this code:

Note: If you want to include multiple Typed.js instances on the same page, ensure each instance uses unique IDs, like typed2 and typed-strings2, to avoid conflicts. Use the appropriate function (initializeTyped or initializeTypedInput) to reinitialize the JavaScript code with the corresponding unique IDs. This guarantees that each Typed instance operates independently, allowing for multiple animations without interference. Adjust the initialization options according to your specific requirements for each instance.

tsParticles

To add particles to the background of a webpage, you can use a library such as tsParticles.js.

Here's how:
  1. Include the following tsparticles.bundle.min.js near the end of your page, right before the closing </body> tag, to enable them. (by default it is included!)
  2. Create a "div" element in your HTML page where you want the particles to be displayed. Give the "div" element an ID so you can reference it in your JavaScript code. For example:
  3. Include the JavaScript function to your HTML page that initializes the particles. The function should use the tsParticles.js library to create a new particle effect and display it in the "div" element you created earlier.
    The JavaScript function is located in the scripts.js file. (by default it is included!)
    Note: it should be included after tsparticles.bundle.min.js!
Particles Options

If you want only to make some changes:

  1. Go to tsParticles.JS Demo / Generator. Edit whatever you need from the panel on the left side.
  2. After you're happy with the settings, click on More dropdown at the top left corner.
  3. And then click on Export Config. Scroll to the bottom and then click the Copy button.
  4. Open the scripts.js file in your text editor, and search for the optionTsParticles object and then changed it to the new data that you copied before.

Here is a portion of the JavaScript code: (by default it is included!)

Note: You can find more information about tsParticles on his Github Repository

CSS Modification:
We've added some CSS to modify its style. It is located on the assets/css/style.css. (by default it is included!)

Add Another Particle Container:

To add another particle container, create another div with a different id (e.g., tsparticles2) and load it using tsParticles.load with the new options or the same option as before.

Filters

The .filter class allows you to apply various CSS filter effects using custom properties. By defining these filter effects as CSS variables, you can easily adjust and customize the visual appearance of elements without modifying the CSS directly. The supported filter effects include blur , brightness , contrast , drop-shadow , grayscale , and saturation .

Note: To disable the filter, use the .filter-none class or .filter-none-hover on hover to disable the filter effects.

To apply the filter effects , use the .filter class to define the desired effects. You can then combine it with one or more of the following classes like: .filter .blur-3xl .brightness-105 .grayscale-100

1 - Blur:

Utilities for applying blur filters to an element.

Example:

without blur
Demo
.blur-xs
Demo
.blur-sm
Demo
blur-lg-hover
Demo
2 - Brightness:

Utilities for applying brightness filters to an element.

Example:

without brightness
Demo
.brightness-50
Demo
.brightness-125
Demo
brightness-150-hover
Demo
3 - Contrast:

Utilities for applying contrast filters to an element.

Example:

without contrast
Demo
.contrast-50
Demo
.contrast-125
Demo
contrast-200-hover
Demo
4 - Drop Shadow:

Utilities for applying drop-shadow filters to an element.

Note: This is useful for applying shadows to irregular shapes, like text and SVG elements. For applying shadows to regular elements, you should probably use a box-shadow instead like .shadow-sm .shadow .shadow-lg classes.

Example:

without drop-shadow
.drop-shadow-md
.drop-shadow-xl
drop-shadow-2xl-hover
5 - Grayscale:

Utilities for applying grayscale filters to an element.

Example:

without grayscale
Demo
.grayscale-50
Demo
.grayscale-100
Demo
grayscale-100-hover
Demo
6 - Saturate:

Utilities for applying saturation filters to an element.

Example:

without saturate
Demo
.saturate-50
Demo
.saturate-150
Demo
saturate-200-hover
Demo

Backdrop Filters

The .backdrop-filter class enables you to apply a variety of backdrop filter effects using CSS variables. These effects allow you to enhance the visual appearance of elements by applying filter effects to the area behind an element, creating a sense of depth and visual interest. By defining these backdrop filter effects as CSS variables, you can easily customize and control the visual styles without altering the CSS directly. The supported backdrop filter effects is only blur .

Note: To disable the backdrop filter, use the .backdrop-filter-none class or .backdrop-filter-none-hover on hover to disable the backdrop-filter effects.

To apply the backdrop filter effects , use the .backdrop-filter class to define the desired effects. You can then combine it with the following classes like: .backdrop-filter .backdrop-blur-xl

Backdrop Blur:

Utilities for applying backdrop blur filters to an element.

Example:

.backdrop-blur-xs
Demo
.backdrop-blur-md
Demo
.backdrop-blur-xl
Demo

Transitions & Animation

The following CSS classes allow you to enhance the visual dynamics of your website. By utilizing CSS properties and predefined classes, you can create smooth transitions and engaging animations that improve the user experience. These classes enable you to define how elements transition between states, manage timing functions and apply various animation effects with ease.

Transition Property:

Utilities for controlling which CSS properties transition..

Example:

Transition Duration:

Utilities for controlling the duration of CSS transitions.

Example:

duration-150
duration-500
duration-1000
Transition Timing Function:

Utilities for controlling the easing of CSS transitions.

Example:

ease-in
ease-out
ease-in-out
Transition Delay:

Utilities for controlling the delay of CSS transitions.

Example:

delay-150
delay-300
delay-700
Animation:

Utilities for animating elements with CSS animations.

Example:

Ping
Bounce

Transforms:

The Transform CSS classes provide a powerful set of utilities to apply various transformation effects to elements, ensuring compatibility with both LTR (Left-To-Right) and RTL (Right-To-Left) text directions. These classes leverage CSS variables to define transformations such as translation, rotation, skewing, and scaling, allowing for dynamic and responsive design adjustments.

Note: To disable all transformations, use the .transform-none class or .transform-none-hover class on hover.

To apply the transform , use the .transform class to define the base class. You can then combine it with the following classes like: .transform .scale-150-hover

1 - Scale:

Utilities for scaling elements with transform.

Example:

without scaling
Demo
scale-50
Demo
scale-125
Demo
scale-150-hover
Demo
2 - Rotate:

Utilities for rotating elements with transform.

Example:

without rotating
Demo
rotate-45
Demo
rotate-90
Demo
rotate-n12-hover
Demo

Note: Use the .rotate-n{*} , and .rotate-n{*}-hover classes for negative values

Note: Use the .rotate-x-{*} , .rotate-y-{*} , and .rotate-z-{*} for x, y, and z axes. You can use the same logic for negative values and hover states for x, y, and z axes as we did for .rotate-{*} classes.

3 - Translate:

Utilities for translating elements with transform.

Example:

without translating
Demo
translate-y-6
Demo
translate-x-n6
Demo
translate-y-6-hover
Demo

Note: Use the .translate-x-n{*} , .translate-x-n{*}-hover , .translate-y-n{*} , .translate-y-n{*}-hover , .translate-z-n{*} , and .translate-z-n{*}-hover classes for negative values

4 - Skew:

Utilities for skewing elements with transform.

Example:

without skewing
Demo
skew-y-6
Demo
skew-x-n12
Demo
skew-y-12-hover
Demo

Note: Use the .skew-y-n{*} , .skew-y-n{*}-hover , .skew-x-n{*} , and .skew-x-n{*}-hover classes for negative values

5 - Transform Origin:

Utilities for specifying the origin for an element's transformations.

Example:

origin-center
Demo
origin-top-start
Demo
origin-bottom
Demo
origin-bottom-end
Demo
6 - Perspective & Perspective Origin:

Perspective: Utilities for controlling an element's perspective when placed in 3D space.

Perspective Origin: Utilities for controlling an element's perspective origin when placed in 3D space.

Example:

perspective-origin-top-start

1
2
3
4
5
6

perspective-origin-bottom-end

1
2
3
4
5
6