[ARCHIVED] Flexbox Grid tips and guides

[marthazumack]

I've just started playing around with Flexbox grid (Canvas provided a great overview here) and am looking for more resources to help me figure it out. Does anyone have any favourite tips, tricks, or guides?

[MattHanes]

Greetings Martha,

Using flexbox is really easy if you just want to put stuff in columns and you don't care if the content of each row (as a whole) is responsive.  The following code will create a row with 3 columns of equal width. Each column has a centered paragraph of text and the columns will not stack as the screen gets smaller.

<div class="grid-row">

    <div class="col-xs">

        <p style="text-align: center;">Row 1 - Column 1</p>

    </div>

    <div class="col-xs">

        <p style="text-align: center;">Row 1 - Column 2</p>

    </div>

    <div class="col-xs">

        <p style="text-align: center;">Row 1 - Column 3</p>

    </div>

</div>

So let's color-code the code above and show the result:

The columns get closer together as the screen size gets smaller and the text will begin to wrap to the next line in each column so that each column can squeeze onto the page.

I'll put together another post at a later time that explains how to get things to stack as screen size gets smaller.

[marthazumack]

That is a really helpful explanation! Thank you!

[MattHanes · Accepted solution]

Ok, now let's talk about the real magic of using Flexbox which allows us to implement a responsive design in our webpages. We can tell the rendering engine to display the page in different arrangements based on the screen size. The coder (you) is responsible for defining how you want things to look for 4 different screen sizes.

Identifier	Screen Size
xs	Extra Small
sm	Small
md	Medium
lg	Large

Flexbox grid divides the screen width into 12 equal parts. Your code will tell the rendering engine how many of those 12 parts you want to use for each column. You can define a different value (number 1-12) for each of the screen size identifiers listed above. Let's look at an example here:

<div class="grid-row">

    <div class="col-xs-12 col-md-6">

        <p style="text-align: center;">Row 1 - Column 1</p>

    </div>

    <div class="col-xs-12 col-md-6">

        <p style="text-align: center;">Row 1 - Column 2</p>

    </div>

</div>

The example above is very similar to our previous example. In this example, I'm defining a row with two columns. Notice that I'm defining the column classes differently this time.

<div class="col-xs-12 col-md-6">

This chunk of code is telling the rendering engine what to do on an extra small screen or a medium screen. On an extra small screen, the column will take up 12 out of 12 parts of the screen. On a medium screen the column will take up 6 out of 12 parts of the screen.

Now, since an extra small screen will have each column take up 12 out of 12 parts, the columns have to stack on top of each other. Column 1 will be on top and column 2 will be pushed down to take up another 12 out of 12 parts of the screen width.

However, if the screen is at least medium-sized each column will take up 6 out of 12 parts of the screen width. That means each column will be side-by-side. So here's a screenshot showing what this code will do on the two different screen sizes:

[marthazumack]

The stacking is exactly what I was trying to figure out, and the numbers hadn't made sense to me originally. Thank you thank you for taking the time to explain!!

[benjamin_rodrig]

Hi  @MattHanes ‌

Thank you for the great explanation.

[robotcars]

Hi  @MattHanes ,

I'm here because  @jdick1 ‌ one-upped me in a post about placing images side-by-side in Canvas using Flex Box. I had no idea flex box was an option here. I knew Bootstrap was baked into Canvas but never thought about using the grid system in pages.

It appears that Canvas Flexbox is based off the Bootstrap 3 grid system.

canvas-lms/_flexboxgrid.scss at master · instructure/canvas-lms · GitHub 

https://getbootstrap.com/docs/3.3/examples/grid/ 

We are looking at modifying the RCE and adding a Flexbox controller, and documentation to help make design easier. Have you experimented with that or created documentation for users, or is this something you use internally to polish content? Just looking for feedback and experiences.

Thanks

[MattHanes]

Greetings carroll-ccsd,

I have looked at doing something to make the design of pages a little more modern and responsive. I'm the Canvas admin for our school district (about 1/10th the size of your district lol) and I'm a educational technologist, not a programmer. I usually just build someone a template if they are trying to do something with aligning text and pictures and then they go in and replace my template text and pictures with what they want. It's very hit and miss because sometimes they'll press delete too many times and the divs get all whacked out.

