Rawa Template (Html5 & CSS3) Documentation

Table of Contents

1. Html
2. CSS
3. Javascript (jquery)
4. PHP (contact form)
5. Sources and Credits

Note: The theme does not work locally with Google Chrome because of the ajax function. Other Browsers like Firefox, Safari, Opera or Internet Explorer should have no problems to run it locally.
Locally means, that your opened the index.html from your hard drive. If you're running the theme from a Server, it will be fine.

Files

You should find 10 HTML files & 2 PHP files

1. index.html
2. about.html
3. service.html
4. contact.html
5. blog-post01.html
6. blog-post02.html
7. blog-post03.html
8. portfolio-work01.html
9. portfolio-work02.html
10. portfolio-work03.html
11. contact_send.html
12. check-example.html

The index.html is the most important file. All other files are based by the index. The index includes all styles, javascripts, ...
All the other pages will be loaded into this index.html. This means that all other files are just html code with NO [html],[head],[body] needed. Take a look at theses files and you will see what i mean. Of course you can make a standard html files out of these files with Doctype, and all other default tags but it won't have any impact!

If you want to create new files, just create a new files with "minimum" (take a look at the files) the following tags:
[div id="YOUR CUSTOM ID" class="pageloader_inner wrapper clearfix"] ... THIS CONTENT WILL BE LOADED ... [/div]

Use of classes or id's

The following classes and Id's are general names with general features

• #sidebar -> this class is used when you use a sidebar. MUST BE in combination width .left_float or .right_float
• #maincontent -> when you use a sidebar use also use this id for the main content. MUST BE in combination width .left_float or .right_float


• .wrapper -> wraps the element to the main with (ex. 900px)
• .clearfix -> use "clearfix" for all div-tags which contains any floating element (except [p])
• .sidebar_section -> use this class for your different sidebar_sections
• .left_float OR .right_float -> float use for any element
• .seperator -> only for elements which are in [article] - adds the sperator to the top of the element
• .add_padding -> for those tags which should have a padding right and left


• .color -> only for the ANCHOR tags | font will be colored


• .img_holder -> wrap all your img-tags which uses an anchor-tag within a div-tag with this class. Without this wrapping the jquery does not animate
• .loadcontent -> only for the ANCHOR tags - use this class if this is an intern link to load content

Menu

You can add, delete or change the menu to your needs. Just make sure to use the 'rel' attribute AND the 'loadcontent' class.
The 'rel' attributes adds a hash to the url when clicking.
The 'rel' can be customized. I used the name of the page, but you can write what ever you want.

Masonry (isotope)

Create as much items as you wants, and use it the following way

Explanation

• .masonry_item -> this class is needed to declare a masonry_item
• .entry -> for the css-style of the items
• .post -> this is the name for the filter attribute

All the masonry_items will be wrapped into a masonry ID

Filter

The filter is part of the isotope script

All filter anchors needs a 'data-option-value' attribute with the correct filter name (example .post or .work or .print)

Load content

For any anchor-tag which should load content into #pageloader tag, be sure to use the classname "loadcontent" with a 'rel' and a correct 'href' attribute
rel attribute must be unique

Contact Form

First of all you must enter a absolute path for the target!
Example: http://www.yoursitename.com/contact_send.php (No relative path)

If you want to add new fields for the contact form, go to the contact.html
For each form element there is a label and the field type wrapped into a div (That's importatnt for the validation). Give a class "req" to the label if this is a requiered field. (the label is hidden in the css)
Name and Class of the input type MUST be the same.
value is the name of the field (label name). Please take uppercase for a nice layout.
Onfocus & Onfocus are javascript rules. Just change the Names (same as value).

You will find 3 hidden fields

If you've added a new field, you need to add the name of this field into the value of name="fields".
Write the recepient email into the value of name="sendto" and choose a Subject name

Important: You just can use 1 form per page/post.

Check if Page is called directly

If you would open the contact.html (or other) directly you would see the content without any styling whch is very ugly.
To check if a page is called directly you need to transform every page into a .php
After this take the code snippet from check-example.php.

Change YOURPAGENAME into the right name. It's the same name that will be shown when you clicked opend the page from the index.html.
In fact it's the "rel" name from the link which is in the index.html.
Example: ...index.html#contact OR ...index.html#Reprehenderit in velit

You should find the following css files

1. fonts.css -> include the colaborate font
2. style.css -> contains all of the specific stylings for the page including the reset styles
3. isotope.css -> contains css transformations for the isotope script
4. mqueries.css -> contains the mediaqueries for being responsive

mqueries.css

On the first part of the mediaqueries you'll find all rules for the tablet-devices.

On the second part of the mediaqueries you'll find all rules for smartphones.

The index.html includes 5 javascript files

1. jquery-1.7.1.min.js -> jquery library
2. jquery.modernizr.min.js -> modernizr script
3. jquery.isotope.min.js -> isotope script
4. easing.js -> easing script
5. loader.js -> contains the loader script
6. script.js -> contains some general actions and initialise the plugins such as isotope

script.js and loader.js

These are the only javascript files which can be modified tou your needs.
You'll find the initialising of the isotope, hover-effect,... Just set the settings to your needs.

Adding new scripts

If you want to add new/other javascript you're used to include the script into the wanted html file and to initialise the script by "$(document).ready(function() { ... }". But this causes problems when you want to initialise scripts within the loaded area. That's "normal" beacause the script is only called by document.ready. And in this case new content has been loaded and the script is not applying to the new content.

Therefore we have the "script.js". In fact, this file has a function "initialise" and this function is called on document.ready AND on each new content load. So all called scripts need to be wrote into this function. Take a look at the script.js and you will understand.

Steps to add new script

1. If you have a plugin script to include, include this into the index.html (like jquery.isotope.js, easing.js, ...)
2. Call this script in the script.js

Some rules to keep in mind The function initialise has a paramater "content". When the function is called, we know which content we are in (body or #pageloader). We can now target where to initialise the script.

When the document is ready I call the hover state for the .img_holder. But when new content is loaded I recall this action but only for the .img_holder which are in #pagecontent. Without $(content + '... the action would always be applied on a new content load. This would caus problems for the elements which are always visible (the index.html).

There is one php file for the contact form:
contact_send.php
You just need to do changes if you want to change the confirmation message or to style your email.

I used some scripts, fonts and images:

1. jQuery from John Resig
2. Modernizr from Modernizr
3. Isotope from David DeSandro
4. Easing from George Smith