Welcome to the University of Utah Gen3 Canvas Styles resource! This resource was created by a team of instructional designers, learning designers, production specialists, multimedia specialists, web developers, and accessibility consultants. This resource was designed to assist instructors and faculty develop advanced HTML elements within the Gen3 template and the Canvas LMS platform.
Problem Statement
The purpose of this resource is to address the following problems:
The Rich Content Editor (RCE) in Canvas provides limited functionality in some areas, making it difficult to complete otherwise simple tasks, like associating images with captions, creating data tables, and designing pages that are visually interesting and well organized.
Instructure’s own style guide is no longer supported, which means the styles it offers could break at any time.
Content creators are often left to find or write code that isn’t accessible, responsive, or stable. Using inaccessible and unresponsive styles not only exposes the University of Utah to potential lawsuits but also creates needless barriers and frustration for faculty, staff, and students.
Our Solution
In an attempt to solve the variety of problems associated with using unsupported styles in Canvas, our group set out to gather, review, and debate a large collection of code snippets that would produce functional styles. The styles we looked at were compiled from outside sources as well as created by members of the group. We organized them into several larger categories, including Boxes, Images, Tables, and more. Once we identified an initial list of styles, members of the group took turns reviewing each of them.
We judged styles on the following:
Do they use custom classes from Instructure's unsupported style guide?
Are they responsive, and do they display correctly on mobile devices?
Are they accessible for all users?
We invite you to continue this introductory module to learn more about how to use this resource. You will also find some introductory information about visual design, University of Utah brand colors, and more.