Documentation

GYMFIT

Thank you so much for purchasing our item.

Version: 1.0
Author: UIUX Studio

Created: 26 October 2018
Update: 11 October 2022

If you have any questions that are beyond the scope of this help file, Please feel free to Contact Us.

Installation

Follow the steps below to setup your site template:

Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
Below is the folder structure and needs to be uploaded to your website or localhost root directory:
- HTML/assets - Contains all of the assets referenced
  - HTML/css - Stylesheet files
  - HTML/images - Images files
  - HTML/js - Javacript files
  - HTML/scss - Sass files
  - HTML/vendor – All external libs.
- HTML/index.html - Homepage
You should upload all or specific HTML files as per your need.
You are good to go for adding your content now!

HTML Structure

GYMFIT follows a simple and easy to customize coding structure. Here is the sample for your reference:
The template is based on Bootstrap Framework

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

  <head>
    <!-- Your Title, Description, Stylesheets
    ============================================= -->
  </head>

  <body>
    
    <!-- HEADER START FROM HERE -->
    <header>
        <div class="container"> ...... </div>
    </header>
    <!-- HEADER END'S FROM HERE -->
    
    <!-- MAIN SECTION START FROM HERE -->
    <main> 
        
        <!-- SECTION-NAME SECTION START FROM HERE -->
        <section class="...">
            <div class="container"> ...... </div>
        </section>
        <!-- SECTION-NAME SECTION END'S FROM HERE -->

          ... <!-- OTHER SECTION -->

        <!-- SECTION-NAME SECTION START FROM HERE -->
        <section class="...">
            <div class="container"> ...... </div>
        </section>
        <!-- SECTION-NAME SECTION END'S FROM HERE -->
        
    </main>
    <!-- MAIN SECTION END'S FROM HERE -->
    
    <!-- FOOTER START FROM HERE -->
    <footer>
        <div class="container"> ...... </div>
    </footer>
    <!-- FOOTER END'S FROM HERE --> 
    
    <!-- JavaScript -->
  </body>
</html>

If you need more information, please visit bootstrap site: https://getbootstrap.com

Sass

We have added SASS .scss files in template. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - HTML/assets/scss

Open the scss/_variables.scss and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required .scss Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your app.scss File.

Theme Customization

We have include a Custom CSS File in the css Folder so that you can better handle your Customizations for New Styles or Overwriting Default Theme Styles. Simply add all your Custom CSS Codes in the css/theme-custom.css File and link it in the Document <head> after the css/stylesheet.css Linking. Also make sure that this is the Last Linked CSS File in the Document <head> so that your Custom CSS Styles are Overwritten properly.

                                      <head>
  <!-- Stylesheet ============================== -->
  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css" />
  .
  .
  .
  .
  .
  <!-- Custom Stylesheet / Main CSS File -->
  <link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css" />

  <!-- Here goes your custom.css
  ============================================= -->
  <link rel="stylesheet" type="text/css" href="assets/css/theme-custom.css" />
</head>

Logo Settings

The Logo Container can be found in the Header Container - <header>

                                        <!-- Logo --> 
<a href="index.html" title="GYMFIT">
  <img src="images/logo.svg" alt="Logo Image"/>
</a>
<!-- Logo End -->

Layout

Documentation and examples for header, navbar, footer

Header

The list of various header types & its descriptions are provided below for your reference:

Light

Header with white background Color & Dark text. See below image and code for more inforamtion.

        <!-- HEADER START FROM HERE ============================ -->
<header> 
  <!-- Navbar -->
  <nav class="primary-menu navbar navbar-expand-lg">
    <div class="container"> 
      .....
    </div>
  </nav>
  <!-- Navbar End --> 
</header>
<!-- HEADER END'S FROM HERE -->

Dark

Header with dark background & Light text. See below image and code for more inforamtion.

Add the .bg-dark and .navbar-text-light Class to the <nav> Tag to display a Dark Header.

                                              <!-- HEADER START FROM HERE ============================ -->
<header> 
  <!-- Navbar -->
  <nav class="primary-menu navbar navbar-expand-lg bg-dark navbar-text-light">
    <div class="container-fluid"> 
      .....
    </div>
  </nav>
  <!-- Navbar End --> 
</header>
<!-- HEADER END'S FROM HERE -->

Navbar

Documentation and examples for powerful responsive navigation header

Left align

Header with Navigation alligned Left. See below image and code for more inforamtion.

Add the .justify-content-left class to the element of collapse to display a align left navbar.

                                                  <div id="header-nav" class="collapse navbar-collapse justify-content-start">
  <ul class="navbar-nav">
    .......
  </ul>
</div>

Right align

Header with Navigation alligned Right. See below image and code for more inforamtion.

Add the .justify-content-end class to the element of collapse to display a align right navbar.

                                                    <div id="header-nav" class="collapse navbar-collapse justify-content-end">
  <ul class="navbar-nav">
    .......
  </ul>
</div>

Center Align

Header with Navigation alligned Center. See below image and code for more inforamtion.

Add the .justify-content-center class to the element of collapse to display a align center navbar.

                                                      <div id="header-nav" class="collapse navbar-collapse justify-content-center">
  <ul class="navbar-nav">
    .......
  </ul>
</div>

Footer

The list of various footer types & its descriptions are provided below for your reference:

Light Footer

Footer with white background Color & Dark text. See below code for more inforamtion.

                                                              <!-- FOOTER START FROM HERE -->
<footer id="footer" class="section bg-light">
  <div class="container">
    ..........
  </div>
</footer>
<!-- FOOTER START FROM HERE -->

Dark Footer

Footer with dark background color & Light text. See below code for more inforamtion.

Add the .bg-dark and .footer-text-light Class to the footer Tag to display a Dark footer.

                                                              <!-- FOOTER START FROM HERE -->
<footer id="footer" class="section bg-dark footer-text-light">
  <div class="container">
    ..........
  </div>
</footer>
<!-- FOOTER START FROM HERE -->

Content

Documentation and examples for displaying typography, code, table, image and more..

Typography

Documentation and examples for typography, headings, body text, lists, and more.

Headings

Heading	Example
`<h1>...</h1>`	h1. Heading
`<h2>...</h2>`	h2. Heading
`<h3>...</h3>`	h3. Heading
`<h4>...</h4>`	h4. Heading
`<h5>...</h5>`	h5. Heading
`<h6>...</h6>`	h6. Heading

Lead

Make a paragraph stand out by adding .lead

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

                                                                                                                                            <p class="lead">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid.
</p>

Inline Text elements

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

                                                                                                                                            <p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Code

Documentation and examples for displaying inline and multiline blocks of code

Inline code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

For example, <section> should be wrapped as inline.

        For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Code blocks

Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the .pre-scrollable class, which will set a max-height of 340px and provide a y-axis scrollbar.

For example:

                                                                    <p>Sample text here...</p>
<p>And another line of sample text here...</p>

Have to use something like:

                                                                    <pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</pre></code>

Syntax highlighter

We use Highlight Js for syntax highlight code snippet.

You can refer more information here: How to use highlight.js

Table

Documentation and examples for opt-in styling of tables.

GYMFIT is based on Bootstrap 5, so you can easily use Bootstrap's table classes to style your table. Bootstrap Documentation

Bordered

                                                                      <table class="table table-bordered">
  .......
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped

                                                                      <table class="table table-bordered table-striped">
  .......
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Note You can refer more information in Bootstrap Documentation here: Bootstrap Documentation

Image

Documentation and examples for opting images into responsive behavior and add lightweight styles to them—all via classes.

Responsive Images

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

Responsive image

                <img src="assets/images/screenshot.jpg" class="img-fluid" alt="Responsive image">

Image lightbox

Show image popup when click on image:

                <a class="popup-img" href="assets/images/screenshot.jpg">
  <img src="assets/images/screenshot-thumb.jpg" class="img-fluid img-thumbnail" alt="image">
</a>

Image Lightbox with Link

Show image popup when click on link: Click Here for Popup Image

                                                                                <a class="popup-img" href="assets/images/screenshot.jpg">Click Here for Popup Image</a>

Image lightbox with Button

Show image popup when click on button: Click Here for Popup Image

                                                                                <a class="btn btn-primary popup-img" href="assets/images/screenshot.jpg">Click Here for Popup Image</a>

Components

Setting up components is very easy. Here is the Some of shortcodes describe. also, GYMFIT is based on Bootstrap 5, so you can easily use Bootstrap's components: Bootstrap Documentation

Accordion

You can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.

See below image and code for more inforamtion.

                <div class="accordion" id="accordionDefault">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0"> <a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Accordion Title</a> </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionDefault">
      <div class="card-body">This is Accordion Content</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0"> <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Accordion Title</a> </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionDefault">
      <div class="card-body">This is Accordion Content</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0"> <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Accordion Title</a> </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionDefault">
      <div class="card-body">This is Accordion Content</div>
    </div>
  </div>
</div>

Options:

Type Class	Features	Code Example
`.accordion-alternate`	Alternate Minimal Style for the accordions.	`<div class="accordion accordion-alternate" id="accordionDefault"> ....... </div>`
`.arrow-right`	For set arrow in right side in accordions	`<div class="accordion arrow-right" id="accordionDefault"> ....... </div>`

Tabs

Default Bootstrap Nav component combined with GYMFIT for unique tabs.

See below image and code for more inforamtion.

                <ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
 <div class="tab-content my-3" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">This is Tab Content Home</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">This is Tab Content Profile</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">This is Tab Content Contact</div>
</div>

Options:

Type Class	Features	Code Example
`Basic Navs`	Basic Navs Style for the Tabs	`<ul class="nav " id="myTab" role="tablist"> ....... </ul>`
`.nav-separator`	Basic Navs Style with Separator for the Tabs	`<ul class="nav " id="myTab" role="tablist"> ....... </ul>`
`.nav-tabs`	Tabs Navs Style for the Tabs. For example - above Preview Example.	`<ul class="nav nav-tabs" id="myTab" role="tablist"> ....... </ul>`
`.nav-pills`	Pills Navs Style for the Tabs	`<ul class="nav nav-pills" id="myTab" role="tablist"> ....... </ul>`

Social Icon

Social links with different styles. See below code for more information.

                <div class="d-flex flex-column">
  <ul class="social-icons">
    <li><a data-toggle="tooltip" href="http://www.facebook.com/" target="_blank" title="" data-original-title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
    <li><a data-toggle="tooltip" href="http://www.twitter.com/" target="_blank" title="" data-original-title="Twitter"><i class="fab fa-twitter"></i></a></li>
    <li><a data-toggle="tooltip" href="http://www.google.com/" target="_blank" title="" data-original-title="Google"><i class="fab fa-google"></i></a></li>
    <li><a data-toggle="tooltip" href="http://www.linkedin.com/" target="_blank" title="" data-original-title="Linkedin"><i class="fab fa-linkedin-in"></i></a></li>
    <li><a data-toggle="tooltip" href="http://www.youtube.com/" target="_blank" title="" data-original-title="Youtube"><i class="fab fa-youtube"></i></a></li>
    <li><a data-toggle="tooltip" href="http://www.instagram.com/" target="_blank" title="" data-original-title="Instagram"><i class="fab fa-instagram"></i></a></li>
  </ul>
</div>

Options:

Type Class	Features	Code Example
Default (Dark)	Default Social Icon with Dark Color	`<ul class="social-icons"> ....... </ul>`
`.social-icons-light`	Social Icon with Light Color	`<ul class="social-icons social-icons-light"> ....... </ul>`
`.social-icons-muted`	Social Icon with Muted Color	`<ul class="social-icons social-icons-muted"> ....... </ul>`
`.social-icons-sm`	Social Icon with Small Icon Size	`<ul class="social-icons social-icons-sm"> ....... </ul>`
`.social-icons-lg`	Social Icon with Large Icon Size	`<ul class="social-icons social-icons-lg"> ....... </ul>`

Social Icons added as a Image. See below code for more information.

You can manage size using width or Height

                <div class="d-flex flex-column">
  <ul class="social-icons">
    <li><a data-toggle="tooltip" href="http://www.facebook.com/" target="_blank" title="" data-original-title="Facebook"><img src="images/icons/facebook.svg" alt="Facebook Icon"/></li>
    <li><a data-toggle="tooltip" href="http://www.twitter.com/" target="_blank" title="" data-original-title="Twitter"><img src="images/icons/twitter.svg" alt="Twitter Icon"/></li>
    <li><a data-toggle="tooltip" href="http://www.google.com/" target="_blank" title="" data-original-title="Google"><img src="images/icons/google.svg" alt="Google Icon"/></li>
    <li><a data-toggle="tooltip" href="http://www.linkedin.com/" target="_blank" title="" data-original-title="Linkedin"><img src="images/icons/linkedin.svg" alt="Linkedin Icon"/></li>
    <li><a data-toggle="tooltip" href="http://www.youtube.com/" target="_blank" title="" data-original-title="Youtube"><img src="images/icons/youtube.svg" alt="Youtube Icon"/></li>
    <li><a data-toggle="tooltip" href="http://www.instagram.com/" target="_blank" title="" data-original-title="Instagram"><img src="images/icons/instagram.svg" alt="Instagram Icon"/></li>
  </ul>
