Brightspot CMS Developer Guide

Wireframes for Brightspot theme layouts


Brightspot's layouts include dozens of layout elements that you can show, hide, and customize. This section provides wireframes for the most common layouts. You can use the wireframes to locate the corresponding elements within data files and templates.


This section describes the layouts for Brightspot’s basic content types.

Article layout

The following wireframe shows the layout for articles as described in /styleguide/core/article/ArticlePage.hbs. Elements in the legend correspond to objects in JSON data files.

Layout

Author layout
The following wireframe shows the layout for authors as described in /styleguide/core/author/AuthorPage.hbs. Elements in the legend correspond to objects in JSON data files.

Layout

Blog layout
The following wireframe shows the layout for blogs as described in /styleguide/blog/BlogPage.hbs. Elements in the legend correspond to objects in JSON data files.

Layout


Blog post layout
The following wireframe shows the layout for blog posts as described in /styleguide/blog/blogpost/BlogPostPage.hbs. Elements in the legend correspond to objects in JSON data files.

Layout


Gallery layout
The following wireframe shows the layout for galleries as described in /styleguide/core/gallery/GalleryPage.hbs. Elements in the legend correspond to objects in JSON data files.

Gallery, Slides

Layout


Gallery, Thumbnails

Layout


Gallery, Long

Layout


Page layout
The following wireframe shows the layout for pages as described in /styleguide/core/page/Page.hbs. Elements in the legend correspond to objects in JSON data files.

Layout


Press release layout
The following wireframe shows the layout for press releases as described in /styleguide/corporate/press-release/PressRelease.hbs. Elements in the legend correspond to objects in JSON data files.

Layout


Search results layout
The following wireframe shows the layout for search results as described in /styleguide/core/search/SearchResultsPage.hbs. Elements in the legend correspond to objects in JSON data files.

Layout


Section layout
The following wireframe shows the layout for sections as described in /themes/<theme-name>/styleguide/page/Section.hbs. Elements in the legend correspond to objects in JSON data files.

Layout

Tag layout
The following wireframe shows the layout for tags as described in /themes/<theme-name>/styleguide/page/Tag.hbs. Elements in the legend correspond to objects in JSON data files.

Layout


Video layout
The following wireframe shows the layout for videos as described in /styleguide/core/video/VideoPage.hbs. Elements in the legend correspond to objects in JSON data files.

Layout



This section describes the layouts for low-level components contained in layouts for higher-level components.

Structural layouts
Structural components provide structure to your website. Examples of structural components include header, footer, and navigation.

The following wireframes represent several structural layouts. These templates for these layouts are available at the following locations:

  • /styleguide/core/page/PageHeaderTextHat.hbs
  • /styleguide/core/banner/Banner.hbs
  • /styleguide/core/navigation/Navigation.hbs
  • /styleguide/core/page/Page.hbs
Component layout

Module layouts
Brightspot provides several modules you can incorporate into content types. Examples of these modules include the following:

  • Promo
  • List
  • Quote
  • Carousel
  • Tabs
  • Rich Text
  • Container

The following wireframes represent layouts for several modules.

Component layout

Previous Topic
Simulating AJAX calls
Next Topic
Styleguide development environment
Was this topic helpful?
Thanks for your feedback.