Working with the Documentation

The documentation relies on two codebases to be produced:

• Supercollider, which processes each documentation page and converts it to HTML.
• foundation-docs, which includes all of the CSS for the documentation, and a set of Handlebars helpers used to render the documentation pages.

Editing Pages

Each page is a combination of up to three things:

• The body of the page, written in Markdown.
• The Sass reference of the page, if the component has a CSS requirement.
• The JavaScript reference of the page, if the component has a JavaScript requirement.

Any Sass or JavaScript requirements are defined at the top of the page's Markdown file, in a Front Matter block. Here are the config settings for tabs:

---
title: Tabs
description: Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.
sass: scss/components/_tabs.scss
js: js/foundation.tabs.js
---

The sass and js keys point to external files to reference for documentation. To edit the Sass or JavaScript reference sections for a component, go to these files and edit the annotations. Supercollider automatically pulls these in to assemble the final page. Refer to the documentation for SassDoc and JSDoc to learn how the annotations work.

Changing the Theme

The documentation styles are pulled in from an external repository called foundation-docs. It includes:

• The Handlebars temlpate used to render pages.
• Handlebars helpers used by that template.
• The Sass for the documentation.
• A handful of other utility scripts, such as the one that generates search results.

To test the documentation theme locally, run ./docslink.sh from the root of the foundation-sites repo. This will clone foundation-docs and use npm link to connect the local copy of foundation-docs to your foundation-sites repository.