Frontend Style Guides

Spire CMS Style Guide

• The Spire CMS Style Guide allows users to visually customize their Configured Commerce storefront, including colors, typography, and components.
• Changes in the Style Guide are immediately applied across the entire storefront, affecting every element being updated.
• The Style Guide enables users to modify website styling through configurations rather than code, reducing reliance on developers.
• Site Colors:
  • Customize the colors used on the website.
  • Provides contrast options for text and iconography against the primary color.
  • Emphasizes accessibility by offering contrast checkers for color choices.
• Site Typography:
  • Allows customization of text styles, including color, font weight, size, line height, styling (underlining, italics), and text transformations.
  • Overrides default styles using the Rich Text Editor, offering granular control over individual text elements.
• Site Configurations:
  • Controls functional elements on the storefront, grouping options for consistent styling.
  • Examples include:
    • Form Field Options: styles for text entry fields, dropdowns, and text areas.
    • Field Set Options: styles for radio buttons, checkboxes, and similar groups.
• Key Configurable Elements:
  • Accordion: Edit header text and icon configurations.
  • Breadcrumb: Update typography.
  • Button: Customize color, shape, hover animation and typography for primary, secondary, and tertiary buttons.
  • Form Field Options: Modify border, size variant, error text, label text, and hint text settings.
  • Field Set Options: Adjust color, size variant, group label text properties, and item label text properties.
  • Checkbox: Set icon, indeterminate icon, color, and choose between direct icon sourcing or pre-defined options.
  • Code Injection: Enables code injection into the Head section (only available if Advanced Spire CMS setting is On).
  • Date Picker: Configure format, calendar type, year placeholder, month placeholder, calendar and clear icon configurations, and language-based formatting.
  • File Upload: Edit button properties and icon configurations.
  • Full Width: Toggle full width for Header, Content, and Footer, choosing solid color or image styling.
  • Header: Customize compact header settings like background color, link color, drop shadow, and border.
  • Spinner: Set color.
  • Swatch: Select a swatch type.
  • Overflow Menu: Edit primary button and icon configurations.
  • Pagination: Choose current page variant and modify other button settings.
  • Tag: Set color and edit icon configuration and typography.
  • Tooltip: Customize icon configuration and typography.
• Styling Options:
  • Icon Configuration: Customize color, source (icon file URL), and size in pixels.
  • Typography: Provides granular control over component-specific text styles, including color and style.
  • Color: Use color picker, hexcode, RGB values, and alpha channel for transparency adjustment.
• Updating Website Styles:
  • Access Style Guide via /contentadmin or through the Admin Console.
  • Select the desired element for modification.
  • Update settings and save them as a draft, with changes applied automatically.
  • To close the editor, click outside or press Escape.

This quiz covers the essential features of the Spire CMS Style Guide, focusing on how to visually customize storefront elements like colors and typography. Users can learn how to apply changes instantly and understand the importance of accessibility in design. Additionally, it highlights user-friendly configurations that minimize developer reliance.