Thrive – creative HTML template
Documentation

Getting Started

Thrive is a multipurpose creative template that will jump start your business. Impress your users with unique and complementing aesthetics, pixel-perfect layouts, filterable portfolio sections and much more. Thrive is built using the Bootstrap framework, making customization and construction of new pages very fast and easy.

MAIN FEATURES:

  • – UNIQUE SPLIT SCREEN HOME PAGE
  • – 4 HOME LAYOUTS
  • – 4 PORTFOLIO LAYOUYS, 2 SINGLE PORTFOLIO STYLES
  • – FILTERABLE PORTFOLIO WITH ISOTOPE
  • – 4 BLOG LAYOUTS
  • – 2 ABOUT STYLES
  • – 4 HEADER STYLES, 2 FOOTER STYLES
  • – ECOMMERCE READY SHOP PAGES
  • – MEGA MENU DROPDOWN
  • – 2 CONTACT LAYOUTS
  • – BOOTSTRAP 3.0 FRAMEWORK
  • – CSS3 ANIMATIONS
  • – FULLY RESPONSIVE
  • – PARALAX SCROLLING EFFECTS
  • – SHORTCODES
  • – PHOTOSHOP FILES

FULL PAGE LIST:

  • – index.html
  • – home_classic.html
  • – home_video.html
  • – home_boxed.html
  • – portfolio_fullWidthGrid.html
  • – portfolio_twoCol.html
  • – portfolio_threeCol.html
  • – portfolio_fourCol.html
  • – portfolio_single.html
  • – portfolio_single_fullWidth.html
  • – blog_classic.html
  • – blog_creative.html
  • – blog_masonry.html
  • – blog_full_width.html
  • – blog_single.html
  • – about_style1.html
  • – about_style2.html
  • – services.html
  • – left_sidebar.html
  • – right_sidebar.html
  • – coming_soon.html
  • – 404.html
  • – index_header2.html
  • – index_header3.html
  • – index_header4.html
  • – index_footer2.html
  • – shortcodes.html
  • – shop.html
  • – shop_single.html
  • – shoppingcart.html
  • – checkout.html
  • – contact.php
  • – contact_detailed.html

HTML Structure

Thrive’s HTML5 pages are broken down into logical sections using the <section> tag. Each section has it’s own
container that holds the content for that section. A few sections do not use the <section> tag because they have more semantic
HTML5 tags such as the <header> or <footer> tag.

For example, take a look at the header section:

<header>
<div class=”container”>

// content goes here

</div>
</header>

Anything that is put inside the container class will have a fixed width and be centered on the page. This is where you will want to put your content. Anything placed outside of the container will not be fixed and centered. For instance, if you wanted to put a background image that stretches the full width of the header you would apply a css style to the <header> tag (not the container).

Header background image example:

header {
background: url(‘../images/headerBg.png’);
background-size: cover;
}

Within each section container, you will notice “col-lg-x” class occurring quite frequently. This classes is used to build the fundamental building blocks of Thrive using the bootstrap framework. Col-lg-6 means that section will be 6 columns wide (out of 12).

For example, say you want a section to have three horizontal columns of content. Each content block would have to be 4 columns wide (12 divided by 3 equals 4). Take a look at the following code:

<section id= “yourSection”>
<div class = “container”>
<div class= “row”>
<div class= “col-lg-4”>
Your content here
</div>
<div class= “col-lg-4”>
Your content here
</div>
<div class= “col-lg-4”>
Your content here
</div>
</div>
</div>
</section>

CSS Structure

Thrive uses five external stylesheets total, however, you only have to worry about the main stylesheet (style.css). Unless you want to customize the look of a Jquery plugin.

At the top of the main stylesheet(style.css), there is a very simple reset, followed by the global styles. Global styles are any styles that are not specific to a certain section. This is where you define the things like the font family, color and size that will be applied to the entire site. Each section in the html files has a corresponding section in the main stylesheet where all of the elements within that section are styled. For instace, the style starts with the header section, then the sub-header sections (split and classic) and so on. The CSS sections are ordered in the same order as they are found in the html file.

If you want to customize the responsive qualities of Thrive, you will want to edit the responsive.css file. Note that a majority of Vertex’s responsive qualities are being inherited from the bootstrap framework. To customize these qualities you will have to refer to the bootstrap documentation.

Jquery

All Javascript imports and script can be found at the bottom of the HTML pages.

Thrive utilizes 10 external JavaScript files:

  • 1. jquery
  • 2. bootstrap
  • 3. bxslider
  • 4. tab (custom script)
  • 5. appear
  • 6. isotope
  • 7. knob
  • 8. stellar
  • 9. tubular
  • 10. main (custom script)

1. JQuery (jquery.js)
JQuery is a JavaScript library that reduces the amount of code required to make the site function. JQuery is required for the site to function properly.
Source: http://jquery.com/

2. Bootstrap (bootstrap.min.js)
Bootstrap is a front-end framework that enables faster and more efficient web development. Bootstrap is required for the site to function properly.
Source: http://getbootstrap.com/

3. Bxslider (jquery.bxslider.min.js)
Bxslider is a responsive jQuery content slider. This plugin is used twice in the Vertex theme: the main slider section and the testimonial section. In order to use Bxslider, you have to activate it for each instance. Scroll down in index.html to see where the bxslider has been activated (directly under the JavaScript imports). This is where you can customize the specific settings for each slider instance. To learn more about how to do this, visit the link below.
Source: http://bxslider.com/

4. Custom tab script (tabs.js)
This is a custom script written specifically for Vertex. Its purpose is to make the tab system in the “Faq” section function. It is well commented and fairly simplistic.

5. Appear (jquery.appear.js)
Appear is a script that allows Thrive to trigger elements that animate as they come into the view of the browser via scrolling.
Source: https://github.com/morr/jquery.appear

6. Isotope (jquery.isotope.min.js)
Isotope is a jquery plugin used to layout and filter items. In Thrive, it is used in the portfolio sections as well as the blog creative and blog masonry sections.
Source: http://isotope.metafizzy.co/

7. Knob (jquery.knob.js)
Knob is a script that transform HTML input elements into radial knob. This is used to display the skills in the about style 2 page.
Source: http://anthonyterrien.com/knob/

8. Stellar (jquery.stellar.min.js)
Stellar provides the parallax scrolling effects in Thrive, as seen in the background of the testmonials seciton.
Source: http://markdalgleish.com/projects/stellar.js/

9. Tubular (jquery.tubular.1.0.js)
Tubular is a jquery plugin for displaying full screen background videos from youtube. In Thrive, it is used to display the background video on
the home video page.
Source: http://www.seanmccambridge.com/tubular/

10. Main (main.js)
Main is the custom jquery script written for the entire Thrive template. The main script handles hover animations and other various jquery needs.

PSD Files

Thrive includes 4 PSD files:

  • Home Split
  • Home Classic
  • Blog Masonry
  • About Style 1

If you would like the PSD files for every page included in the Thrive template, you can purchase the full PSD package
on Themeforest at: Thrive PSD

Source & Credits

FONTS:
– Ubuntu (http://www.ubuntu.com/index_asus.html)
– Proxima Nova (http://www.marksimonson.com/fonts/view/proxima-nova)

IMAGES:
– Mark Sebastian (http://www.flickr.com/photos/markjsebastian/with/2303393275/)

We make websites that allow room for growth and customization. Have a project in mind? Get in touch with us today.

CONTACT US
2017 Rype Creative.