cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Learner II

Flexbox Grid tips and guides

Jump to solution

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?

Tags (3)
1 Solution

Accepted Solutions
Highlighted
Community Advocate
Community Advocate

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.

IdentifierScreen Size
xsExtra Small
smSmall
mdMedium
lgLarge

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:

xsandmd.jpg

View solution in original post

11 Replies
Highlighted
Community Advocate
Community Advocate

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:

flexbox.png

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.

flexbox.gif

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

Highlighted
Learner II

That is a really helpful explanation! Thank you!

Highlighted
Community Advocate
Community Advocate

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.

IdentifierScreen Size
xsExtra Small
smSmall
mdMedium
lgLarge

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:

xsandmd.jpg

View solution in original post

Highlighted
Learner II

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!!

Highlighted

Hi Hanes.Matthew.B@muscogee.k12.ga.us

Thank you for the great explanation.

Highlighted
Community Advocate
Community Advocate

Hi Hanes.Matthew.B@muscogee.k12.ga.us,

I'm here because jdick@andover.edu‌ 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

0 Kudos
Highlighted
Community Advocate
Community Advocate

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. 

Highlighted
Community Advocate
Community Advocate

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:

0 Kudos
Highlighted
Surveyor

carroll-ccsd and Hanes.Matthew.B@muscogee.k12.ga.us

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:

dog next to text

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

0 Kudos