Vertical text using TailwindCSS
[00:00] In this video we'll build the skeleton for what I like to call the power box. This is a modified version of the more popular action matrix and it basically allows you to plot tasks based on impact and urgency. If a task is impactful and urgent, it goes in the top right box; if it's a low impact, non-urgent task, it goes in the bottom left box, and so on.
[00:23] Let's start by creating a full screen flex container with a grayish background. We'll do div flex h-screen bg-gray-100, then as child elements we'll have one element for the left bar, which is low urgency, another one for the boxes, and another one for the right bar, which is high urgency. Let's also add some backgrounds: we'll do bg-gray-800 for the low urgency, we'll leave the boxes as they are, and then bg-gray-800 for the high urgency. Now, the low urgency bar will have a fixed width, like w-6, the boxes will stretch to fill all the available space, so we'll do flex-1, and then w-6 again.
[01:17] Inside boxes we'll add another 3 sections: one for high impact, one for the squares, and another one for low impact. Now this will be a vertical flex because we want the middle element to grow and push the other two elements to the extremities. So we'll do flex flex-col, and then here we'll add flex-1. High impact will have h-6 bg-gray-800, and we'll do the same for low impact. Let's continue styling the labels. We'll start with low urgency; I'll center the label using flex item-center justify-center, and then we'll wrap it using a span so we can rotate it.
[02:06] We'll do text-white rotate-90. To rotate it the other way we can do -rotate-90. It worked, but now we have some text wrapping going on. To turn it into a one-liner we can do whitespace-nowrap. Let's also do text-xs uppercase and tracking-widest to make it more legible. We'll do the same for high urgency. So let's copy this, paste it here, replace the text with high urgency, and then rotate it the other way.
[02:45] Let's continue with high impact. We'll do flex item-center justify-center to align it, and then text-white text-xs uppercase and tracking-widest. Let's copy these and style the low impact as well, and here it is. Now that we have the labels in place, let's move on to the inner squares. We'll split the high and low impact into two sections by adding flex flex-col, and then two child elements. Both elements will take half of the available height, so we'll do h-1/2, and to separate them with a border, we'll do a border-b-4 border-gray-200 for the first one, and for the second one we'll do border-t-4. This way the resulting border goes straight through the middle.
[03:47] Moving on to the inside squares, high impact will need to have two boxes: one for low urgency and another one for high urgency. So we'll turn this into a grid and then grid-cols-2. Let's add two elements: one for low urgency and one for high urgency. To separate the two boxes we'll do as we did before; we'll take half of the border from each element. So here we'll have class border-r-4 border-grade-200, and then here we'll have the same thing, but the border will be a left border. Let's copy and paste these for the bottom boxes as well, and there we go.
[04:37] Finally, let's make sure these four boxes are all scrollable. To test things out, we'll loop through a made-up array. We'll go here, and say ul and then li. We'll do v-for item index in array, and then we'll do from, we'll pass it an object with a length key, and let's say 100. And here we'll say "some important task", and here is the list. As you can see, this broke our layout. To make the list scrollable, we can add overflow-auto to our parent. So we'll do here overflow-auto, and then here, on our main container, we'll do overflow-hidden. And here it is. Let's do the same for all the other elements. We'll do overflow-auto, and here as well, paste that in overflow-auto, and overflow-auto, and here it is; all the lists are scrollable.