Now the Style Guide is technically for the developers of Canvas themselves and not for the RCE, but it works so I 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 . Just adding some visual indicators of the boxes on the WYSIWYG side would be a tremendous help to someone trying to use it. I would be very interested to see what your team would be able to do to add something like this to the RCE. It's very hit and miss because sometimes they'll press delete too many times and the divs get all whacked out. 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. 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 have looked at doing something to make the design of pages a little more modern and responsive. So here's a screenshot showing what this code will do on the two different screen sizes: That means each column will be side-by-side. However, if the screen is at least medium-sized each column will take up 6 out of 12 parts of the screen width. 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. 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. On a medium screen the column will take up 6 out of 12 parts of the screen. On an extra small screen, the column will take up 12 out of 12 parts of the screen. This chunk of code is telling the rendering engine what to do on an extra small screen or a medium screen. Notice that I'm defining the column classes differently this time. In this example, I'm defining a row with two columns. The example above is very similar to our previous example. ![]() You can define a different value (number 1-12) for each of the screen size identifiers listed above. Your code will tell the rendering engine how many of those 12 parts you want to use for each column. The coder (you) is responsible for defining how you want things to look for 4 different screen sizes.įlexbox grid divides the screen width into 12 equal parts. We can tell the rendering engine to display the page in different arrangements based on the screen size. Ok, now let's talk about the real magic of using Flexbox which allows us to implement a responsive design in our webpages.
0 Comments
Leave a Reply. |