Podcast
Questions and Answers
What is the main function of the Mobius Theme within the Spire Blueprint?
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?
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?
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?
What does the CMS Style Guide layer include?
Where do developers commonly interact with pre and post-Style Guide themes?
Where do developers commonly interact with pre and post-Style Guide themes?
What is the primary characteristic of the post-Style Guide theme?
What is the primary characteristic of the post-Style Guide theme?
What element acts like bread in the Blueprint sandwich metaphor?
What element acts like bread in the Blueprint sandwich metaphor?
What can be included in the post and pre-Style Guide themes?
What can be included in the post and pre-Style Guide themes?
What is the main purpose of the pre-Style Guide theme?
What is the main purpose of the pre-Style Guide theme?
Which theme contains the default styles provided out of the box for Mobius components?
Which theme contains the default styles provided out of the box for Mobius components?
If a customization is applied to the Base Mobius Theme, which of the following statements is true?
If a customization is applied to the Base Mobius Theme, which of the following statements is true?
What should you do before creating a new Blueprint in Spire?
What should you do before creating a new Blueprint in Spire?
What is the first step to run Spire using the built-in content-library?
What is the first step to run Spire using the built-in content-library?
Which shape is not a default value for buttons in the Base Mobius Theme?
Which shape is not a default value for buttons in the Base Mobius Theme?
In the context of style precedence, which color has the highest precedence?
In the context of style precedence, which color has the highest precedence?
Which command is necessary to begin using Spire after setting up?
Which command is necessary to begin using Spire after setting up?
Flashcards
Blueprint Components
Blueprint Components
A front-end customization layer on top of Spire for easier upgrades and extensions, using layers for styling and customization.
Mobius Theme
Mobius Theme
The main component of the Blueprint, dictating individual component styles.
Post-Style Guide Theme
Post-Style Guide Theme
Blueprint component style layer; overrides other layers EXCEPT the Post-Style Guide Theme.
Pre-Style Guide Theme
Pre-Style Guide Theme
Signup and view all the flashcards
CMS Style Guide
CMS Style Guide
Signup and view all the flashcards
Base Mobius Theme
Base Mobius Theme
Signup and view all the flashcards
Style Precedence
Style Precedence
Signup and view all the flashcards
Local Optimizely Configured Commerce
Local Optimizely Configured Commerce
Signup and view all the flashcards
Github Repository
Github Repository
Signup and view all the flashcards
Spire Front-End
Spire Front-End
Signup and view all the flashcards
npm install
npm install
Signup and view all the flashcards
npm run start
npm run start
Signup and view all the flashcards
Blueprint example
Blueprint example
Signup and view all the flashcards
Configured Commerce
Configured Commerce
Signup and view all the flashcards
FrontEnd folder
FrontEnd folder
Signup and view all the flashcards
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
- Layers override each other in the following order:
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 installif not already done - Run
npm run start
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Related Documents
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.
