Reload

Clean, Responsive & Retina Template

Hello world, we are Greatives! First of all we would like to thank you for purchasing our Template! If you have any questions that are beyond the scope of this help file, please feel free to e-mail us or create a new topic in our forum. Thanks so much!

File Structure

Within the download you will find the following file structure. When you open the folder of the Reload theme, you will see something like this:

Reload

+-- css/
¦   +-- elements.css
¦   +-- basic.css
¦   +-- responsive.css
¦   +-- ... other styles
+-- fontawesome/
¦   +-- ... all used fontawesome
+-- js/
¦   +-- jquery-1.9.1.min.js
¦   +-- main.js
¦   +-- ... all used scripts
L-- images/
¦   +-- ... all used images
L-- audio/
¦   +-- ... all used audio files
L-- contact.html
L-- about-us.html
L-- ...
L-- index.html
L-- ... the other html files

HTML Structure

Reload is built on it's own responsive grid system. The syntax is simple and it's effective cross browser.
 
Here is the general structure.
 
<!DOCTYPE html>

<html class="grve-responsive">

<head>

  <title>Reload | Responsive Multi-Purpose HTML Template</title>
  <meta name="keywords" content="Fully Responsive Template" />
  <meta name="description" content="Reload - Responsive Multi-Purpose HTML Template">
  <meta name="author" content="greatives.eu">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <!-- Favicon -->
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

  <!-- Styles -->
  <!-- Insert here all CSS links -->

  <!-- Google Fonts -->
  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700' rel='stylesheet' type='text/css'>

</head>

<body>

  <div id="grve-wrapper">

    <!-- FEATURE SECTION
    ============================================= -->

    <section id="grve-feature-section" class="grve-fullscreen"> 
      <div class="grve-feature-element grve-slider">
        <!-- Some elements with the height you wish (100% for fullwidth - this section is optional) -->
      </div>
    </section>

    <!-- END FEATURE SECTION
    ============================================= -->

    <!-- MAIN BODY
    ============================================= -->
      <div id="grve-theme-body">
        <!-- HEADER 
        ============================================= -->
        <header id="grve-header" data-height="90">
          <div class="grve-container">
            <h1 class="grve-logo">
              <a href="index.html"><img src="images/logos/logo.png" alt="Reload"></a>
            </h1>
            <div class="grve-page-title">
              <h2 class="grve-title">WELCOME</h2>
              <div class="grve-sub-title"><span>Let Us Introduce Ourselves</span></div>
            </div>
            <ul class="grve-header-options">
              <li><a class="grve-header-contact-btn grve-header-options-popup" href="#grve-contact-modal">
                <img src="images/graphics/contact-button.svg" alt="Main Menu">
              </a></li>
              <li><a class="grve-header-search-btn grve-header-options-popup" href="#grve-search-modal">
                <img src="images/graphics/search-button.svg" alt="Main Menu">
              </a></li>
              <li><a class="grve-header-share-btn grve-header-options-popup" href="#grve-share-modal">
                <img src="images/graphics/share-button.svg" alt="Main Menu">
              </a></li>
              <li><a href="#" class="grve-menu-btn">
                <img src="images/graphics/menu-button.svg" alt="Main Menu">
              </a></li>
            </ul>
          </div>

          <div id="grve-share-modal" class="grve-header-modal mfp-hide">
            <div class="grve-social">
              <ul>
                <li><a href="#"><i class="icon-facebook"></i></a></li>
                <li><a href="#"><i class="icon-twitter"></i></a></li>
                <li><a href="#"><i class="icon-linkedin-sign"></i></a></li>
                <li><a href="#"><i class="icon-flickr"></i></a></li>
              </ul>
            </div>
          </div>

          <div id="grve-search-modal" class="grve-header-modal mfp-hide">
            <form class="grve-search">
              <input type="submit" value="&#xf002;" class="grve-search-btn">
              <input id="grve-search" type="text" value="" placeholder="Search for...">
            </form>
          </div>

          <div id="grve-contact-modal" class="grve-header-modal mfp-hide">

            <h2 class="grve-light-text grve-highlight">Drop us a line...</h2>

            <!-- Form -->
            <form class="grve-element grve-form">
              <div class="grve-form-input">
                <i class="icon-user"></i>
                <input type="text" name="name" placeholder="Name (required)">
              </div>
              <div class="grve-form-input">
                <i class="icon-envelope"></i>
                <input type="text" name="email" placeholder="E-mail (required)">
              </div>
              <div class="grve-form-input">
                <i class="icon-pencil"></i>
                <input type="text" name="subject" placeholder="Subject">
              </div>
              <div class="grve-form-textarea">
                <textarea name="message"></textarea>
              </div>
              <a class="grve-btn grve-primary grve-btn-medium grve-form-button">Send Message</a>
              <div class="grve-form-result"></div>
            </form>
            <!-- End Form -->

          </div>

        </header>
        <!-- END HEADER 
        ============================================= -->

        <!-- MAIN NAVIGATION 
        ============================================= -->

        <nav class="grve-main-menu">
          <div class="grve-close-btn"></div>
          <ul>
            <!-- Main Menu -->
          </ul>
        </nav>

        <!-- END MAIN NAVIGATION
        ============================================= -->

        <!-- CONTENT
        ============================================= -->

        <section class="grve-section">
          <div class="grve-container">
            <!-- Content -->
            <div class="grve-main-content">
              <!-- Main Content and Sections go here -->
            </div>
            <!-- End Content -->
          </div>
        </section>
        <!-- END CONTENT
        ============================================= -->

        <!-- FOOTER
        ============================================= -->

        <footer class="grve-section">
          <div class="grve-container">
            <!--Footer Content goes here-->
          </div>

          <section class="grve-footer-bar">
            <div class="grve-container">
              <!--Copyright Content goes here-->
            </div>
          </section>
        </footer>
        <!-- END FOOTER
        ============================================= -->

      </div>
      <!-- END MAIN BODY
      ============================================= -->

  </div>

  <!-- JS Libraries -->
  <!-- Insert here all JS links -->