I would be very interested to see what your team would be able to do to add something like this to the RCE. Just adding some visual indicators of the boxes on the WYSIWYG side would be a tremendous help to someone trying to use it. If I have an super-advanced user that wants to do it all in HTML (which is like me and maybe two other people) then I send them a link to the Style Guide Style Guide - Canvas .

Now the Style Guide is technically for the developers of Canvas themselves and not for the RCE, but it works so I use it. I'd be happy to Beta test anything you come up with!

Also, on a side note, you guys have Infinite Campus too, right? Are you looking at grade passback to IC? Our IC vendor wants us to pay for their Campus Learn LMS (a significant sum of money) just so we can send grades from Canvas into IC. Needless to say, I was quite upset with them. 

[robotcars]

I created a template years ago too and styled it with global CSS and even sub account branding (school colors).

It's biggest issue is no one knows how to customize it. The new path is to start developing more content in Canvas instead of LTI vendors and tools. To do that we are slowly taking the task of teaching designers and teachers basic HTML to get them comfortable with HTML, the RCE, and for us to assess the design patterns they would like to use to present content (I'm willing to build Accessible ARIA capable tabs, dropdown style accordions etc, that fallback gracefully, complete with custom JS for progressive enhancement) in order to provide tools/templates/copy&pastable HTML. Modifying the RCE is a small step to allowing them control of some of those capabilities without having to teach everyone to float images to the right or left of text, one of our most frequent requests. If we can enable columns with Flexbox similar to the table generator we'd enable a lot of teachers and provide more content to mobile.

We are using IC with an entirely custom in/out data process. When we started with IC they hadn't created their 'LMS' yet and we are not interested in using it. I'd love to chat and see how we can help. DM me if your interested and I'll share my email... or I think I handed you an Elvis Panda at the UnConference, check the back. :smileygrin:

[james10]

carroll-ccsd and  @MattHanes , 

I am struggling to use a flexbox grid to set an image and text in columns. Many of my students use Canvas on both their smartphones and a laptop computer. I want the page to look clean on both platforms. This is what I want to achieve on the laptop end:

I'm about to just make it on a pdf, save that as a jpg, and put it on the page that way. Suggestions? 

Many thanks!

--Teeka

[robotcars]

Hi  @james10 ,

Placing text in an image is easy... but isn't friendly to some users. :smileygrin:

I think the simplest way would be to try the following...

The native grid system in Canvas is currently based off this, https://getbootstrap.com/docs/3.3/examples/grid/ 

Which states:

Mixed: mobile and desktop

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

It looks like you are trying to get a little off center position between the two columns... so I scrolled down the page and found the first example under Mixed: mobile, tablet, and desktop. For this post, I'll be consistently using the example on the page directly below that page heading.

I prefer Chrome for the next few steps, but they are similar in any browser.

If you right click that area of the screen and choose Inspect (Element), you'll see the following.

Now, within the inspector, if you find the <div class="row"> that highlights the one we want on the left, Right Click that and choose Copy > Copy Element. This will get you the HTML you can use within Canvas. I think you want the reverse, with a wider (text) column on the right, so I've switched that here. 

<div class="row"> <!-- switch this class to grid-row -->
  <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
  <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

• Copy this HTML into the Canvas RCE
  • You'll also need to change the class of the div to "grid-row", as Canvas has changed the default.
• Then, replace the .col-xs-6 .col-lg-4, with your image content
  • (note the .class-names, for the example text, not the the actual classes between class="")
• Next, replace the .col-xs-12 .col-sm-6 .col-lg-8, with your text content.
  • Within the right side, you can continue using any of the RCE text features like Headings, Bold, Lists etc.

You can then test your page in the Canvas Apps for mobile and tablet. It should look the same on laptop and desktop browsers.

You can also play with the responsiveness directly in your browser, on this Bootstrap Grid System page. Within Canvas in the browser it gets tricky, because the viewport is larger than the sub/nested Canvas content area.

[james10]

Oh my goodness! This is wonderful! I'm going to try it right now. I'll let you know how it works out!

🙂   🙂   🙂

--Teeka