Introduction to Themes

Brightspot themes are a package of files that work together to provide designer and developer flexibility to build experiences for the web and mobile. Themes can build on top of the out-of-the-box APIs for building themes with pre-existing components, or create their own.

Concepts

To build a Brightspot theme, you should be familiar with the following concepts:

Structure

The project structure for a Brightspot theme looks like the following:

├── /styleguide
|   ├── <components directories here>
|   ├── All.less
|   ├── All.js
|   └── _config.json [required]
├── gulpfile.js [required]
└── package.json [required]

Each component directory typically has at least one template, at least one JSON file, and optionally have Javascript or styles. The files for a component might look like the following:

├── MyComponent.hbs
├── MyComponent.json
├── MyComponent.js [optional]
└── MyComponent.less [optional]

The _config.json file in the styleguide directory is the global configuration file. For more details on this file see Configuring a Theme.

When you’re ready, take a look at Getting Started to get started building your own theme.