instructure-ui icon indicating copy to clipboard operation
instructure-ui copied to clipboard

[Canvas theme] Styling pages

Open bertheyman opened this issue 10 months ago • 2 comments

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

bertheyman avatar Mar 06 '25 09:03 bertheyman

Hi!

Thanks for the detailed feedback! InstUI is the design system used by Canvas -- think of it as the bricks that make up the page layout, its up to the different teams working on Canvas itself to come up with the layout. I will find the right team for this feedback and forward it to them.

matyasf avatar Mar 06 '25 11:03 matyasf

Thanks! I'd love to hear about any updates on this.

bertheyman avatar Apr 22 '25 11:04 bertheyman