</div>

Helper Classes

We have created some really useful helper classes for you. Here are a few of them. also, You can refer other default bootstrap helper classes here: Bootstrap Documentation

Font weight and italics:

.fw-bold - For font weight of 700.
.fw-bolder - For font weight bolder.
.fw-normal - For font weight of 400.
.fw-light - For font weight of 300.
.fw-lighter - For font weight of lighter.
.fst-italic - For font weight of italic.
.fst-normal - For font weight of normal.

Background Color:

.bg-transparent - For background color of transparent
.bg-light - For background color of light gray
bg-primary - For background color of primary
bg-secondary - For background color of secondary
bg-success - For background color of success
bg-danger - For background color of danger
bg-warning - For background color of warning
bg-info - For background color of info
bg-dark - For background color of dark
bg-body - For background color of white
bg-white - For background color of white

Box Shadow

.shadow-none - For No shadow to elements with box-shadow utilities.
.shadow-sm - For Small shadow to elements with box-shadow utilities.
.shadow - For Regular shadow to elements with box-shadow utilities.
.shadow-md - For medium light shadows to elements with box-shadow utilities.
.shadow-lg - For Larger shadows to elements with box-shadow utilities.

Opacity

.opacity-25 - For 25% opacity.
.opacity-50 - For 50% opacity.
.opacity-75 - For 75% opacity.
.opacity-100 - For 100% opacity.

Border Radius

.rounded-top-0 - No Border Radius for top.
.rounded-bottom-0 - No Border Radius for bottom.
.rounded-left-0 - No Border Radius for left.
.rounded-right-0 - No Border Radius for right.

Borders, Sizing, Spacing (margin & padding) and also much more....

You can refer for use other default bootstrap helper classes here - https://getbootstrap.com/docs/5.2/utilities/

Source & Credits

Images:

Fonts:

Scripts:

jQuery - http://www.jquery.com
Bootstrap 5 - http://getbootstrap.com
Highlight JS - https://highlightjs.org
jQuery easing - http://gsgd.co.uk/sandbox/jquery/easing
Magnific Popup - http://dimsemenov.com/plugins/magnific-popup
Swiper JS - https://swiperjs.com
Owl Carousel Slider JS - https://owlcarousel2.github.io/OwlCarousel2
Slick Slider JS - https://kenwheeler.github.io/slick
Progressbar JS - https://jqueryui.com/progressbar
Count Down JS - https://countdownjs.org
WOW Animation JS - https://wowjs.uk
Lightbox JS - https://getuikit.com/docs/lightbox

CSS:

Bootstrap 5 - http://getbootstrap.com
Progressbar CSS - https://jqueryui.com/progressbar
Animation Stylesheet - https://animate.style
Swiper Slider Stylesheet - https://swiperjs.com
Owl Carousel Slider CSS - https://owlcarousel2.github.io/OwlCarousel2
Slick Slider CSS - https://kenwheeler.github.io/slick
Magnific Popup CSS - http://dimsemenov.com/plugins/magnific-popup
WOW Animation CSS - https://wowjs.uk
Lightbox CSS - https://getuikit.com/docs/lightbox

Support

If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page

We are located in GMT +5:30 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

Don’t forget to Rate this template

Please Add your Review (Opinion) for Our template. It would be a great support for us.
Go to your Themeforest Profile > Downloads Tab > & then You can Rate & Review for our template.
Thank You.

More Templates

Checkout Our Below Premium Templates

Documentation

GYMFIT

Installation

HTML Structure

Sass

Theme Customization

Logo Settings

Layout

Header

Light

Dark

Navbar

Left align

Right align

Center Align

Footer

Light Footer

Dark Footer

Content

Typography

Headings

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading

h6. Heading

Lead

Inline Text elements

Code

Inline code

Code blocks

Syntax highlighter

Table

Bordered

Striped

Image

Responsive Images

Image lightbox

Image Lightbox with Link

Image lightbox with Button

Components

Accordion

Options:

Tabs

Options:

Social Icon

Options:

Helper Classes

Text Size:

Font weight and italics:

Background Color:

Box Shadow

Opacity

Border Radius

Borders, Sizing, Spacing (margin & padding) and also much more....

Source & Credits

Images:

Fonts:

Scripts:

CSS:

Support

Don’t forget to Rate this template

More Templates

Logisticscube - Personal Portfolio Template

Moneychief - HTML Template

NFT BLock - HTML Template

Niyukti - HTML Template

Panacea - HTML Template

Realabode - HTML Template