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:

../../_images/project-structure.svg

Styleguide organizes the UI based on the directory structure and the JSON file names. Referring to the previous illustration, Styleguide displays a cookbook similar to the following.

../../_images/ui-structure.svg

See also: