instructure / instructure/instructure-ui

[Canvas theme] Styling pages

Open
#1,890 2 comments 0 reactions 1 assignee View on GitHub

@matyasf is already working on this.

Since Mar 6, 2025.

Dominant language
TypeScript
Stars
480
Forks
108
Avg merge
6d 1h
Merged PRs (30d)
16

Description

This is a questions about the layout of Canvas pages when using the default Infrastructure theme.
If this is not the correct place, I'd be happy to know where the question is best addressed.

Question

I'm a lecturer using Canvas LMS. During lectures, we spend a lot of time in Canvas pages.
There's a couple of small changes I'd like to propose that might help to improve readability:

  • Text lines can get quite long. Typically, 7–12 words per line is recommended for optimal readability.
  • Depending on padding, some titles can be closer to the text above them (see "job overview" in the example below) than the next paragraph below them. Having them closest to their own text helps the text hierarchy and makes it easier to scan. Some colleagues migitate this by adding enters for whitespace, but that makes things messy if those are copy pasted later.
Code Sample

❗️Apart from line length and title padding, the font size is also different in these screenshots.

Example: default styling
Image Image
Example: styling with more whitespace (maybe even a bit much) and shorter text lines
Image Image
Additional Details

An example where I personally enjoy the readability / spacing:
https://dev.to/devteam/join-our-first-ever-wecoded-challenge-celebrating-underrepresented-voices-in-tech-through-stories-5m5

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.