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:
<div class="clearfix">
<div class="col-1">
Thin Column
</div>
<div class="col-3 no-right">
Wide Column
</div>
</div>
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 div width the class .clearfix to make sure it clears properly. And also that the div that will be on the right hand size needs to have the class .no-right to make sure there is no right margin.