instructure / instructure/instructure-ui
[Canvas theme] Styling pages
@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
Example: styling with more whitespace (maybe even a bit much) and shorter text lines
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.