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.
FULL PAGE LIST:
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:
// content goes here
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:
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:
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.
1. JQuery (jquery.js)
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.
3. Bxslider (jquery.bxslider.min.js)
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.
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.
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.
8. Stellar (jquery.stellar.min.js)
Stellar provides the parallax scrolling effects in Thrive, as seen in the background of the testmonials seciton.
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.
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.
Thrive includes 4 PSD files:
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
– Ubuntu (http://www.ubuntu.com/index_asus.html)
– Proxima Nova (http://www.marksimonson.com/fonts/view/proxima-nova)
– 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.