Project Structure

Styleguide projects consist of any number of components. At a minimum, each component usually consists of a template and data file. Optionally, a component may also have a Less file for styling and a JavaScript file for behaviors.

As a best practice, implement the following guidelines into your project’s structure:

  • Organize your Styleguide by project component, and use the same base names within a component. For example, if you are styling a component for displaying recipes and another component for displaying chefs, combine the project files into subdirectories recipes/ and chefs/. (If you are adding styling using Less, you must place your project files in a subdirectory.)
  • In the root directory, create a file All.less and @import all of the subsidiary Less files into it. When Styleguide finds this file, it creates a minified file All.min.css that contains all of your CSS selectors for the entire project.
  • In the root directory, create a file All.js and import the classes you want to include in your deployed project. When Styleguide finds this file, it creates a minified file All.min.js that contains all of your JavaScript functions for the entire project.

Using the above guidelines, your Styleguide project files have a structure similar to the following:

Styleguide Project Structure

└── /<root>
    ├── All.less
    ├── All.js
    └── styleguide
        ├── chefs
        |   ├── Chefs.hbs
        |   ├── Chefs.json
        |   └── Chefs.less
        └── recipes
            ├── Recipes.hbs
            ├── Recipes.json
            ├── Recipes.less
            └── breakfast
                ├── EggsBenedict.hbs
                ├── EggsBenedict.json
                └── EggsBenedict.less

Styleguide’s UI lists your templates based on the project structure; for details, see Template Listing.

See also: