What is Mobius?

Mobius, Spire's internally-built design language, is a library of low-level React styled components that you can configure and extend.

What are the benefits?

Mobius has several benefits for you and your customers:

  • Empowers business users

    Mobius empowers business users to globally customize basic UI styles, which lets you perform more complex customizations.

  • Minimizes upgrade effort

    Customizations are kept in sync site-wide when you use the CMS style guide to modify the site?s look and feel, and use Mobius components and conventions to enact UI changes or create custom widgets A pre-configured content holder ISC_Content user roles may use to add content to website pages without having to develop page elements.. Whenever Optimizely releases new Spire front-end features or fixes, your upgrade effort is minimal.

  • Improves site performance

    Because Mobius is based on React, it offers a virtual DOM and server-side rendering, both of which enhance your site's performance.

  • Changes propagate automatically

    Spire's front-end is built on Mobius' theme-able UI components, so visual changes to components propagate automatically throughout the site.

Extend with Mobius styled components

Like an end user, a developer can can update styles in the CMS Style Guide, built into the Spire CMS to change the look and feel of the website.

As a developer you can also manipulate a broader set of properties that impact the appearance of Mobius components, using the Mobius Theme, the theme lets you set global properties on Mobius components, as well as injecting CSS into the DOM elements that make up the components.

Accessibility

The design of Mobius components helps you build accessible storefronts. While many Mobius components address basic accessibility concerns, no component library can build a fully accessible site without the awareness and attention to accessibility as it?s implemented. Ensure that a site you?re implementing complies with your customers? requirements for site accessibility.