Created: 05/08/2015

By: 0effortthemes.com

Thank you for your purchase! If you have any questions that you feel should have been in this document, please feel free to contact us through our Support. Thanks!

Also you'll need some knowledge of HTML, Bootstrap, CSS, jQuery to edit this theme.

Version: 1.0

Theme Overview

Coffee Theme is mainly a grocery oriented HTML5 template, but can also be used for other template purposes to serve as a foundation of your website/web page. It is based on Twitter Bootstrap.

To use the template you have to be a little familiar with HTML and CSS. If you are familiar with HTML and CSS and if you go through the HTML files, you will discover how easily you will be able to customize the template according to your needs. This documentation covers some basics to help you get started with the customization process.

File Structure

When you download the Coffee theme folder you'll see something like this 

ROOT FOLDER
+-- fonts /
¦    +-- all fonts used
+-- images /
¦    +-- all images used
+-- php /
¦    +-- config.php
¦    +-- contact.php
¦    +-- order.php
¦    +-- reservation.php
+-- scripts /
¦    +-- main.js
¦+-- vendor.js
¦    +-- vendor /
¦+-- modernizr.js
+-- styles /
	¦+-- main.css
	¦+-- vendor.css
+-- index.html
+-- blog-list.html
+-- blogDetails.html
+-- contactus.html
+-- gallery.html
+-- galleryisotope.html
+-- masonry-layout.html
+-- menu.html
+-- shopcart.html
+-- singlepage-gallery.html
+-- store.html

Home page Layouts

The main layout of the Index page template can be summarized in the following snapshot.

image Home Layout

Menu Page layout

The Menu page layout template can be summarized in the following snapshot.

image Menu Layout

Blog Page Layout

The Blog Page layout template can be summarized in the following snapshot.

image Blog List image Blog Details

Store Layout

The Store layout template can be summarized in the following snapshot.

image Store Layout image Checkout Layout

Contact Layout

The Contact layout template can be summarized in the following snapshot.

image Contact Layout

CSS Structure

CSS files used in this template are as follows:

1. vendor.css - vendor specific css. Inlcuded bootstrap and fontawesome.

2. plugins.css - third party plugins css.

3. main.css - This theme is a mobile-first, responsive design, hence this file contains mobile, tablet and desktop css codes.

Icon Usage

Fontawesome Icon Font and Bootstrap glyphicons icon used in this template. Hence the size and color of the icons can be controlled through css.

<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-vimeo"></i>

View Full List here

Font Usage

Get Google font from here google fonts.

Javascript

Sources & Credits

The images included in the templates are for demonstration purposes only. They are available at


  1. http://photodune.net/item/joyous-female-with-coffee-mug-pointing-away/5803286
  2. http://hdwallsource.com/coffee-cup-wallpaper-38720.html/coffee-cup-wallpaper-38720
  3. http://hdwallsource.com/coffee-wallpaper-16437.html/coffee-wallpaper-16437
  4. https://www.vectoropenstock.com/vectors/preview/73231/coffee-shop-doodle-logo-with-ornaments
  5. https://www.pinterest.com/pin/167477679869397288/
  6. https://www.pinterest.com/pin/318489004874901863/
  7. http://www.packagingoftheworld.com/2015/04/twinings-classic-blends-earl-greys.html
  8. https://www.pinterest.com/pin/481040803925609518/
  9. https://www.pinterest.com/pin/495114552758655662/
  10. http://www.packagingoftheworld.com/2014/12/the-adventurous-blends-of-william.html
  11. https://www.pinterest.com/pin/281756520413478347/
  12. https://www.pinterest.com/pin/547117054708275192/
  13. https://www.pinterest.com/pin/236931630371965543/
  14. http://www.thecoolhunter.net/article/detail/2278/a-collection-of-the-very-best-among-small-coffee-shop-design
  15. https://in.pinterest.com/pin/74590937553145843/
  16. http://www.vecteezy.com/vector-art/82086-free-vector-chalk-beer-badges
  17. https://www.vectoropenstock.com/vectors/preview/73231/coffee-shop-doodle-logo-with-ornaments

Thank you so much for purchasing this theme!

Regards,
0effortthemes Team