# Mono - Documentation

## Introduction

Thank you for choosing "Mono - Multi-Purpose HTML5 Template". This documentation will help you to familiarise how the template is structured and how to use the features. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here.

If you like this template please don't forget rate it 5 :)

themeforest.net/downloads

- Author: FlaTheme
- Contact: flatheme@gmail.com
- Updated on: Mar 9, 2025

## Included Files

- Mono v10 - Template files
  - assets - All the neccessary source files of the template
    - css - CSS and SCSS files
      - scss - All SCSS files
      - theme.css - Output of SCSS (or Compiled SCSS)
    - images - Images
    - js - JavaScript functions
    - php - PHP files
    - plugins - All the plugins that are used in the template
  - 1. Home Pages - Home Pages html files
  - 2. Pages - Pages html files
  - 3. Portfolio - Portfolio Pages html files
  - 4. Blog - Blog Pages html files
  - 5. Features - Feature Pages html files(headers, footers etc.)
- Documentation - Documentation files

## HTML Structure

    <!DOCTYPE html>
    <html lang="en">
      <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <title>Mono</title>

        <!-- Favicon -->
        <link rel="shortcut icon" href="../assets/images/favicon.png">

        <!-- CSS -->
        <link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
        <link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
        <link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
        <link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
        <link href="../assets/css/theme.css" rel="stylesheet">
        <!-- Fonts/Icons -->
        <link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
        <link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">

      </head>

      <body data-preloader="1">

        <div class="header">
          <div class="container">
            <div class="header-logo">
              ...
            </div>
            <div class="header-menu">
              ...
            </div>
            <div class="header-menu-extra">
              ...
            </div>
            <button class="header-toggle">
              ...
            </button>
          </div>
        </div>

        <div class="section">
          <div class="container">
            ...
          </div>
        </div>

        <footer>
          <div class="section-sm">
           <div class="container">
             ...
           </div>
          </div>
        </footer>

        <!-- ***** JAVASCRIPTS ***** -->
        <script src="../assets/plugins/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
        <script src="../assets/plugins/plugins.js"></script>
        <script src="../assets/js/functions.js"></script>

      </body>
    </html>

## SCSS

SCSS is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

"SCSS" (for "Sassy CSS") is a superset of CSS's syntax. This means that every valid CSS stylesheet is valid SCSS as well. SCSS files use the extension .scss

##### Recommended Compiler - Scout-App

We recommend you to use an application called Scout-App (v2.12.12) for converting SCSS to CSS. Scout-App can run in windows, linux and mac.

Click here to download the application.

This video demonstrates how to use Scout-App application:

## Theme Color Schemes

There are 9 theme color scheme options available. Follow the below instructions to set it up.

1. Include the path for 'theme-color-*' CSS file to the HTML head
2. Add 'theme-color-*' class to the HTML body

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <title>Mono</title>
        <!-- Favicon -->
        <link rel="shortcut icon" href="../assets/images/favicon.png">
        <!-- CSS -->
        <link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
        <link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
        <link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
        <link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
        <link href="../assets/css/theme.css" rel="stylesheet">
        <!-- Theme Color -->
        <link href="../assets/css/theme-colors/theme-color-blue.css" rel="stylesheet">
        <!-- Fonts/Icons -->
        <link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
        <link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
      </head>

      <body class="theme-color-blue preloader-theme" data-preloader="1">

        ...

## Fonts & Icons

#### Fonts

Mono uses Open Sans sans-serif, Playfair Display serif, Nunito sans-serif, Poppins sans-serif and, Outfit sans-serif fonts from Google Fonts Library. And it's included through assets/css/scss/theme.scss

theme.scss(line 12)

    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Outfit:wght@200;300;400;500;600;700;800&display=swap');

You can use the following classes to set the font family of an element:

- .font-family-primary - Open Sans sans-serif (Default font-family of the template)
- .font-family-playfair - Playfair Display serif
- .font-family-poppins - Poppins sans-serif
- .font-family-nunito - Nunito sans-serif
- .font-family-outfit - Outfit sans-serif

#### Icons

Bootstrap Icons and, FontAwesome sets are included in the template.

