Creating the HTML and CSS for the Skin

The designer will provide the developer with two PSDs, one for the home page and one for the inside page.  It is the developer's job to double check to make sure the designer has fulfilled all requirements.  If the PSD does not meet these standards the developer must then have the designer provide the missing information.

Creating the HTML/CSS

Because the CMS requires that the site be deployed after every change, it makes sense to do the HTML/CSS in a workbench project.  There is a project called SkinWorkbench in the ClientSideWorkbench branch of the Pudding repository, please use that.  While cutting the skin there is no need to cut any of the content within a placeholder.  The only exception would be for background images required when styling primary and secondary navigation.

File Structure

Each skin will have the following file structure.

• html
  • index.html - (Html for the home page design)
  • inside-page.html - (Html for the inside page design)
• css
  • skin.css - (Contains main styles for the skins)
  • layout-styles.css - (Contains sizes for the different placeholders that will be placed in the main content, we will touch on this in the integration article).
• images - (Contains any images used by the skin)

Class name requirements

The main content placeholder has a small CSS requirement so that global shared styles for the CSS skin are used in the main content.  The CSS selector path to the main-content div MUST be as follows.

.content .content-body .main-content

This is for various widget styles as well as some of the global CSS skins.  without this path some styles will not be applied and the look and feel of the content will suffer.

Another important rule is that the main wrapper of your skin have a css class named after the skin you are implemented.  For example, if you are working on Skin X, then the outer most container should have the class name skinX.  You can download a good starting template by click on SkinStartTemplate.html.  You may need to adjust CSS link paths while working in the workbench, but the paths in that template will be what you need when you integrate the skin into the CMS.  Simply replace <SkinName> with the name of the skin (e.g. skinX).

The inside page and home page should share the same skin.css.  However, the inside page may need to override some of the home page styles.  To make this easy simply add the class name inside-page to the body tag, then you can override any skin style be prefixing your css selector with .inside-page.  For example, if I have the following style for skinX

.skinX .content-body .main-content .my-style

I can override that style in the inside page by defining a style

.inside-page .skinX .content-body .main-content .my-style

Always put as much scope on your styles as possible.  This helps ensure they cannot easily be overridden accidentally NOR can they accidentally be applied to an element by mistake.