User Interface

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

Preview

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.

../../_images/debugging-example.png

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

Raw JSON Data

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

../../_images/debugging-json-original.png

For information about creating a data file, see Mocking Data.

Processed JSON Data

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

../../_images/debugging-json-processed.png

See also:

BEM

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.

../../_images/debugging-bem.png

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

Template Listing

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

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