code-Mad

Site Templates - Drench - A Responsive HTML5 Creative Template | ThemeForest

Drench A Responsive HTML5 Creative Template Creative Site Templates his title this type of SiteTemplates/Creative This time I will review,made by ThemeTile, SiteTemplates/Creative is sold at a price of $12 in themeforest.

agency // css3 // fluid // fonts // gallery // google // html5 // icons // jquery // mobile // multiple-columns // portfolio // responsive //

Created	4 May 12
Last Update	5 May 12
Columns	4+
Compatible Browsers	IE7, IE8, IE9, Firefox, Safari, Chrome
Documentation	Some Help
Layout	Liquid
ThemeForest Files Included	HTML Files, CSS Files, JS Files

Introducing Drench

Drench brand new, exclusive HTML5 template. This website is perfect for any business’ or creative agency that want a stylish way of showing off their projects.

About Drench

What’s Included:

• HTML Files
• LESS /CSS Files
• JS/jQuery Files
• Pre built columns
• Flex Slider
• Isotope

Customising Drench:

Drench is one of easiest themes to customise. To allow this we’ve used LESS .css to make it as is as possible for you to edit. The file that lets you do this is customize.less. In here you’ll find self explanatory code to let you change the maximum width of your site as well as the base colour!

The best part of this is that you only need to change one colour and it will do it for the whole site! For example, the code you have at the moment looks like so:

  @main-color: rgb(204, 61, 0);  

but if we want to change that to a nice blue we could turn it into this:

  @main-color: rgb(15, 60, 79);  

It’s really as easy as that. Everything else will change automatically!

Columns Package

Drench comes with a pre built columns package to easily allow you to create your own columned pages. The different classes to use are all stored in the css.less file. To use these columns you just have to add the right classes. For example if I wanted to create a new page with two columns, one thin and one wide I’d just have to add this:

  <p class="clearfix"> <p class="col-1"> Thin Column </p> <p class="col-3 no-right"> Wide Column </p> </p>  

This will automatically give you flexible columns that will resize with page resizes. Remember you do have to make sure these are wrapped in a p width the class .clearfix to make sure it clears properly. And also that the p that will be on the right hand size needs to have the class .no-right to make sure there is no right margin.

Related produck This user:ThemeTile

More items by ThemeTile