Frontend Blueprints

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is the main function of the Mobius Theme within the Spire Blueprint?

It describes how each component on the site is styled. (correct)

It controls the data interactions with the back end.

It manages server-side rendering.

It stores all the custom CSS for the UI.

What should developers use to customize their site outside the CMS Style Guide limitations?

The Framework

The Blueprint (correct)

The Core Code

Server-Side Scripts

Which of the following statements about Optimizely's Blueprint is true?

Support tickets are required to change a site's Blueprint. (correct)

Blueprints integrate with external CSS frameworks directly.

Blueprints can be changed at run time without restrictions.

Blueprints are drawn from a single static template.

What does the CMS Style Guide layer include?

A limited set of custom attributes for components. Signup and view all the answers

Where do developers commonly interact with pre and post-Style Guide themes?

At start.tsx in the blueprint source folder. Signup and view all the answers

What is the primary characteristic of the post-Style Guide theme?

It is where critical overrides to the Mobius Theme are placed. Signup and view all the answers

What element acts like bread in the Blueprint sandwich metaphor?

The post-Style Guide theme Signup and view all the answers

What can be included in the post and pre-Style Guide themes?

Any values available in the base Mobius Theme Signup and view all the answers

What is the main purpose of the pre-Style Guide theme?

To store most customizations for the Mobius Theme Signup and view all the answers

Which theme contains the default styles provided out of the box for Mobius components?

Base Mobius Theme Signup and view all the answers

If a customization is applied to the Base Mobius Theme, which of the following statements is true?

It can be overridden by changes made in the CMS Style Guide. Signup and view all the answers

What should you do before creating a new Blueprint in Spire?

Ensure you have access to a local installation of Optimizely Configured Commerce Signup and view all the answers

What is the first step to run Spire using the built-in content-library?

Go to rontEnd in the terminal Signup and view all the answers

Which shape is not a default value for buttons in the Base Mobius Theme?

Rounded Signup and view all the answers

In the context of style precedence, which color has the highest precedence?

Normal from the post-Style Guide Theme Signup and view all the answers

Which command is necessary to begin using Spire after setting up?

npm install Signup and view all the answers

Study Notes

Blueprint Components

Blueprint is a separate front-end customization layer built on top of Spire
Built for easier front-end upgrades and extensions, changes to core Spire code are automatic through Configured Commerce deployments
Blueprint comprises several elements, similar to a sandwich, with various layers of styling and customization
The main element is the Mobius Theme, dictating individual component styling
The Mobius theme is built on several components:
- Post-Style Guide Theme: Partners should place only important overrides to the Mobius Theme here. These customizations cannot be overridden by CMS Style Guide changes.
- Pre-Style Guide Theme: Partners should place most customizations here. Changes can be overridden by CMS Style Guide changes.
- CMS Style Guide: This layer includes values customizable from within the CMS, encompassing a limited subset of component attributes. It allows for changes like site colors, button sizes and shapes, but does not include custom CSS or Javascript additions
- Base Mobius Theme: contains all default Mobius component styles, including flat square buttons, sans-serif font, and a blue and gray-based color theme
Style Precedence:
- Layers override each other in the following order:
  - Post-Style Guide Theme overwrites the CMS Style Guide, Pre-Style Guide Theme, and Base Mobius Theme
  - CMS Style Guide overwrites the Pre-Style Guide Theme and Base Mobius Theme
  - Pre-Style Guide Theme overwrites the Base Mobius Theme
  - Base Mobius Theme remains as the default

Creating New Blueprints

Before creating a new Blueprint, ensure you have access to a local Optimizely Configured Commerce installation
The Configured Commerce Github repository contains the Spire front-end code at \FrontEnd and an example Blueprint at \modules\blueprints\example
To run Spire using the built-in content library:
- Navigate to \FrontEnd using a terminal
- Run npm install if not already done
- Run npm run start

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

This quiz explores the various components of Blueprint, a front-end customization layer for Spire. Learn about its structure, including the Mobius Theme and its different styling layers such as the Post-Style Guide and Pre-Style Guide. Understand how these elements work together to facilitate front-end upgrades and customizations.