</body>
</html>

Responsive Grid & Layouts

You can see our responsive grid row structure below. You can use human-readable class names like .grve-column-1-2 or .grve-column-1-3.

<!-- Row -->

<div class="grve-row">
<!-- Column 1/2 -->
  <div class="grve-column-1-2">
    <!--Content goes here-->
  </div>
<!-- End Column 1/2 --> 
<!-- Column 1/2 -->
  <div class="grve-column-1-2"> 
    <!--Content goes here-->
  </div>
<!-- End Column 1/2 -->
</div>

<!-- End Row -->

 

Sample Elements

Below you can have sample code blocks for various elements.

1. Call Out Element

<!-- Callout -->
<div class="grve-element grve-callout">
  <a class="grve-btn grve-primary grve-btn-small" href="#">BUTTON</a>
  <h3 class="grve-callout-title">CALLOUT TITLE</h3>
<p>CALLOUT CONTENT</p>
</div>
<!-- End Callout -->

2. Image-Text Element

<!-- Image Text -->

<div class="grve-element grve-image-text">
  <!-- Image -->
  <div class="grve-image">
    <img src="images/image-430x300.jpg" alt="image">
  </div>
  <!-- End Image -->
  <!-- Content -->
  <div class="grve-content">
    IMAGE TEXT CONTENT
   <!-- Button -->
   <div class="clear"></div>
   <a class="grve-btn grve-primary grve-btn-small" href="#">BUTTON</a>
   <!-- End Button -->
  </div>
<!-- End Content -->
</div>

<!-- End Image Text -->

3. Sections

<!-- Section -->
<section class="grve-section grve-light-color grve-padding-top-40 grve-padding-bottom-10 grve-color-section-3 grve-overlay-fade"> 

  <div class="grve-primary-overlay grve-overlay-10"></div>

  <!-- Callout -->
  <div class="grve-element grve-callout grve-style-2">
    <div class="grve-callout-content">
      <span class="grve-callout-title">How are we doing? We'd love your Feedback!</span>
      <a class="grve-btn grve-btn-line grve-btn-small grve-btn-advanced" href="#" data-hover="Right Now"><span>Drop us a line</span></a>
    </div>
  </div>
  <!-- End Callout -->

</section>
<!-- End Section -->

 

Important extra class for elements (not for all) is the ".grve-fullwidth-element". With this class you can have wide(stretched) elements.

 

4. Gap Element

