Introduction to Themes

Brightspot themes are a package of files that work together to provide designers and developers the flexibility to build experiences for the web and mobile.

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.

Tip

If you are customizing one of Brightspot’s standard themes, such as Frost, use the illustrations in Wireframes for Layouts to quickly identify the template and data-file elements you need to modify.