Name: Scaffolding a Multi-Panel App Layout with Flexbox
Uploaded: 2021-05-14T13:20:22-05:00
Description: Learn how to use Tailwind’s Flexbox utilities to recreate the multi-panel app layout found in Discord. You’ll be able to choose which panels should stay fixed, and which should stretch to fill up the remaining space of the viewport.

Intro to Styling Custom UIs with Tailwind Utility Classes

Scaffolding a Multi-Panel App Layout with Flexbox

Making Panels Scrollable with Flexbox

Customizing Tailwind’s Color Palette With Your Brand

Adding Custom Fonts to Tailwind

Building a Hoverable Server Selector With SVG

Transitioning Rounded Corners using the JIT Compiler

Conditionally Applying Classes Based on the Active URL

Building the Active Server Indicator using Group and Transform Utilities

Solving the Duplication Problem with Components

Building the Server Header using Arbitrary Values from the JIT Compiler

Styling the Channel List and Controlling Layout

Identifying Repeated Patterns while Dynamically Generating the Channel List

Styling the Active Channel Link with a New Dynamic URL Segment

Using a State Variable to Add Unread States to the Channel Nav

Building Collapsible Categories with Rotating Arrow Icons

Building the Channel Header with Flexbox Shrink and Truncating Text

Styling the Search Box Using the Forms Plugin

Using Components to Dynamically Generate the Channel's Messages

Dynamically Generating the Server and Channel Navs

Using Responsive Design to Hide the Desktop Navigation

Craft Scalable, Custom-Made Interfaces with Tailwind CSS

Learn how to use Tailwind’s Flexbox utilities to recreate the multi-panel app layout found in Discord. You’ll be able to choose which panels should stay fixed, and which should stretch to fill up the remaining space of the viewport.

https://app.egghead.io/api/v1/lessons/tailwind-scaffolding-a-multi-panel-app-layout-with-flexbox/subtitles

Instructor: [0:00] When scaffolding an app layout, I like to start from the outside in. Taking a look at Discord, I see three main pieces here. We have the server selector, the channel selector, and then this main message area. Let's come over to our app and start with three new divs. We'll have servers, channels, and our main area.

[0:25] By default, these divs lie on top of each other, but we can use the flex utility class, which will give our app a flex layout with a default flex-direction of row. Over in Discord, we can see the server selector is the darkest gray. Then the channel selector is a little bit lighter, and the main is the lightest.

[0:46] Let's give our server selector a background of gray 800. Channels will be background gray of 700, and the main area will be background gray 600. We'll make the text white so we can read it. Now, let's make our parent container here a height of the full screen so that all these divs fill up the available space.

[1:12] Now, if we hop back over to Discord, we'll see that the server selector and the channel selector have this fixed width, but as the user resizes the app, it's this main area that takes up the available space.

[1:27] Flexbox is perfect for this. We can tell our layout to have the main panel here take up all the available space using the flex-1 utility class. Now, if we pop open the inspector, we can see it does just that. This is why I like Flexbox for application layouts. It's easy to pick which panel should grow and shrink, and which ones should be fixed.

[1:52] Now, let's add a little bit of padding to each one of these panels using the padding utilities. These utilities use Tailwind's default spacing scale, which starts with  for no padding, then goes to 1, which is four pixels of padding.

[2:07] You can see here it adds a little bit of padding around servers. Then we can go to 2 for 8 pixels, 3 for 12, and so on. We'll go with p4 on all three of these panels. Now, we're seeing our layout start to come together.

[2:25] Next, let's make a white div for a dummy server selector here, so we can visualize this a little bit better. The way we can make a white circle is by using a new div here. We'll drop TW in, so we have some content. We'll go ahead and make the background white, and we'll make the text gray 800.

[2:50] We want to give this white box a certain size. Over here, we can inspect one of these and see that these are 48 by 48 pixels. We can explicitly set the width and height of our box to 48 pixels using the width and height utilities.

[3:07] Width uses the same spacing scale that padding does. It starts off zero. One is four pixels, which is small. Two is eight pixels and so on. In our case, we want 12 for 48 pixels, and we'll also set the height to 12 as well. That will give us our 48-pixel box.

[3:31] We can use rounded to make this a rounded rectangle, and there's a rounded-full class, which will make it a complete circle. Then, to center the title, we can go ahead and use flex-items-center justify-center because that's the easiest way to center this text.

[3:49] Our server panel's looking pretty good. Let's come back to Discord and look at the channel selector. Because these channels are all different lengths, we can go ahead and use a fixed width on this panel right here regardless of the content. If we inspect this, we can see that this is 240 pixels.

[4:08] Back in our clone, let's come to our channels panel. We'll use w-60 to get this to be 240 pixels. If we come back and make this a little bit smaller here with the inspector, we can see that we still have the behavior where our main panel is flexing to take up the additional space, but our server and channel selectors remain fixed.

[4:32] You can see that Tailwind's default spacing scale is nice to work with. Every unit on the scale is four pixels, and it's used across a lot of the common utilities, like padding, margin, width, and height. Looking back at the channel selector, we see that there's this fixed header here.

[4:48] As we scroll the channels, this part takes up the rest of the space. Again, we have a good situation for Flexbox here. We want this entire panel to be a new flex parent, this to be a fixed height, and this part to flex to the available space.

[5:05] Let's take a look and see how tall this is. It's 48 pixels. We'll come back to our channels here and drop in two new divs, one for the header and one for the header and one for the channels. Again, we want to make the parent a new flex parent.

[5:23] We'll see that, by default, the direction is row, so these are laid out next to each other. We want these to be on top of each other, so we'll use flex-col to change the direction to column.

[5:36] Now, let's give our channels a background of black, so we can see this layout as we build it. First, let's move the padding off of the parent. We'll drop it right here. We'll also drop it on this panel. Now, we can see we have our two panels right here.

[5:57] It would be nice if conceptually this channel's part stretched to fill the remaining space, even though we don't have a lot of content in there right now, again, because that is what's going on in Discord. We can do that like before using the flex-1 utility. There, it stretches out.

[6:18] Let's remove background black. We can add a bit of shadow here to the header using the shadow-md utility. Now, we have a nice little header treatment here with a channel's panel that's ready for the rest of our content. If we look at the main panel, we'll see it's a similar treatment with this header, a little shadow, and then a scrollable main area.

[6:42] Let's copy this treatment, come here, remove the padding. We'll put general here and messages. Again, we can drop a background black on our messages to see that, right now, it's not filling up this whole space. If we make this a flex parent and a flex-col, it should do the trick.

[7:11] Now, if we resize this, we'll see that everything is flexing in the right direction. The things we want fixed, like the header and the width of these two panels over here, are staying the same. Flexbox is doing a good job of laying out the rest of these things for us.

[7:30] That's how I think about using Flexbox for app layouts. The Tailwind utilities make it easy to tinker around because these little utilities are just doing one thing. It's easy to pull them on and off different panels, and it's also a great way to practice and improve your skills with Flexbox.

Scaffolding a Multi-Panel App Layout with Flexbox

Share this video with your friends

Course

Craft Scalable, Custom-Made Interfaces with Tailwind CSS