Mobius design language

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

Mobius has several benefits for you and your customers:

• Empowers business users
  Mobius empowers business users to globally customize basic UI styles, allowing for 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 design, and when you use Mobius components and conventions to enact UI changes or create custom widgets. Your upgrade effort is minimal when Optimizely releases new Spire front-end features or fixes.
• 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 end users, developers can update styles in the CMS Style Guide, which is built into the Spire CMS to customize your site's design. Developers 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 and injects CSS into the DOM elements that make up the components.

Access storefronts

Mobius components help you build accessible storefronts. While many Mobius components address basic accessibility concerns, no component library can build a fully accessible site without awareness and attention to accessibility as it is implemented. Ensure that a site you are implementing complies with your customers’ requirements for site accessibility.

Customize a site's buttons

When establishing your site's design, you may want to modify more about the Primary Button variant than can be modified in the Spire CMS Style Guide. To do so, you will use the pre- or post-styleguide Theme object. In this case, you can use the Mobius Style Guide to identify possible changes to a button's appearance using the Props of the Button component, and what you might need to modify using the css prop. You can click the View Code button below every Style Guide component example and modify the components' props there. You will see your changes in the stage. This sandbox lets you experiment with changes that you may want to put in your theme and validate what they will look like in one place. Remember to rely on theme colors and props wherever possible.

Build a custom Spire widget

If you have received a design for a custom widget—for instance, a custom quote request form—your UI development should start with Mobius. You may choose to look at the Mobius GridContainer and GridItem components to lay your widget out, then use the TextField, Select, DatePicker and Dynamicdrop-down components for the form fields, and a Button component for the submit button. You can also use the Mobius Icon and Tooltip components to provide additional context to your form elements. Without any additional work, the components will use your site's theme and will be consistent with the site's overall design, even if the theme changes in the future.