I'm not ready to begin writing CSS. So this is what we have currently, and here is a mock-up of what we will ultimately have. So what you see here is interactive, but it's not HTML or CSS. So you can see I can click this and see what it will look like, but yeah, we have to actually construct this from scratch. Nonetheless, you can get a basic idea of how it'll work. Alright, so we're not going to do all of it at once. We'll tackle it in bits and pieces. We'll start with the project dashboard. So I can see that every project is basically a card here. Building Dashboard Cards 0:30We'll start with the project dashboard. So I can see that every project is basically a card here. And at the moment, if I switch back, we just have them stored as a list. So that's what I'm going to work on first. Now I'm going to open my Zeppelin app, and you won't have access to this, but it's okay. If I click on one of these cards, I can immediately see some of the basic CSS that I'll need to write. So I'm not going to copy and paste that, but I am going to use it as a reference. Okay, so let's switch over to Sublime, and I'm going to go to my project slash index page.Okay, so let's switch over to Sublime, and I'm going to go to my project slash index page. And again, this would be our dashboard. So yeah, immediately it sounds like each of these should be a div or something like that. Or maybe later it can be a view component or something, but I want to hold off on JavaScript as long as we can. So we'll have our wrapper, and then within each one, we'll have a card. The card will have a heading, so maybe that's an H3, and that will be the project title. And then after it, it looks like we have a basic description, okay? Maybe that will be a div as well, and we'll have project description.And then after it, it looks like we have a basic description, okay? Maybe that will be a div as well, and we'll have project description. Now we will have other things like an archive icon that will pop up, but we'll hold off on that. Okay, so it sounds like, as before, we're going to filter through all of them, and for each one, we will spit out a div. Now if it's empty, once again within a div, we'll say, no projects yet. Like so. All right, so now I can remove that entirely, and this should be more what we want. All right, so if I come back and give this a refresh, there we go. Tailwind Card Layout 1:59All right, so now I can remove that entirely, and this should be more what we want. All right, so if I come back and give this a refresh, there we go. We currently have two projects. However, they should each have a white background, right? That's what I can see here. Okay, so here we pulled in Tailwind. So I can now say bg-white, give it a refresh, all right. Now you probably can't see that too well because they're right on top of each other, but let's switch to Flexbox. So class will be Flex, give that a refresh, and now they'll display left to right.switch to Flexbox. So class will be Flex, give that a refresh, and now they'll display left to right. Next, I'm not going to measure, but I'm going to give each some margin right. We'll use maybe level four, yeah, just some spacing there. What else? It looks like our cards are rounded, and we do have some box shadow. So we'll add a rounded class, all right. Again, a little hard to see on this monitor, but it'll show up once we add a shadow. So you'll see right now I'm using the generic shadow that Tailwind provides out of the box. But don't forget, I can configure just about everything from my Tailwind.js file. Customizing Box Shadow 2:52So you'll see right now I'm using the generic shadow that Tailwind provides out of the box. But don't forget, I can configure just about everything from my Tailwind.js file. So for example, if we decide what we have here is the standard shadow that would be applied everywhere, that might be good for our default. So let's switch back, click on this, and then here I can grab that box shadow, and if I switch back, I can paste that in for the default. Okay. So I'm going to boot up npm run watch so that we can recompile this and keep track of any changes we might make. Anyways, if I come back to Chrome and I give this a refresh, we should change the shadow. Removing Bootstrap Conflicts 3:27changes we might make. Anyways, if I come back to Chrome and I give this a refresh, we should change the shadow. But hmm, it's not taking effect. And you know what? You know what I think it is? So here is our style, but it looks like we have another one that's overruling our Tailwind styles. And I assume this is because we're still pulling in Twitter Bootstrap even though we're migrating over. So if I were to comment that out and recompile, it's going to mess up a lot of our CSS.over. So if I were to comment that out and recompile, it's going to mess up a lot of our CSS. But if I give it a refresh, we should see our own CSS taking effect, and we do. So let's begin making some quick fixes. First, our container is no longer centered. So I can always say mx-auto there to horizontally center it on the page. Okay. So let's go back to our layout file. So yeah, this backtracks us a little bit, but it's okay. It's a change we would have to make anyways.So yeah, this backtracks us a little bit, but it's okay. It's a change we would have to make anyways. So right down here, I'm going to find my container. That will have mx-auto. And then we should have one other container at the top. Yeah. So again, we'll tweak these styles as we need to. Next, I want to make sure that we return our gray color that you can see here. So again, I'll switch to Zeppelin. And if I click around here, let's see.So again, I'll switch to Zeppelin. And if I click around here, let's see. You know what? It's not letting me select. I'm going to use... I use a tool for the Mac called Frank Diloup. So I could do that as well. And that will copy the color there. So now we have a couple choices. Of course, anywhere I can just spit that hex value.So now we have a couple choices. Of course, anywhere I can just spit that hex value. But if that's going to be my common gray color, again, this is something that I might set within my Tailwind configuration file. So I'm going to look for my colors here. And again, this is something you would work with your UI person to configure all of these values. For now, I'm going to set that to be my gray light color. Like so. Okay.Like so. Okay. So now, whenever I set a background of gray light, it will use that color for me. Okay. So maybe... I'm not sure. Maybe we can apply that to the body. bg-gray-light. Come back to Chrome. Give it a refresh.Come back to Chrome. Give it a refresh. There we go. Next, it looks like our navigation section has a shadow itself. Yeah, this is from that navbar Laravel class that's included with Laravel out of the box. So I'm going to go to my resources app.scss file. And I don't need that anymore. So we're going to get rid of all of this. Like so. And we probably won't even use that font either.Like so. And we probably won't even use that font either. So let's get rid of that too. Okay. Come back. Give it a refresh. There we go. And our navigation should be white as well. So right here, we'll get rid of navbar Laravel. And in fact, I think I can get rid of just about all of this stuff.So right here, we'll get rid of navbar Laravel. And in fact, I think I can get rid of just about all of this stuff. So I'm just going to change it to bg-white. Come back. Give it a refresh. And now we have a white background. Okay. Next, I can see that I have a left side. That's basically the logo. And then a right side. Reworking Navigation Flex 6:17That's basically the logo. And then a right side. So usually what I do in these cases is I will split it into two different divs. So let's see what we have currently here. This is a little more complicated because it's included with Laravel, so we have some area stuff that probably was PRed to the framework. So within this container, it looks like this is our left side. And then we have... Yeah, I'm going to get rid of that. That's probably a hamburger.Yeah, I'm going to get rid of that. That's probably a hamburger. Get rid of that. And then because we're no longer using these classes, I can get rid of all of this stuff. Okay. So let's see. So left side. And I'm going to make this the right side. Okay. Let's see.Okay. Let's see. I'm going to have to tinker a little bit, but that's okay. Okay. So no change. Next, I want the left side on the left and the right side on the right, obviously. So here, we could wrap these two within a div. Yeah, maybe we should do that. Okay. So down here.Okay. So down here. Let's indent all of that. And then here I can say flex and justify between. Okay. So if I switch back, give it a refresh, there we go. So now if you ever want to see the CSS that's actually generated, because I know when you use Tailwind, well, one issue with the utility framework, as opposed to something like Twitter Bootstrap, is it does assume you know your CSS. Whereas Twitter Bootstrap, I think it's much more developer-friendly, people who may notBootstrap, is it does assume you know your CSS. Whereas Twitter Bootstrap, I think it's much more developer-friendly, people who may not be as familiar with CSS, but they want to get up and running quickly. Any utility framework is going to assume that you kind of know what you're doing. It assumes you know Flexbox, and you know how to move things to the left and to the right. But that's just one of the trade-offs you make. I still think it's very much worth it. Anyways, justify between will set justified content to space between. So it will make sure the space between is identical for each.Anyways, justify between will set justified content to space between. So it will make sure the space between is identical for each. Next, and you can always do this, by the way, when you're tinkering, you can just do it inline, get it how you want, and then you just switch back over to your editor. So for example, if I were to say item center, okay, now that's going to, in this case, essentially vertically align the items to the center, even if you had tons of padding on the top and bottom, like this. See what I mean? Okay, so let's say item center, and then maybe py4. A lot of times, though, I'm just kind of tinkering with the numbers.Okay, so let's say item center, and then maybe py4. A lot of times, though, I'm just kind of tinkering with the numbers. So if that's too much, then maybe I'll bring it down a little bit. Anyways, what's next? So should we set an explicit width and height on these cards? I'm not sure yet. I think I'd probably like these cards to stretch as the browser width changes, but we might want to, hmm, let's think, projects, index. So here is each of our cards. So what if I just said the width is going to be one-third of its container?So here is each of our cards. So what if I just said the width is going to be one-third of its container? So I can use W-13, W-14. Again, if you're not familiar with Tailwind, all of this is going to be available in your Tailwind configuration file, or of course, you can go to the documentation. But personally, I often like to just go directly to the configuration to make sure I understand it, and often I will do things like this. Okay, here we go. So if I scroll down, here's all the various widths, and I will often reach for these guys here.So if I scroll down, here's all the various widths, and I will often reach for these guys here. So in our case, we're doing one-third, which of course is 33.3%. All right, so come back and give it a refresh, and now each one is taking up a third of our entire browser width, or its container in this case. Next, it looks like we need some padding within. So again, let's see, if I click on one of these, sometimes you can pick this up. Let's see. Oh, it's not giving me too much. Yeah, you see as I hover, we can get some bits and pieces.Oh, it's not giving me too much. Yeah, you see as I hover, we can get some bits and pieces. So right there, I see 20 pixels. That means we probably want about 20 pixels worth of padding all around. All right, so I'm going to go back to Sublime, and here, I'm not even going to check the actual value. I'm just going to try something out, like P3. So come back to Chrome, give it a refresh, and yeah, if I ever want to see exactly what that equated to, I'll just click on that. I'll go to computed, and it looks like that's 12 pixels.that equated to, I'll just click on that. I'll go to computed, and it looks like that's 12 pixels. So let's just bump this dude up. All right, so it looks like P5 is what amounts to 20 pixels. But again, you can go to your Tailwind configuration file if you want to find the exact values, and you want to set them. So now we're starting to make a little bit of progress. Now one issue here is it looks like the height of these cards is always going to be based upon which project has the largest description. So for example, if I were to change this one here, like let's just delete some of this,upon which project has the largest description. So for example, if I were to change this one here, like let's just delete some of this, you're going to see all of the boxes get smaller instantly. So with that in mind, maybe I should set a height. I'm not sure, honestly. So in cases like this, 200 pixels, that's either something we could either try to find something that would match that, or you could do it inline, or you can extract an actual component class. Because this is something I may use all over the site, it's an important thing, it's an important component, I may extract that. Truncating Descriptions and Typography 11:18Because this is something I may use all over the site, it's an important thing, it's an important component, I may extract that. But I'm not going to do it yet. I'm going to wait. Okay, so for now I'm going to set a height of 200 pixels, and we'll do it inline there, and give it a refresh. Okay, but next we can see, of course, we do have overlap. So this is a situation where we would want to provide an excerpt instead, because I don't always want the entire description to display. So you can either do that programmatically, you can do that on the form end.always want the entire description to display. So you can either do that programmatically, you can do that on the form end. So for example, when a user creates a new project, they have a section to specify an excerpt, and there we will enforce a limit on the number of characters they can provide. That way we never have to provide it. Or we can just limit the output here, programmatically. So I could say string, and if I go to Laravel's string class, I think there's a limit here. Limit the number of characters in a string. So you give it the value, in this case the description, and limit, this will be how many characters you want to limit it to.So you give it the value, in this case the description, and limit, this will be how many characters you want to limit it to. So let's just say string limit, and stick with the default, and then we'll tinker around with it. Whoops, class string not found, yeah of course, we didn't use the full path. In these cases, you can use the string class directly. For example, if I go to limit, these are all static methods that I could reach for. So yes, I could say illuminate support string, but usually, I'll show you this works first. Illuminate support string, give it a refresh, yeah. But usually you'll use the helpers instead.Illuminate support string, give it a refresh, yeah. But usually you'll use the helpers instead. So for example, in most cases, there will be little global helpers that you can reach for instead. So let's try that one. String limit, refresh, and now I'm going to get the same thing. Something to keep in mind. Okay, so now, let's just tinker around with what we want. Can we get 300 out of that? Okay, so now we're saying a maximum of 300 characters.Can we get 300 out of that? Okay, so now we're saying a maximum of 300 characters. And I think that looks fine. Next, it looks like we need a slightly less heavy heading, and then we do want some spacing below. So if I come back right here, I'm going to say, what is it, font normal? Is that right? Yep. But, hmm, let me go to Zeppelin. So here I can click on the heading and see, okay, a font size of 20.But, hmm, let me go to Zeppelin. So here I can click on the heading and see, okay, a font size of 20. It looks like he's using a family of Roboto slab. I'll try to track that down. But the font weight is normal. Okay, so let's see if I can just play with this for a moment. The current font size, if I scroll down, is 18.7. So I can say text large, and that brings it to 18. Again, this is something I may want to tweak the default values. Okay, so it looks like extra large would give me a font size of 20 pixels.Again, this is something I may want to tweak the default values. Okay, so it looks like extra large would give me a font size of 20 pixels. So I'm going to stick with the defaults as much as I can for now. Text extra large. Okay, I come back, and I'll give that a refresh. Next, we want to still give it some margin bottom. All right, let's see how that's looking. It actually looks like it has a decent amount of margin bottom below, right? So again, you have the option of measuring it specifically, and often that's exactly what you'll need to do.So again, you have the option of measuring it specifically, and often that's exactly what you'll need to do. But in these cases, I think I'm just going to kind of play it by ear. Okay, so now that I do that, it looks like I need to offer less space, or I need to have it scroll. I don't really want to make it scroll, so I'm going to give it less room, or a smaller character limit. Yeah, something like that. Next, let's switch back. Of course, we need that blue border.Next, let's switch back. Of course, we need that blue border. But it looks like, well, you know what? Maybe I should just give this some padding, because I'm imagining, yeah, there's about your 20 pixels worth of box padding. So then, this is basically my heading. So it looks like we have a bunch of padding there. So with that in mind, hmm, let me, give me a moment. Let's say padding on the top and bottom, on the y-axis. Let's do something like six.Let's say padding on the top and bottom, on the y-axis. Let's do something like six. And we get that. So maybe not that much. Refresh. Yeah, now we're pushing it down just a little bit. But next, yeah, you know what? I still think we have too much description there. If I look at the example, this is all very basic. And again, maybe I'm thinking we should add an excerpt to keep, because I'm thinking anIf I look at the example, this is all very basic. And again, maybe I'm thinking we should add an excerpt to keep, because I'm thinking an actual project description is going to be more lengthy than five words, like we see here in the mockup. So that's something to think about. I'm going to bring that down to 100. Yeah, something like that. Anyways, next, we can see that the description itself has more of a grayish color. So we'll say right here, class will be text gray. Let's just see what our default gray is.So we'll say right here, class will be text gray. Let's just see what our default gray is. Is that okay? It's not quite the same. Can I do gray light? No. So here's where I'm going to set the exact gray. So I'll select that. This is what gray looks like. So it looks like we have black, but with an opacity of 40%.This is what gray looks like. So it looks like we have black, but with an opacity of 40%. So I will go to Tailwind, down to Colors, and I'm going to set my gray color to that. So now if I go back to Chrome and I give this a refresh, there is the gray color. Okay, and we're starting to make progress. So I'm going to stop there, and we'll continue on in the next episode.
