InstUI: Instructure’s Style Guide 2.0

[aguthrie1]

Since its inception, Canvas has always been open and transparent about our business and our features. We believe in being open. We believe in allowing you to use Canvas the way you want to use Canvas. And branding is one component that we’ve been working hard to improve, specifically relating to the use of the existing style guide and Instructure UI (InstUI), Instructure’s own component library.

Branding Evolution

Web technologies continue to evolve, and over the last three years, we’ve been able to introduce the Theme Editor at the account level, which helps admins create custom templates without the use of custom CSS and JavaScript files, although those file types are still accepted.

Previously, Canvas engineers implemented a style guide to be used for internal engineering teams and ensure consistency throughout the product, hosted as part of each Canvas account (e.g. canvas.instructure.com/styleguide). Over time, we noticed that some of our customers started to leverage that style guide. We know that you enjoy being able to design your own Canvas-theme projects within the Rich Content Editor. Now, with the evolution of additional technology advancements, we’ve discontinued the use of the old style guide in favor of InstUI.

Why InstUI?

In order to use the styleguide, a developer or course designer would copy the HTML markup for a user interface pattern, such as tabs, and paste that markup throughout Canvas. However, HTML is only part that pattern. The style of those tabs is defined with CSS, and the interaction of navigating between tabs is enabled through Javascript. This architecture quickly became difficult to maintain. If we were to make a style enhancement or fix a Javascript bug that necessitated updating that HTML, every instance of those tabs—whether in Canvas, in a custom tool, or in course content—would have to be updated manually or remain broken.

To combat these maintenance challenges, we made the decision to move Canvas front-end development to React, a library developed by Facebook for creating modular user interfaces. React components encapsulate the HTML structure, the styles, and the Javascript together into a reusable, easily maintainable component. A bug fix to a React component propagates to every instance of that component with little to no effort, only needs to be made in one place, and every user immediately benefits.

InstUI, Instructure’s own UI component library, is built using React, which allows our developers to deliver new features more efficiently and makes all of Canvas easier to maintain and innovate. InstUI ensures consistent, accessible experiences throughout Canvas and delivers custom themes made with the Theme Editor to all interactions, just like the style guide intended. With React, those experiences are better tested, better maintained, and more reliable than ever for our users.

InstUI Availability

If you’re interested in using the InstUI components, InstUI is open source and available for you to use in your LTI tools. To get started, visit instructure.design. If you’re starting from scratch, InstUI works great with React boilerplates like Create React App.

We haven’t enabled the use of InstUI in the Rich Content Editor yet; however, other tools are currently available for integrating custom changes. Some options as noted in the community include H5P and other canvas embed tools.

Future Development

In 2019, the InstUI team will begin work to improve documentation and support for third parties.

Additionally, we recognize we don’t have an ideal solution for making changes in the Rich Content Editor. For now, we’re focusing on building a better Rich Content Editor to give you a better experience and give you more controls to design pages the way you want. This project is in the planning stages, and if you want to get more involved, watch for additional details to be posted in Canvas Studio.

If you’ve been using InstUI, let us know your thoughts in our InstUI Community Discussion.

If you’re not using InstUI but have used elements from the style guide in your pages, please let us know in the comments which elements you used and why they were helpful to you. Style guide feedback may be considered for future development.