Using This Resource

After this introductory module, there is a Guidelines and Best Practices module, and after that, each remaining module will focus on a specific type of page element, such as boxes, images, or tables. Each of these modules will include a brief overview of the topic, library code snippet pages, and a tutorial section that explains the code elements and how to create your own styles.

Code Snippet Library Pages

The library code snippet section of each module contains styles we recommend (with noted caveats in a few instances). For every style we will provide an example of what it looks like on the page as well as the code in a show/hide for you to copy and paste into your course, as seen in the following example.

<div style="margin: 1em 3%; padding: 10px 15px; border: 2px solid #1E407C; background: #ffffff; font-size: 100%; overflow: auto;"> <p>Content here.</p>
</div>

To use the code in your own course, follow these steps:

1. Copy the code provided.
2. Go to the page of the Canvas course you wish to modify.
3. Select the Edit button, and then select the HTML editor (the </> button beneath the RCE window).
4. Paste the code and make any desired modifications.

Quick Tip: After pasting the code, switch back to the RCE by selecting the </> button again to view the result of your code before saving.

Modifications

In many instances, the code we provide can be customized to suit your needs. For example, you may want a box with a slightly different border thickness or color than the ones provided in this resource. To help you pinpoint which areas of the code can be modified, we provide a modifications section at the bottom of each library page to call out some of these customizable portions of the code.

Code Tutorial Pages

While the primary purpose of this resource is to share responsive and accessible styles that can be used in Canvas, we recognize that some people may want to learn more about how to use and modify these styles and related code. For this reason, we have included a tutorial section at the end of each module that will provide a deeper look at the code with some additional context and explanation of how to create and edit the types of styles we feature in this resource.

Icons

We use a number of icons in this course to quickly convey a tip, best practice, and even whether or not a particular style should be used with some caution. We also include text to ensure these callouts are accessible even for people who can't see the icons, but for reference here is a list of each icon and what it means.