Created: 17/06/2013
By: OTWthemes
Email: use my ThemeForest profile page
Thank you for purchasing our item. If you have any questions that are beyond the scope of this help file, please contact us via the contact form on our profile page - here.
Thanks so much!
This template is based on a very powerful and still very flexible grid system. The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns; columns create the actual structure. For layouts to work properly, always put your page content inside a row and a column.
Two grid systems are available - one for large screens, one for mobile devices. The desktop grid is 24 columns to give maximum flexibility - allows division by 2, 3, 4, 6, 8, etc. The mobile grid is based on 6 columns - allows division by 2, 3.
The grid. Here is an example of 3 columns:
<div class="otw-row">
<div class="otw-eight otw-columns"><p>Column 1/3</p></div>
<div class="otw-eight otw-columns"><p>Column 1/3</p></div>
<div class="otw-eight otw-columns"><p>Column 1/3</p></div>
</div>
The mobile grid
For mobiles by default the grid will make everything in one column. If you want to have more control we have made available a mobile grid too. It is based on 6 columns - allows division by 2, 3. The mobile grid has similar classes structure
.mobile-one
.mobile-two
.mobile-three
.mobile-four
.mobile-five
.mobile-six
Block grids
These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly. Block grids are made from a ul.block-grid with #-up styles chained to it.
By default, these blocks will stay in their N-up configuration on mobile devices, but you can add a class of "mobile" to have them reshuffle on smart phones into one element per line, just like the grid. If you want to use a different layout for mobile, say .five-up for large screens and .three-up for small devices, you can simply use classes like, .mobile-three-up.
Example Six-up / Two-up Mobile. This will display in 6 columns and in mobiles it will be in two columns:
<ul class="block-grid six-up mobile-two-up">
<li>Six-up element</li>
<li>Six-up element</li>
<li>Six-up element</li>
<li>Six-up element</li>
<li>Six-up element</li>
<li>Six-up element</li>
</ul>
The template comes in 12 easy to set up skins.
Black, Blue and Green
The three main color skins are Black, Blue and Green. Each skin has its own folder with CSS and specific images used in the design:
Lots of ready to use pages and examples:
Lots of widgets and customization options. Check the Widgets page under Features on the demo site.
The logos in clients widget use svg filter for Firefox since there is no CSS filter for Forefox. This makes the logos a little blurry when they are not hovered. If you don't like that effect and you'd like to remove it you can remove that svg filter for Firefox only. In .otw-sc-clients img { } you need to remove filter: url("../../images/desaturate.svg#greyscale");
The template comes with two sliders.
12 sliders examples are included in the download package. Save time and start working on one of them.
The files for both sliders are located in folder named sliders. You will find there two folders for each slider. One with the original name containing the original code for the slider and another one -custom which includes all custom styles. If you want to modify the styles for a slider we recommend you use this second folder so you can keep the original clean of custom code.
Two types of icons
Includes classes for both types and a big set of Font Icons.
Font icons are located in a folder named Icons. In there you will find two sets of fonts icons - foundation social set and foundation general set.
For image icons you can use your own image icon sets.
CSS files are located in a folder named stylesheets. All css files are documented.
Most of the javascripts that we have used in this template are located in a folder named javascript.
In the PSD.zip we have included all files necessary to produce the corresponding template styles for all color schemes. All PSD files are layered, organized in groups and properly named.
This template uses popular libraries and scripts. You can refer to any of the libraries documentation for more information and any customization you might like to do.
Foundation framework - http://foundation.zurb.com/
HTML5 Shiv - http://code.google.com/p/html5shiv/
jQuery - http://jquery.com/
jQuery UI - http://jqueryui.com/
Footable - https://github.com/bradvin/FooTable
Flex slider - http://www.woothemes.com/flexslider/
Slider Revolution - http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
Tinynav - http://tinynav.viljamis.com/
Jquery animate shadow - http://www.bitstorm.org/jquery/shadow-animation/
Quicksand - http://razorjack.net/quicksand/
Fonts
Open Sans, Open Sans Condensed - http://www.google.com/webfonts
Images
http://creattica.com/creatives/visio/114041
http://creattica.com/creatives/wilsonkhan/229981
http://creattica.com/creatives/rigo-ortiz/28129
http://creattica.com/creatives/timagoofy/229573
http://creattica.com/creatives/matt-edwards/212435
http://creattica.com/creatives/cragi/67741
http://creattica.com/creatives/m-pire/27745
http://creattica.com/creatives/lemongraphic/67495
http://creattica.com/creatives/ladfree/221192
http://creattica.com/creatives/print-grain/22760
http://creattica.com/creatives/sergio-mereces/225071
http://creattica.com/creatives/moey/33095
http://photodune.net/item/business-development-hands-holding-seedling-in-a-group/202925?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Yuri_Arcurs
http://photodune.net/item/office/369552?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Pressmaster
http://photodune.net/item/smiling-cute-business-woman-with-colleagues-at-the-back/202687?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Yuri_Arcurs
http://photodune.net/item/smart-business-man-with-a-laptop-and-colleagues-at-the-back/202599?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Yuri_Arcurs
http://photodune.net/item/city-skyline/1011301?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=magicinfoto
http://photodune.net/item/businesswoman-with-cloud-computing/683504?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=posterized
http://photodune.net/item/nature/2862703?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=VIPDesignUSA
http://photodune.net/item/nature/2908765?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Pakhnyushchyy
http://photodune.net/item/nature/2868525?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Klimov
http://photodune.net/item/nature/2908326?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Pakhnyushchyy
http://photodune.net/item/office-worker/2612846?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Pressmaster
http://photodune.net/item/girl-with-an-attractive-smile/645011?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Yuri_Arcurs
http://photodune.net/item/woman-studying-outdoors/451049?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=andresrphotos
http://photodune.net/item/businessman/2559441?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Phovoir
Logos
http://creattica.com/creatives/mauro-bertolino/124693
http://creattica.com/creatives/peter-duong/69047
envato logos
Icons
http://www.iconsweets2.com/
http://bijou.im/
http://picons.me/
http://www.iconfinder.com/icondetails/17834/128/alert_error_exclamation_mistake_warning_icon
http://www.iconfinder.com/icondetails/58508/32/checkbox_full_tick_icon
http://www.iconfinder.com/icondetails/58596/32/note_pinned_icon
More information, in-line documentation and examples could be found at the demo site.
If you have any questions, please contact us via the contact form on our profile page - here.
Once again, thank you so much for purchasing this template. If you like it please consider rating it as a way of supporting consistent feature improvements. 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. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
OTWthemes