# YUIDoc Themes

Main Page > YUIDoc Themes
Jump to Table of Contents

YUIDoc uses Handlebars.js to render its templates. For easy customization, YUIDoc's default templates provide a specific set of file overrides.

## Directories

The default theme consists of `assets/`, `layouts/` and `partials/` directories, along with a `theme.json` file that describes theme-related variables, such as the JS and CSS to load.

    themes/
        default/
            assets/             //Project assets, css, js
            layouts/
                *.handlebars    //Handlebars files for layouts
            partials/
                *.handlebars    //Handlebars files for partials
            theme.json   //JSON file with theme variables

### Layouts

A YUIDoc template has two primary layout files: `main.handlebars` and `xhr.handlebars`.

`main` | Provides a complete wrapper around every rendered page. `main.handlebars` includes the full HTML header and footer markup, CSS, and JS for every YUIDoc API page.
`xhr` | Provides a smaller layout for the built-in doc server to use when requesting an individual page via XHR. This enables the browser to refresh just the content pane and avoid loading the complete markup for the entire page. The `xhr` template enables YUIDoc to progressively enhance the API documentation in an efficient manner.

### Partials

For each section of the layout that derives from parsed YUIDoc comment data, YUIDoc provides a Handlebars partial.

`index` | Renders the main index content.
`sidebar` | Renders the tabview containing the lists of classes and modules.
`options` | Renders the filter options at the top of the page, which enable the user to hide and show private methods, inherited methods, and so on.
`attrs` | Renders documentation for an individual YUI Attribute.
`classes` | Renders documentation for an individual class.
`events` | Renders documentation for an individual event.
`files` | Renders the API's source files.
`method` | Renders documentation for an individual method.
`module` | Renders documentation for an individual module.
`props` | Renders documentation for an individual property.

## Overriding a Partial/Layout

YUIDoc's `--theme` option specifies a directory containing layouts and partials that override the default theme. For example:

    $ yuidoc --theme ./mytheme

causes YUIDoc to inspect the directory `./mytheme` for template overrides. If this directory contains an override such as `./mytheme/partials/method.handlebars`, YUI will parse its internal templates first, then apply the custom `method.handlebars` partial. If a theme has no explicit override for a given template file, YUIDoc simply falls back to using the default layout or partial.