By default, icons will appear at 1em. And you can change the icon size by using classes:

- .icon-sm - sets icon size to 13px
- .icon-lg - sets icon size to 20px
- .icon-xl - sets icon size to 24px
- .icon-2xl - sets icon size to 28px
- .icon-3xl - sets icon size to 32px
- .icon-4xl - sets icon size to 36px
- .icon-5xl - sets icon size to 42px

You should add the size class to the parent element of an icon:

    <div class="icon-lg">
      <i class="bi bi-check"></i>
      <i class="bi bi-check"></i>
    </div>

## Preloaders

The template has 3 different Page Preloaders with various color options. You can change the preloader style by just simply changing the value number of data-preloader in <body> tag with '1'/'2'/'3'

Click here to view the live preview of page preloaders.

## GDPR - Cookie Consent

#### Setup

1. Include the path of cookie-consent.js to the end of body

        <!-- ***** JAVASCRIPTS ***** -->
        <script src="../assets/plugins/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
        <script src="../assets/plugins/plugins.js"></script>
        <script src="../assets/js/functions.js"></script>
        <script src="../assets/js/cookie-consent.js"></script>
      </body>
    </html>

2. Create and add the Cookie Consent HTML:

    <!-- GDPR - Cookie Consent -->
    <div id="cookie-consent" class="consent-hidden bg-dark-09 p-4 p-lg-5 text-center">
      <p class="font-large">This website uses cookies & third party services</p>
      <a id="accept-consent" class="button button-md button-white-2 button-rounded mt-3" href="#">Accept & Close</a>
    </div>
    <!-- end GDPR - Cookie Consent -->

Click here to view the live demo of cookie consent.

#### Cookie Expire

Cookie expires in 30 days by default, you can change it by editing the below value in cookie-consent.js

## Header

#### Sizes

You can increase the size of header by adding .header-lg or .header-xl class to the .header class element.

    <div class="header header-lg">
      <div class="container">
        <div class="header-logo">
          ..
        </div>
        <div class="header-menu">
          ...
        </div>
        <button class="header-toggle">
          <span></span>
        </button>
      </div>
    </div>

#### Background Colors

You can use the dark Header Menu by adding .header-color-dark (or .header-color-black) class to the .header class element.

    <div class="header header-color-dark">
      <div class="container">
        <div class="header-logo">
          ..
        </div>
        <div class="header-menu">
          ...
        </div>
        <button class="header-toggle">
          <span></span>
        </button>
      </div>
    </div>

#### Sticky

The position of the Header Menu can be set to static(default) or sticky. You can use them by adding .sticky or .sticky-autohide class to the .header class element.

    <div class="header sticky-autohide">
      <div class="container">
        <div class="header-logo">
          ..
        </div>
        <div class="header-menu">
          ...
        </div>
        <button class="header-toggle">
          <span></span>
        </button>
      </div>
    </div>

#### Header Menu Font 2

There are 2 font style options you can use on Header Menu. Simply add .font-2 class to the .header-menu class element to use the secondary font style.

    <div class="header">
      <div class="container">
        <div class="header-logo">
          ..
        </div>
        <div class="header-menu font-2">
          <ul class="nav">
            ..
          </ul>
        </div>
        <button class="header-toggle">
          <span></span>
        </button>
      </div>
    </div>

#### Dropdown Color

You can use dark dropdown by adding .dropdown-color-dark class to the .header-menu class element.

    <div class="header">
      <div class="container">
        <div class="header-logo">
          ..
        </div>
        <div class="header-menu dropdown-color-dark">
          ...
        </div>
        <button class="header-toggle">
          <span></span>
        </button>
      </div>
    </div>

## Portfolio

#### Portfolio Filter

Portfolio has 4 different filter styles you can choose from.

###### Filter style 1(default):

    <div class="filter">
      <ul>
        <li data-filter="all">All</li>
        <li data-filter=".category-1">First</li>
        <li data-filter=".category-2">Second</li>
        <li data-filter=".category-3">Third</li>
      </ul>
    </div>

    <div class="portfolio-masonry">
      ...
    </div>

