[00:00] In this lesson, we'll explore the column container type which is designed to simplify and streamline design work, allowing for displays that are quick to create and easy to manage. To get us started here, we'll go ahead and create a new view. So, I'll go ahead and find the Perspective heading in the Project browser. Right click on Views and then select New View. Inside of here, I'll go ahead and give my new view a name. So how about Column? And then next, I'll go ahead and specify the root container type of My View to Column. So this will go ahead and create our column container for us as the root container of the view. Finally, I'll go ahead and leave that page URL check box checked, which is going to make this Column view the primary view for our root page. And then I'll click Create View. And right away, we can already see our column container in action. Our workspace here, is divided into 12 evenly spaced columns with small gaps or gutters in between each column. The principle idea behind a column container here, is that rather than spending time worrying about alignment and positioning, we can just slot components directly into this grid structure. So inside of our layout here, let's go ahead and add a couple components. So I'm going to come up to my Perspective Component Palette. And how about we add a cylindrical tank into our view? So when I drop that cylindrical tank into my column container, it's going to take up just one column. But if I'd like, I can click and drag to make my cylindrical tank wider, and I can also click and drag to make my component taller. And that's all I have to do to figure out how my component should look inside of my column container. I've effectively just slotted it into position in this grid and given it the appropriate width and height. Next, I'm going to go ahead and duplicate this cylindrical tank by hold down CTRL and then dragging the mouse. And now I've given my cylindrical tank a friend. Now there's one, additional piece of functionality that's critical to how the column container works. In the top, right here, we see a Column Breakpoints section. This is here because the column container is built specifically for responsive design strategies. In layman's terms, we have given you the opportunity to make your column container look different at different screen sizes, with the express goal that you can make your components here, look good on anything from a smart phone to a tablet to a full desktop environment. The way that this works is I can select a breakpoint, let's say my large breakpoint here, and then I'm given a chance to configure how the components in my container should look at large screen sizes. More accurately, this is how they should look when my container is more than 996 pixels wide because that's the number that we have, here. So for instance, on a very large display, let's say that I only want my cylindrical tanks to be three columns wide and I want to put them adjacent to each other, just like this. So when I'm running on a 1080P monitor, let's say, this is how my view is going to look. If I go back to my medium breakpoint, we'll see that the cylindrical tanks there are exactly as we left them. If I had configured any bindings or scripts on those components, they've carried over through all three breakpoints. The only difference between the three breakpoints is how we arrange the components inside of the container. So for my medium breakpoint, let's say that I want the breakpoint to be at a slightly larger width; let's say 700 pixels. So now, if this column container's width is between 700 and 996 pixels, we will use this medium version. If the width is any smaller than 700 pixels, let's say that we're on a mobile device, we'll use this small version. So on the small version with Small selected here, let's do something a little bit fancier. Instead of putting my cylindrical tanks adjacent to each other, I'm going to go ahead and stack them. So I'll take this second cylindrical tank and drag it onto the next row. And then I'll make each of my cylindrical tanks be full width of the container, so all 12 columns. It's important to keep in mind that as you're arranging the components in the smallest breakpoint here, that all 12 columns are going to be shown inside of the session. The only difference is, on a mobile device, the columns will be very narrow, whereas on a large monitor, the columns will be very wide. That means when we're working in this small breakpoint like this, we want to make our components take up more columns so they can account for each column being narrower. So now that we have our three breakpoints set up, let's go ahead and take a look at this in a real session. So I'm going to save my project and then I'm going to come to Tools, Launch Perspective, and Launch Session. And now, if I come and make my browser very wide, this is how my cylindrical tanks will look, just as we've configured them in the large breakpoint. But then as we make the session narrower, so we start simulating working on say, a tablet, or a lower resolution display, we eventually start getting the medium breakpoint kicking in. And then finally, once we get to that smallest breakpoint, we've stacked the components on top of each other. So the basic principle behind the column container is that you can quickly whip up a view that will work well at any screen size, and allow you to quickly orient and align components.