<!-- Gap -->
<div class="grve-gap"></div>
<!-- End Gap -->

Gap with extra class ".grve-margin-x" , where x is the number (in pixels) among 0,10,20,30,40,50 pixels .

For example :

<!-- Gap -->
<div class="grve-gap grve-margin-10"></div>
<!-- End Gap -->
Keep in mind that you can use the class ".grve-margin-x" in various elements (sections,dividers,columns, etc)

Feature Styles

You can select among 2 different styles for your Feature (Header) Section. Keep in mind that Feature Section is optional and you set Slider, Image and Google Map (full-screen or with specific height).

 

Feature Style 1 --Full Screen Feature

<!-- FEATURE SECTION
============================================= -->
<section id="grve-feature-section" class="grve-fullscreen">
  <div class="grve-feature-element grve-slider">
    <!-- Some elements with the height you wish (100% for fullwidth - this section is optional) -->
  </div>
</section>
<!-- END FEATURE SECTION
============================================= -->
 
Feature Style 2 -- Specific Feature Height
<!-- FEATURE SECTION
============================================= -->
<section id="grve-feature-section" data-height="350">
    <div class="grve-secondary-overlay grve-pattern grve-overlay-20"></div>
    <div class="grve-bg-image" style="background-image: url(images/sections/section-1.jpg);"></div>
</section>
<!-- END FEATURE SECTION
============================================= -->
 

 

CSS Structure

CSS files used in this template:

  1. basic.css — this is the basic css file It contains css reset, typography, text aligns and many more.
  2. grid.css — contains the grid css.
  3. animate.css — contains styles for CSS3 animation.
  4. elements.css — contains the basic styles for elements, widgets.
  5. responsive.css — styles for responsive grid layout.
  6. grve-slider.css — styles the flex slider
  7. other plugins css

Font Icons

Reload uses Font Awesome version 3.2.1.  Font Awesome is a @font-face iconset so you can change size and color of these icons by CSS.

For more information , please visit : http://fortawesome.github.io/Font-Awesome/3.2.1/ 

<i class="icon-search"></i>
<i class="icon-facebook"></i>
<i class="icon-youtube"></i>
<i class="icon-twitter"></i>
...

Font Usage

Reload HTML template uses Google Fonts.

Specifically, Source Sans Pro used for the headers and for the main content.

These fonts are embedded into HTML pages with this code:

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700' rel='stylesheet' type='text/css'>

Animations

You have the possibility to animate any element on any page. The only thing you have to do is to add the class "grve-animated-item" to the element you like to animate and the type of the animation you prefer.

List of animations :

FadeIn -- fadeIn animation
FadeInUp -- fadeIn from up
FadeInDown -- fadeIn from down
FadeInLeft -- fadeIn from left
FadeInRight -- fadeIn from right
Pulse -- pulse animation
 
You can also use delay of appearance by adding class data-delay="number of millisecond"
Here is an example for the element Icon-Box with a fadeIn animation with 600 msecond delay.
 
<!-- Icon Box -->

<div class="grve-element grve-icon-box grve-align-center grve-animated-item fadeIn" data-delay="1200">
  <div class="grve-icon"><img src="images/icons/primary/pen.png" alt="icon"></div>
    <div class="grve-box-content">
      <a href="#"><h2 class="grve-box-title">Clean Design</h2></a>
      <p>Id eos prima sanctus. His ea praesent periculis laboramus, sit erant sententiae          at, mei ipsum tamquam inciderint no.</p>
    </div>
</div>

<!-- End Icon Box -->

 

JavaScript

This template imports the following Javascript files.

<!-- JS Libraries -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/afterresize.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/jquery.carouFredSel-6.2.1.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/retina-1.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverdir.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/jquery.gmap.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.parallax.min.js"></script>
<script src="js/jquery.transit.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/main.js"></script>

Sources & Credits

The images included in preview are for demonstration purposes only. Most of them are used from http://www.flickr.com/photos/markjsebastian/  , http://picjumbo.com/ , http://unsplash.com/  . 
In downloaded product folder placeholders are used instead of images.
 
Special thanks to : 
 
 
Once again, thank you so much for purchasing this template. As we said at the beginning, we'd be glad to help you if you have any questions relating to this template. No guarantees, but we'll do our best to assist. 
 
Regards,
Greatives Team