“Brownie ” by eGrappler.com

“Brownie - Responsive HTML5 Portfolio and Business Template”

Created: 22/05/2012
By: eGrappler.com

Thank you for downloading our template. If you have any questions that are beyond the scope of this help file, contact us, we will try to get back to as soon as poosible. Thank you!

Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript and Sources / Credits
  4. Contact Form

A) HTML Structure - top

Brownie is a fixed-width HTML5 template, perfect for businesses and portfolios. It has a easy-to-understnad structure.

Home Page Structure:



               Features Box

               Featured Work

               About and Services Section



General Page Structure:


               Page Title

               Contents ( with or without sidebar )



B) CSS Files and Structure - top

Brownie has two stylesheet files: style.css and ie.css


This is main CSS file for the template. It contains a generic reset snippet (Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this) and necessary styles required for the template.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.


This file contains few styles for IE only.

C) Contact Form - top

One PHP file in the package: contact.php -> we are using this for contact form.

        $your_email = 'name@domain.com'; // Your email address

        $subject = 'Email from your contact form'; // Email subject


Change name@domain.com with your email address on which you want to receive emails and change the subject if needed. Boom! form is done and visitors can contact you now through your site and all inquiries will be forwarded to the above mentioned email.

D) JavaScript and Sources / Credits - top

We used the following Jquery Plugins.

  1. jQuery and jQuery UI
  2. Quicksand
  3. PrettyPhoto
  4. FlexSlider
  5. ResponsiveSlides
  6. CSS media type/query in JS
  7. FitVids
  8. jQuery Cycle
  9. Background-Position
  10. Color animation
  11. Easing 1.3
  12. Slides

All the above scripts are combined in one script file all-in-one.js. There are also common and page specific scripts.

  1. main.js
  2. setup.js
  3. contact-form.js
  4. html5.js

Once again, thank you so much for downloading this template. As we said at the beginning, 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.


Go To Table of Contents