·¬ÇÑÉçÇø

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 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 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 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 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 Layout


Gallery, Thumbnails

Layout Layout


Gallery, Long

Layout 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 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 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 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 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 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 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 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 Component layout

Previous Topic
Simulating AJAX calls
Next Topic
Styleguide development environment
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.

•
•
•
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