CANVAS INSTRUCTURE RESPONSIVE GRIDS CODE

The column class code is comprised of two parts the screen size and a number indicating how many grid columns the element will flow. But it’s the following column class where things get interesting. The “content-box” div class is used to keep elements together and can be used to create space between rows, and the “grid-row” class keeps columns together. In the Canvas HTML editor, this looks something like this for a two-column layout (on any screen): The Flexbox system structures a page into rows and columns. For example, you can make an element flow across the entire screen of a smartphone yet have it flow across only half the screen on a tablet. The Canvas Flexbox grid system breaks a webpage up into 12 columns and, by employing a little code, you can dictate how many columns of a page an element flows across depending on the size of the screen it’s viewed on. I came to the Flexbox system because the design schematics I was creating either required columns of different types of information (for example, links to content and a news feed in a content area separate from the main body content) or grids (for example, a dashboard). The Canvas Flexbox is based on the popular Flexbox Grid system and can be used to create interesting and responsive web page layouts using relatively simple code. The code I discuss here and other great Canvas resources can be accessed by all staff at: Canvas flexbox In this article, I will highlight three of these discoveries – flexboxes, padboxes and Feedwind. This has meant finding interesting ways of using Canvas and 3 rd party plugins to best support the design. I then let my sketches guide the development of my site online. When approaching a site design task, I usually start drafting my design on paper, brainstorming how people might want to find information, the paths they might take to find what they’re looking for, and the blocks they might encounter on the way. So far, I have found Canvas to be supportive of this approach. Having a love for functional yet aesthetically-pleasing design, I believe well-designed and thoughtfully organised sites can significantly improve learning experiences.

The approach I take to designing sites is situated in graphic design and information design best practice, and as such, the designs are built around user needs and information navigation. These include an OLE, a faculty-wide site, and a dashboard. Over the past few months, I have used the University’s new learning management system, Canvas, to build several sites.

Canvas instructure responsive grids