layout is is uh probably one of the the biggest uh items of change um that we've introduced in quebec and it's uh extremely complex because we are moving to a world where we're supporting um based layout what that means is that we've unlocked a lot of power for our users and a lot of the constraints that have existed previously are no longer present it also means that our layout technology can build has the full level of expression needed to build custom portals custom workspaces as well as other future applications that we haven't even invented yet basically if you can do it in css you can do it in ui builder go ahead and go to the next slide there's kind of three different points of information that you need to understand about layout and forest touch on this a little bit before in his video the first is the notion of the container now there is a container component in ui builder but really containers are a type of component that's present examples of containers would be pages also modals and then of course the container component containers have layout applied to them and we'll talk about this in a second but the layout is basically what splits the container up into pieces let's go ahead and go to the next slide containers can be nested so containers can contain containers which can contain containers which can contain containers so basically works the same way as the web dubs which is really really important next slide to understand where you are in complex pages we've added the content panel it's basically a tree that shows you all the components and their hierarchical relationship on the page that you're building and you can select the components that you want in that hierarchy as well as the slots on the page next slide layout is what is applied to a container and that governs how that container behaves it's basically the metadata that slices that container up into slots um it tells the uh you know runtime and ui builder how to position those slots where they live and what css rules to apply to them um at a high level we have kind of four different layout rule systems in quebec we support the legacy 12 column row column system that we've had previously we also have introduced a css flexbox css grid and then in the cases where those two don't meet your needs we give you an escape hatch using what's called free which is really uh used for things like absolute positioning there's a lot more here but because we're using standards-based css layout you can learn more about how this layout system works by just typing these searches into google let's go ahead and go to the next slide slots are where components can be placed inside of a layout and if you look at that content panel on the left there you'll notice that there are some squares that are dotted and those are all the slots in the ui um they can hold a single component they can hold multiple components and you can take a container and split it up into multiple slots let's go ahead in the next slide and kind of put this all together so you'll notice in the screenshot that i've got container for selected on the stage it's got that nice magenta outline to it i've got the layout panel open and i can change the layout dynamically at any time without any risk of losing the content inside of it so i can go from a four column layout to a three column layout or a six column layout customers can also define their own custom layouts and they would show up in this panel as well and third party plugins can also define layouts that would show up here if you look at the content tree we see that container four has been split into four columns column one two three and four are the slots and each one has the ability to add a component into it and that's basically how layout works and when you nest it all together you can create very powerful but also very complex pages finally and importantly if we go to the next slide we've also exposed the ability to have custom css styling right from within ui builder using the now code editor that avi just talked about before so if you click on the style tab or on some components it's the layout tab we give you the ability to inject custom css styles in ui builder that can make uis that look like this or really anything that that you can dream up