On-disk structure

The rules

1. In the top level directory, there must be a project.yaml.
2. In the top level directory, there must be an index.html file representing the welcome slide.
3. In the top level directory, there must be a directory named sections.
4. Each directory within sections represents a section. The directory name becomes the "key" of the section. Choosing these keys carefully is important.
5. Within each Section directory (e.g. sections/<section_name>/), there must be a directory named slides.
6. Each directory within slides represents a slide. You'll use the directory name to refer to the slide in project.yaml.
7. Common files for use throughout the whole deck - such as css, js and hooks files, will need to be referenced as such in the project file (project.yaml).
8. (Optional) at the same level as the sections folder, there can be a directory named templates. These are for reusable slide layouts. Read more about templates here.
9. Other directories don't have any special meaning. An example would be a fixtures directory to hold any feed or context fixture files.

Basic structure

  .
  ├── sections
  │   └── section_1
  │       ├── index.html
  │       └── slides
  │           └── slide_1
  │               └── index.html
  ├── templates
  │   └── template_1
  │       ├── index.html
  │       └── slide.css
  ├── index.html
  └── project.yaml

note

This is the expected format when publishing your deck to a server. If using the Starting Point deck as a base, the gulp task will automatically create the deck in this format. If you use your own, make sure the output looks like the above.

Here’s an example of a deck with common CSS and JS, hooks, images, assets and two sections - one containing three slides:

  .
  ├── css
  │   ├── core.css
  │   └── img
  │       └── navigation-btns.png
  ├── js
  │   ├── deck.js
  │   ├── hooks
  │   │   ├── fieldsets.js
  │   │   ├── selectionRules.js
  │   │   └── selections.js
  │   └── hooks.js
  ├── sections
  │   ├── were_innovative
  │   │   ├── index.html
  │   │   ├── slide.css
  │   │   └── slides
  │   │       ├── introduction
  │   │       │   ├── index.html
  │   │       │   ├── slide.css
  │   │       │   └── img
  │   │       │       └── clipart.png
  │   │       ├── super_stats
  │   │       │   ├── index.html
  │   │       │   ├── slide.css
  │   │       │   ├── stats-loader.js
  │   │       │   └── stats.pdf
  │   │       └── fancy_infographic
  │   │           ├── index.html
  │   │           └── slide.css
  │   └── product_suite
  │       ├── index.html
  │       ├── slide.css
  │       └── img
  │           └── section-bg.jpg
  ├── index.html
  ├── project.yaml
  ├── slide.css
  ├── fixtures
  │   ├── feeds.json
  │   └── context.json
  ├── img
  │   └── welcome-bg.jpg
  └── assets
      └── asset.pdf

note

that per the point above, the assets directory has no special meaning. It’s just a directory with stuff in it.

info

The path to hooks.js can be modified in the project.yaml file, but is generally set to js/hooks.js.

For more information, see project file.