Brightspot CMS Developer Guide

Styleguide user interface


This section describes Styleguide’s user interface and the associated development tools.


You can view the output of your Styleguide project under the Example tab. This tab provides visual cues that indicate your styling and layout are as expected.

Styleguide preview Styleguide preview

If an element is missing from the preview, the corresponding key may be missing from the data file. For additional information, see BEM.


You can view your raw data file under the JSON (Original) tab.

Raw JSON data Raw JSON data

For information about creating a data file, see Populating the Styleguide preview.


You can view the processed data file under the JSON (Processed) tab. This tab shows the mock values that Styleguide evaluated for placeholders.

Processed JSON data Processed JSON data

See also:


You can determine if Styleguide successfully evaluated your blocks and elements under the BEM tab. Under the Used column, ✗ indicates that Styleguide did not need the provided data when populating the template.

BEM BEM

In the previous illustration, the ✗ indicates the data file defined a field bodyImage, but the template Article.hbs did not use that field.


Styleguide organizes templates based on your project’s directory structure and data file names, and also displays templates similar to the following.

Template listing Template listing

Previous Topic
Styleguide development environment
Next Topic
Filters
Was this topic helpful?
Thanks for your feedback.
Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

Asset types
Module types
Page types
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

Content types
Modules
Landing pages
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

Dashboards
Publishing
Workflows
Admin configurations
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

Field types
Content modeling
Rich-text elements
Images
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

Google Analytics
Shopify
Apple News