Creating a module

Sitecore 3 works on a module system, where modules are re-used throughout the site. When building a module you must ensure that the styles associated with that module do not conflict with any other styles that are on the site.

CSS

When styling your module, you should prefix any class names you create with the module name. For example, when building the link module, the following classes were used:

.link-mod-container
.link-mod-active
.link-mod-items

You should also create a less file for your module in the /less/ualberta/modules folder and add a line to import it into the ualberta.less file. This keeps everything well organized and easy to find if changes are required at a later date.

Markup

Your markup should be valid HTML5 markup. Also, your module should contain the minimal amount of markup required to achieve the required functionality. Extraneous <div> tags should be avoided unless absolutely required. Do not use inline styling

Javascript

If Javascript is required for the module, it should extend the twitter bootstrap jquery plugins. If possible, the plugin should be created so it can be activated through a data attribute in HTML instead of requiring manual activation.

Documentation

A short page should be added to the wiki explaining the module's purpose, required markup, css, and javascript. View the Link Module page for an example.