###### Filter style 2:

    <div class="filter filter-style-2">
      <ul>
        <li data-filter="all">All</li>
        <li data-filter=".category-1">First</li>
        <li data-filter=".category-2">Second</li>
        <li data-filter=".category-3">Third</li>
      </ul>
    </div>

    <div class="portfolio-masonry">
      ...
    </div>

###### Filter style 3:

    <div class="filter filter-style-3">
      <ul>
        <li data-filter="all">All</li>
        <li data-filter=".category-1">First</li>
        <li data-filter=".category-2">Second</li>
        <li data-filter=".category-3">Third</li>
      </ul>
    </div>

    <div class="portfolio-masonry">
      ...
    </div>

###### Filter style 4:

    <div class="filter filter-style-4">
      <ul>
        <li data-filter="all">All</li>
        <li data-filter=".category-1">First</li>
        <li data-filter=".category-2">Second</li>
        <li data-filter=".category-3">Third</li>
      </ul>
    </div>

    <div class="portfolio-masonry">
      ...
    </div>

#### Portfolio Grid

Basic portfolio grid:

    <div class="row portfolio-grid g-4 hover-style-2">

      <div class="col-12 col-md-6 col-lg-4 portfolio-item category-1">
        ...
      </div>
        ...
    </div>

#### Portfolio Masonry

Since masonry doesn't work with bootstrap grid system, we've made our custom responsive 6 column system for masonry portfolio layout. Just simply add the column class(column-1 to column-6) to .portfolio-masonry element. And use .spacing-0 (or 1/2/3/4/5/6) class for setting the space between portfolio boxes.

The below example will set the columns to three equal-width:

    <div class="portfolio-masonry column-3 spacing-1 hover-style-2">

      <div class="portfolio-item category-1">
        ...
      </div>
      <div class="portfolio-item category-2">
        ...
      </div>
        ...
    </div>

## Sliders

Mono uses Owl Carousel 2 jQuery plugin to handle all the sliders of the template. It's fully responsive and it has large amount of options. You can change the default options via html data-owl-* attribute.

You should create a div with .owl-carousel class and the first divs inside of this class will be the boxes of the slider:

    <div class="owl-carousel">
      <!-- slider box 1 -->
      <div>
      ..
      </div>
      <!-- slider box 2 -->
      <div>
      ..
      </div>
      ...
    </div>

The below example shows how to create slider with 2 columns(on all screen) with navigation.

    <div class="owl-carousel" data-owl-items="2" data-owl-nav="true" data-owl-dots="false">
      <!-- slider box 1 -->
      <div>
      ..
      </div>
      <!-- slider box 2 -->
      <div>
      ..
      </div>
      ...
    </div>

The below example shows how to create responsive slider with navigation and dots. data-owl-xs, data-owl-sm, data-owl-md, data-owl-lg and data-owl-xl are for screen size and the value number is how many columns to show on that screen size.

    <div class="owl-carousel" data-owl-nav="true" data-owl-xs="1" data-owl-sm="2" data-owl-md="3" data-owl-lg="4" data-owl-xl="4">
      <!-- slider box 1 -->
      <div>
      ..
      </div>
      <!-- slider box 2 -->
      <div>
      ..
      </div>
      ...
    </div>

- data-owl-xs - For screen resolution above 0px+
- data-owl-sm - For screen resolution above 576px+
- data-owl-md - For screen resolution above 768px+
- data-owl-lg - For screen resolution above 992px+
- data-owl-xl - For screen resolution above 1200px+

#### All data-attribute options

- data-owl-items - The number of items you want to see on the screen.
- data-owl-margin - margin-right(px) on item.
- data-owl-loop - Infinity loop. Duplicate last and first items to get loop illusion.
- data-owl-center - Center item. Works well with even an odd number of items.
- data-owl-nav - Show next/prev buttons.
- data-owl-rewind - Go backwards when the boundary has reached.
- data-owl-dots - Show dots navigation.

Click here to see the live demos of Owl Carousel.

## Pie Chart

You can create a Circular Chart Bar by using .pie-chart class element. Any number, text or icon values should be wrapped inside .pie-chart-content class element.

