Building an Addon's Layout From a Static Html Design

This tutorial shows you how to transplant the html, css and javascript from a static html design into an addon, using Layouts and the styles, javascript of the addon.

Create a Collection to hold the addon

1. This collection will include all the stylesheets, js files, page templates and addons.

Verify Addons or Create Addons for each jQuery Extension in the html design

1. If the design includes a jQuery extension, it should be isolated as a discrete addon.
2. If the design includes common libraries already in collections, just make dependencies to the existing addons.
3. Be sure to add collection dependencies to any libraries that need to be included.

Create a Shared Stylesheet from the page

1. From the source of the new design html, copy the necessary stylesheets one at a time, in order into a single shared stylesheet.
2. Add the shared stylesheet to the addon, and the addon's collection

Create a Javascript file for all the scripts needed on the new page

1. From the source of the new design html, copy the necessary scripts into one javascript file. Exclude those isolated into separate addons.
2. Add the new consolidated script file directly to the addon.

Create a new Layout record for the html from the design

1. Copy and paste the html from the design to a layout record.
2. Add the layuout to the collection

Add External resources to the Collection

1. If the layout references images, etc from the site that are not part of the original site or any other addon, add them to the collection