Use the Spire CMS Style Guide

  • Updated

The Spire Style Guide is a tool that lets you change your Configured Commerce front end's colors, typography and components' visual appearance.

Style Guide changes are immediate and affect every element that you are updating. For example, changing the level one heading typography affects every level one heading on your Configured Commerce front end. 

Add /contentadmin to the end of your site URL to access the Spire content management system.

styleguide.png

What you can change

After launching Spire, you can access the Style Guide to update the site's styling by using available configurations instead of relying on code changes. The Style Guide displays the website's basic configurable styles and contains three main areas - Site Colors, Site Typography and Components.

  1. Site Colors are the colors that display on your website. Most colors also have a Contrast option to display text or iconography when you primary color is the background.

    If accessibility is a priority for your project, choose colors that provide adequate contrast on your site. Use the contrast checker to see if your colors meet accessibility standards. 

  2. Site Typography is the website's text styles, including the color, font weight, size, line height, styling (such as underline and italics) and text transformations (such as uppercase or lowercase styling).

    You can override text styles using the Rich Text Editor. For example, if your usual body text is black, you can use the Rich Text Editor to change the styling. Additionally, the Rich Text Editor shows the Style Guide's defined text styles. 

  3. Components are functional elements on your Configured Commerce front end.

    The Style Guide groups some options together for consistent styling. For example, Form Field Options includes styles for things like text entry fields, drop-downs and text areas. Field Set Options work similarly for groups like radio buttons or checkboxes.

Component examples

The Style Guide gives you the ability to update static content and site elements without a partner or developer, thereby minimizing maintenance costs.

Button

  • Color
  • Shape
  • Shadow
  • Active Mode – The appearance when a user clicks the button
  • Hover Mode – The appearance when a user hovers on the button
  • Hover Animation  – The behavior when a user hovers on the button
  • Size Variant
  • Button Type
  • Button Label Typography

Form Field Options

  • Border – The outline style
  • Size Variant 
  • Error Text – The typographical options and styling for error text
  • Label Text – The typographical options and styling for label text
  • Hint Text – The typographical options and styling for hint text

Field Set Options

  • Color
  • Size Variant
  • Group Label Text – The typographical options and styling for heading text
  • Item Label Text Properties – The typographical options and styling for item text

Styling options

  • Icon Configuration – You can select a color, source and size for the icon on components. The source is a URL of an icon file. The size is a numeric value in pixels.
  • Typography – The typography options are similar to the options for general site typography but apply to specific components. This lets you change the text's color and style more granularly.
  • Color – You can specify a color using the color picker field or entering hexcode or RGB values. You can also set colors as a transparency using the Alpha channel slider or entering a percentage in the A input box. This creates a lighter and less saturated version of the color.

Update website styles

  1. Add /contentadmin to the end of your site URL or access the Content Editor through the Dashboard of the Admin Console.
  2. Select Style Guide from the tab menu.
    pages.png
  3. Select the element to change, such as the body text.
  4. Update the values desired. Your changes are automatically saved to draft. To close the editor, click outside or press Escape on your keyboard.
    • You can preview changes by scrolling the staging area until you see the element you are updating.
  5. Click Save to publish changes.

Undo or redo changes

Click the Undo button to undo your changes. You can undo changes to the first change you made during your current session. Use the Redo button to redo a change that you have previously undone.

Clicking Save publishes the changes and resets the undo/redo actions.

You can also click Reset Styles to Default to return all styles to the default theme. You can undo this selection prior to saving if you would like to revert to the customizations you made.

How styles are applied

The Style Guide uses the theming principles of the Mobius component library to globally apply changes made to related components.  Your Style Guide changes do not apply to elements styled outside of the Mobius theme. For example, if your partner has implemented a custom promotional banner with a rounded green button, changing the button shape or color in the Style Guide does not affect this button. Additionally, if your partner includes a post-styleguide theme in your site, the theme overrides the values in the Style Guide.