How To Use The Toolkit

The folder containing the HTML templates is called PagesAndComponents. Following are the sub-folders in the PagesAndComponents folder:

• Common: Elements common to most pages and components
• Components: Separate re-usable elements, organized in folders containing all required files for each
• HomePages: HTML files of the homepage variations
• SubPages: Common templates and inside pages, organized in folders containing all required files for each
• Themes: Contains the CSS and images needed for the different color themes

Structure of the Common folder:

• Functions: JavaScript files used in all pages, including the jQuery library
• Images: Common images
• Styles: Common CSS Style sheets

Directory containing all components source files: PagesAndComponents\Components\HTML\

Folder Structure
Files for each component are grouped in one folder, with the following structure:

• [Component name].html: The HTML of that component
• Functions: JavaScript file(s) used for. This might be an empty folder if the component uses no additional scripts
• Images: Images specifically used in that component
• Styles: Contains the CSS file(s)

Example: Using a Horizontal Listing Element
To use a horizontal listing element in a page you have to do the following:

• Copy the HTML found in this file: Components\HTML\HorizontalListing\html\horizontal-listing.html
• Copy the images from this folder: Components\HTML\HorizontalListing\html\images
• Copy the following CSS file: Components\HTML\HorizontalListing\html\styles\horizontal-listing.css
• No custom JavaScript is required for this component, so no additional files need to be copied

• Homepage variations:PagesAndComponents\HomePages
• Sub page templates:PagesAndComponents\SubPages

Example: Using a Photos Listing Page
To use a photos listing page you have to do the following:

• Copy this HTML file: SubPages\PhotosListing\html\photos-listing.html
• Copy the following CSS file: SubPages\PhotosListing\html\styles\photolisting.css
• No custom images are required for this page, so no additional files need to be copied
• No custom JavaScript is required for this page, so no additional files need to be copied

Three color variation themes are provided in the following directory: PagesAndComponents\Themes

Folder Structure
Each theme folder structure is similar to the following:

• Images: Images specifically used in that theme
• [Theme name].css: The CSS file containing the theme style definitions

Changing the Theme
Following are the steps needed to change the theme of your website:

• Copy a theme folder from the above directory to your styles folder. Add a link tag in your pages head that is similar to the following:
  < link href="[path to css file of the theme]" rel="stylesheet" type="text/css" />