Basic Pie Chart:

    <div class="pie-chart" data-size="110" data-percent="90" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="rgba(0, 0, 0, 0.3)">
      <div class="pie-chart-content">
        <span class="percent"></span>
      </div>
    </div>

#### data-attribute options

- data-size - Size of the pie chart in px. It will always be a square.
- data-bar-color - The color of the curcular bar. You can pass either a css valid color string like rgb, rgba hex or string colors.
- data-track-color - The color of the track for the bar, false to disable rendering.
- data-scale-color - The color of the scale lines, false to disable rendering.
- data-line-cap - Defines how the ending of the bar line looks like. Possible values are: butt, round and square.
- data-line-width - Width of the bar line in px.
- data-animate - Time in milliseconds for a eased animation of the bar growing, or false to deactivate.

Click here to see the live demos of Pie Charts.

## Google Maps

Mono uses gmaps plugin to show Google Maps. By default, the maps width is set to 100% and height is set to 0 and you can set the height of the map using classes.
You can use multiple maps on one page. And every single map should have different id's (#map1, #map2 etc.).

- gmap-xs - sets height to 300px
- gmap-sm - sets height to 350px
- gmap-md - sets height to 400px
- gmap-lg - sets height to 450px
- gmap-xl - sets height to 500px

Basic Map:

    <div id="map1" class="gmap gmap-md" data-latitude="51.513569" data-longitude="-0.123443"></div>

Click here to find your Latitude and Longitude.

In order to use Google Maps, you need to get Google API Key first. Click here to get your API Key.

Then place your API Key in 'YOUR_API_KEY' in your HTML:

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Click here to see the live examples of Google Maps.

## Contact Form

Basic Contact form:

    <div class="contact-form">
      <form method="post" id="contactform">
        <div class="row gx-3 gy-0">
          <div class="col-12 col-sm-6">
            <input type="text" id="name" name="name" placeholder="Name" required>
          </div>
          <div class="col-12 col-sm-6">
            <input type="email" id="email" name="email" placeholder="E-Mail" required>
          </div>
        </div>
        <input type="text" id="subject" name="subject" placeholder="Subject" required>
        <textarea name="message" id="message" placeholder="Message"></textarea>
        <button class="button button-lg button-outline-dark" type="submit">Send Message</button>
      </form>
      <!-- Submit result -->
      <div class="submit-result">
        <span id="success">Thank you! Your Message has been sent.</span>
        <span id="error">Something went wrong, Please try again!</span>
      </div>
    </div><!-- end contact-form -->

The template has ready to use AJAX/PHP contact form built in it. In order to recieve emails directly to your email address just simply replace your-email@example.com with your email address in assets/php/contact-form.php file.

## Retina

retina.js checks the retina activated images on the page to see if there is a high-resolution version of that image on the server. If a high-resolution variant exists, the script will swap in that image in-place.

For example, if your picture is located at "/images/my-picture.jpg" and the markup for this image looks like this:

    <img src="images/picture.jpg" data-rjs="2">

retina.js will look for a corresponding image located at "/images/my-picture@2x.jpg" when it's activated. If it finds the @2x image on your server then it will load that onto your web page, effectively transforming your picture's markup to look like this:

    <img src="images/picture@2x.jpg">

Please apply data-rjs="2" to the image you want to activate the retina.js on:

    <img src="images/picture.jpg" data-rjs="2">

## Scroll To Top

Scroll to Top button would appear at bottom right of the screen when you scroll down the page. And circle button styles can be applied to this button. This button should be wrapped inside .scrolltotop element.

Basic Scroll to Top button:

    <!-- Scroll to top button -->
    <div class="scrolltotop">
      <a class="button-circle button-circle-md button-circle-dark" href="#">
        <i class="bi bi-arrow-up"></i>
      </a>
    </div>
    <!-- end Scroll to top button -->

## Elements

Click here to see the full list of the web elements.

## Helper Classes

#### Border

HTML Class Names | Description
--- | ---
border | Equals to 'border: 1px solid;'
border-top | Equals to 'border-top: 1px solid;'
border-right | Equals to 'border-right: 1px solid;'
border-bottom | Equals to 'border-bottom: 1px solid;'
border-left | Equals to 'border-left: 1px solid;'
border-style-dotted | Equals to 'border-style: dotted;'
border-style-dashed | Equals to 'border-style: dashed;'
border-0 | Equals to 'border: 0;'
border-top-0 | Equals to 'border-top: 0;'
border-right-0 | Equals to 'border-right: 0;'
border-bottom-0 | Equals to 'border-bottom: 0;'
border-left-0 | Equals to 'border-left: 0;'

#### Text Alignment

HTML Class Names | Description
--- | ---
text-start | Equals to 'text-align: left;'
text-center | Equals to 'text-align: center;'
text-end | Equals to 'text-align: right;'

Click here to get more information about bootstrap text alignment.

#### Typography

HTML Class Names | Description
--- | ---
font-family-primary | Equals to 'font-family: 'Open Sans', sans-serif'
font-family-playfair | Equals to 'font-family: 'Playfair Display', serif'
font-family-poppins | Equals to 'font-family: 'Poppins', sans-serif'
font-family-nunito | Equals to 'font-family: 'Nunito', sans-serif'
font-family-outfit | Equals to 'font-family: 'Outfit', sans-serif'
font-small | Equals to 'font-size: 0.9em'
font-large | Equals to 'font-size: 1.063em'
fw-thin | Equals to 'font-weight: 100'
fw-lighter | Equals to 'font-weight: 200'
fw-light | Equals to 'font-weight: 300'
fw-normal | Equals to 'font-weight: 400'
fw-medium | Equals to 'font-weight: 500'
fw-semi-bold | Equals to 'font-weight: 600'
fw-bold | Equals to 'font-weight: 700'
fw-bolder | Equals to 'font-weight: 800'
fw-black | Equals to 'font-weight: 900'
letter-spacing-1 | Equals to 'letter-spacing: 1px'
letter-spacing-2 | Equals to 'letter-spacing: 2px'
letter-spacing-3 | Equals to 'letter-spacing: 3px'
letter-spacing-4 | Equals to 'letter-spacing: 4px'
line-height-100 | Equals to 'line-height: 100%'
line-height-110 | Equals to 'line-height: 110%'
line-height-120 | Equals to 'line-height: 120%'
line-height-130 | Equals to 'line-height: 130%'
line-height-140 | Equals to 'line-height: 140%'
line-height-150 | Equals to 'line-height: 150%'
line-height-160 | Equals to 'line-height: 160%'

#### Sizing

HTML Class Names | Description
--- | ---
w-25 | Equals to 'width: 25%'
w-50 | Equals to 'width: 50%'
w-75 | Equals to 'width: 75%'
w-100 | Equals to 'width: 100%'
h-25 | Equals to 'height: 25%'
h-50 | Equals to 'height: 50%'
h-75 | Equals to 'height: 75%'
h-100 | Equals to 'height: 100%'

Click here to get more information about bootstrap sizing.

## Credits

Huge thanks to all this great plugins and resources that helped to make the template great and powerful.

Term | Link
--- | ---
Appear Plugin | https://github.com/morr/jquery.appear
Easing Plugin | http://gsgd.co.uk/sandbox/jquery/easing
Bootstrap | http://getbootstrap.com
FontAwesome | http://fontawesome.io
ImagesLoaded | https://imagesloaded.desandro.com
Isotope | https://isotope.metafizzy.co
GMaps | https://hpneo.github.io/gmaps
Magnific Popup | http://dimsemenov.com/plugins/magnific-popup
Mixitup | https://github.com/patrickkunka/mixitup/
Owl Carousel | https://owlcarousel2.github.io/OwlCarousel2
Parallaxie | https://github.com/theultrasoft/Parallaxie
ScrollCue | https://prjct-samwest.github.io/scrollCue/
Swiper | https://swiperjs.com/
The Final Countdown | http://hilios.github.io/jQuery.countdown
Easy Pie Chart | https://github.com/rendro/easy-pie-chart
Typer | https://steven.codes/typerjs/
Retina | http://imulus.github.io/retinajs