Cleaning Up Templates 0:00Alright, let's get into it. Here's what we currently have, and this is where we'd like to end up. So in terms of HTML, it looks like we have a header up top, and then we have a main section that is divided into three columns. Alright, let's get going. We'll start with this dashboard here. Go to my editor, let's go to home.blade, and yeah, this section here, you are logged in, that's all this. So I think we can safely get rid of just about all of this, and we'll just add a placeholder here for now.So I think we can safely get rid of just about all of this, and we'll just add a placeholder here for now. Alright. Next, this section, this of course will be the layout file. And if we visit it, again, it's mostly formatted for Twitter Bootstrap. So I think we can safely get rid of just about everything within this file. So now we'll have a header here, and this will be our logo. Let's have a look. Yep. So yeah, notice you have your header and your main section. Adding Page Padding 0:54Yep. So yeah, notice you have your header and your main section. But it's currently flush against the edges. So generally what I do in these cases is I will surround it with a section, and then the section will always have padding on the left and right. Like so. Okay, so now let's do the same thing here. And I don't think we need that padding there. Come back, refresh, and that's what we get. Okay, so now finally, we can still use containers, but the section simply ensures that it neverCome back, refresh, and that's what we get. Okay, so now finally, we can still use containers, but the section simply ensures that it never goes against the left and right edges of the browser window. So have a look. Now our container has a maximum width of 1280 pixels, and we do set the margin left and right to auto. So if I zoom out, you can see this section always goes to the center. Now we do the same thing here, and we're all set to go. Now why don't we start out by grabbing my logo. So here I can download the SVG. Adding Logo and Spacing 1:48Now why don't we start out by grabbing my logo. So here I can download the SVG. Here's my Tweety directory, we will save it to public, we'll add an images directory, and it'll go there. Okay, so now, honestly, at this point, I'm not even sure what the best practice is for how we add an image for heading, but we'll go images, logo.svg, and call it a day. So come back, refresh, and that's better. Okay, next, let's provide a little breathing room. So I'm going to go back to my layout file, and even if only temporarily, let's add just a little bit of breathing room on the top and bottom. Building Three-Column Layout 2:21So I'm going to go back to my layout file, and even if only temporarily, let's add just a little bit of breathing room on the top and bottom. Yeah, okay, so we have our header and our main section that will now be divided into three columns. But we don't want to do that in the layout file, because there may be other pages that aren't three columns. So that's why right here, in our main section, we simply yield the content, and we can pick that up right here. So now we'll have a div that will flex three specific items. One, two, three.So now we'll have a div that will flex three specific items. One, two, three. Come back, refresh, and you'll see at the moment they only take up as much space as they require. However, if we set all of these to flex, now they flex to take up an equal amount of space. So notice one, two, three, and we have three simple columns. Okay, so now in Zeppelin, we can see the left column is the sidebar links, the center column is the timeline, and the right column is the friends. All right, let's do this. Right here, I'm going to divide all of this up. Creating Sidebar Links 3:22All right, let's do this. Right here, I'm going to divide all of this up. So I will simply include sidebar links. Now in terms of the underscore at the beginning, it's a convention, you don't have to do it, it really doesn't matter. Sidebar links. And now just to save us a little bit of time, I'm going to paste in a unordered list with a bunch of list items and links. Very, very simple stuff. Notice each item is bold, large text, some margin below, and block level. Building Friends List 3:46Very, very simple stuff. Notice each item is bold, large text, some margin below, and block level. Very, very simple. So now if I come back and give it a refresh, there we go. Next let's work on the friends column. So that will map to this section right here. All right. We'll go back to our home dashboard, and this is now the friends. So we will include a friends list. I'll create that.So we will include a friends list. I'll create that. And this too can be an unordered list. Okay, so let's see. We have a heading called friends at the top. And then for each one, we have the avatar and the name. So it sounds like maybe, should we do a div there? This will flex. We will have some kind of avatar, and then we will have the person's name. So in situations like this, rather than whipping up a bunch of test users in the database,We will have some kind of avatar, and then we will have the person's name. So in situations like this, rather than whipping up a bunch of test users in the database, I'm not quite yet to that point. So instead, I stick with repeated static HTML that later I swap out when I'm ready to make it dynamic. So why don't we grab a dummy avatar for the moment? And there's all sorts of little APIs on the web. One I often use is called Paravatar, but again, there's 20 you could choose from. So notice we link here. Let's just give it a shot.So notice we link here. Let's just give it a shot. I'm not sure what the size should be. Let's see. Click on this. It looks like it is 40 pixels. Come back. Give it a refresh. And there you go. However, we want that rounded, so I'm going to give it a class of rounded full, whichAnd there you go. However, we want that rounded, so I'm going to give it a class of rounded full, which should effectively make it a circle. Yeah. Give it a refresh. There you go. All right, but next, we want some space after it, and we want them aligned to the center. So I can say item center, and then here, margin right, maybe four. Yeah, maybe too much. There we go.Yeah, maybe too much. There we go. OK, next, our friends heading should be bold, and it should be 20 pixels. So let's come up here. Font bold, text extra large, and then maybe margin bottom of four. There we go. OK, but next, notice how the friends list is all the way over here, and it almost doesn't feel like the page is centered, even though it is. You notice here's the full width, so we're giving that much room for the friends list, even though we don't need it.You notice here's the full width, so we're giving that much room for the friends list, even though we don't need it. So instead, why don't we say column two is really the one that can flex to take up all remaining space. So here's what I can do here. Let's go back to our home dashboard, and I'm going to remove this class for both of the sidebars. Now if I come back and refresh, you'll see that this column expands as much as it needs to, but these take up a limited amount of space. So what I can do instead is now say, well, this should be, I don't know, spitballingto, but these take up a limited amount of space. So what I can do instead is now say, well, this should be, I don't know, spitballing one-fourth. Refresh, and yeah, you get the idea. However, when you're adding those widths, be careful, because when you're dealing with a responsive layout, for example, on an iPhone, this is what we currently have. So often, you'll want to do things like this, like only for large screens should we flex, and then the same for setting a width. So now notice on mobile, we have our links, then the main section that we haven't worked on, and then the friends list.So now notice on mobile, we have our links, then the main section that we haven't worked on, and then the friends list. But once you get to a large screen, we end up with three columns. Anyways, let's get back to it. So the text for each of these links should be 14 pixels, which should be small text. So right here, we should be able to do it here. Text, small. Come back, refresh, and there we go. So at this point, what I could do is just say for each, range 1 to 8. For that many times, we will render this hard-coded HTML. Creating Tweet Composer 7:31So at this point, what I could do is just say for each, range 1 to 8. For that many times, we will render this hard-coded HTML. And then when we're done, we'll swap this out with all of the friends for the user. There you go. However, we do need a little space below, don't we? All right, what else? Well, now we can move on to the main timeline. So we start with the tweet box, and then the timeline below. Let's go back to our homepage. I'll do this in line for the moment.Let's go back to our homepage. I'll do this in line for the moment. And yeah, we need that top section for the tweet box, and then the timeline itself below. So to start, within here, we're going to have some kind of text area, right? That'll be the body of the tweet. And then maybe below it, we'll have a horizontal rule, and then our button. Let's see, it says tweet to rule. All right. Finally, if I switch back, you'll notice the whole thing is wrapped in a rounded blue border. So can we put it up here?Finally, if I switch back, you'll notice the whole thing is wrapped in a rounded blue border. So can we put it up here? Border, border blue, and then rounded large. Again, I don't know these. I'm just kind of doing them on the fly, and then we can tweak as we need to. All right, it still doesn't look very good, but we can clean this up. So first, obviously, this sidebar is too much. So we don't want to set it to one-fourth. Maybe update it to one-sixth. And then what I'm going to do is, well, let's come back.Maybe update it to one-sixth. And then what I'm going to do is, well, let's come back. There you go. But notice how this is flush up against our main section. Let's, for large devices, add some margin on the left and right, just to give it a little bit of padding there. Yeah, a little better. So now if I zoom out, you can kind of see we're starting to build that layout there. Okay, next, clearly, this is too much, and I can see the text area isn't taking up the full width.Okay, next, clearly, this is too much, and I can see the text area isn't taking up the full width. So here's what we'll do. Let's get rid of the rows and instead switch to a class where I set it to the full width of the container. Next we want some padding within it. Maybe a little more. We should set a placeholder. So I think he had a... My designer had a placeholder of What's Up Doc?So I think he had a... My designer had a placeholder of What's Up Doc? That's fine. And let's switch back. All right, then we have the user's avatar, and then a blue button with a shadow. All right, let's come down here. This will have a background of blue, it'll be rounded large, and we want a shadow. Maybe PY4, PX2, and make the text white. Yeah, maybe too much padding. All right, finally, on our horizontal rule, let's set some margin on the top and bottom.Yeah, maybe too much padding. All right, finally, on our horizontal rule, let's set some margin on the top and bottom. And then next we need the user's avatar. So let's see. Let's reuse this right here. And that's going to go in this footer section, isn't it? So we'll have the avatar and then a button. This will flex, and we're going to do justify between, and that'll effectively put, if I refresh, the avatar on the far left, and this one on the right. So we are justifying the space between each of them to be an equal amount.refresh, the avatar on the far left, and this one on the right. So we are justifying the space between each of them to be an equal amount. So we're getting pretty close. I do think we have a little too much padding on the bottom. So what if I change that to be PX8, but PY4, or 6, or maybe 6 isn't too bad. Okay. So let's go back, PX and PY6. And this is what we have after a quick go. Okay, so next I think I need a little breathing room below the logo. So you'll notice this is just a long process of small tweaks until you get what you want. Building Timeline Feed 11:19Okay, so next I think I need a little breathing room below the logo. So you'll notice this is just a long process of small tweaks until you get what you want. Okay, so let's finish up by working on the beginnings of the timeline here. So I can see the container has a gray border all around it. It is rounded, and then it consists of various items. Here's an item. Here's an item. Here's an item. Okay. Back to PHPStorm.Okay. Back to PHPStorm. We'll go back to our home page. This section right here I think can be extracted to a partial, and we'll call it Publish Tweet Panel. And paste that in. Okay, so now things are a little bit cleaner. This will now be our timeline, and I said we'd have a border. It would be, I don't know, 300, and it would be rounded, and then within it we would have any number of tweets.It would be, I don't know, 300, and it would be rounded, and then within it we would have any number of tweets. So these tweets, if we take a look, consist of an avatar to the left and then a main section to the right. So we have two columns once again. We could do a side, keep it simple, whatever you want. This will be the avatar. This will be the user's name and details. So why don't we once again grab this. Obviously there will be some margin to the right.So why don't we once again grab this. Obviously there will be some margin to the right. This will have a flex because we want things left to right. And then we'll start out with the user's name. So maybe that'll be an H5. And again we'll say John Doe there. It will be bold. And then we want some margin below. Next, let's see, we want their description. So I'm going to copy this.Next, let's see, we want their description. So I'm going to copy this. And by the way, notice the font size is a little bit smaller in black. So this will be the body here. I'll paste all of that in. A little bit smaller. And reformat. All right, let's have a look. Come back, refresh, and we're starting to get there. Clearly we need some padding all around it though.Come back, refresh, and we're starting to get there. Clearly we need some padding all around it though. So maybe P4 once again. And then the avatar is too small. The avatar should be 50 pixels in this case. So we'll update that. Give it a refresh. But you know what? It's still too small. So when you're working with Flexbox, you'll often run into this where you feel like you'veIt's still too small. So when you're working with Flexbox, you'll often run into this where you feel like you've set a width there, but notice that the actual width is 22 pixels. And that's because you've set a display of flex here, which means all of the children will flex, will literally flex to optimize for space. So in this case, we could say if you don't want it to shrink, flex shrink zero. Do not shrink. So that can be useful, and you can reference that here. Flex shrink zero. Come back, refresh, and there you go.Flex shrink zero. Come back, refresh, and there you go. Okay, next I think we have a little too much breathing room here, and of course we need some space below the tweet box. So let's update this to MR2, and then the tweet panel will have some margin bottom of eight. There you go. So now, let's see, if I switch back, this now represents a single tweet. So why don't we extract that, paste it in, and if we were to give this a shot, let's imagine we have, you know, four.So why don't we extract that, paste it in, and if we were to give this a shot, let's imagine we have, you know, four. That's what it currently looks like. So let's see how this compares to what they have. So it looks like there is a border below every single tweet, and we don't have that here. Okay, so each tweet will have a border on the bottom, and it should be gray. There you go. Now, if I switch back, you'll see the thumbs up and thumbs down. I'm going to hold off on that just for a little minute, but one last thing. You'll notice the width here, 700 pixels versus 728.I'm going to hold off on that just for a little minute, but one last thing. You'll notice the width here, 700 pixels versus 728. So what I may do is in our home dashboard, what we could do is say, set a maximum width here of 700 pixels. That's as wide as we want it to get. Okay, so finally, just a couple more things. Let's set a background of blue here. Make it rounded. Yeah, and then a little padding. Looking better.Yeah, and then a little padding. Looking better. And then finally, I'm still not happy with this. It's too much. We could let it auto fill or bring it down to 32. That's not too bad. But now notice it feels like it's not centered. So if I hover over it, we still have this extra room down here, and that's not quite right, is it? So here's what we'll do.right, is it? So here's what we'll do. Notice I have a display of flex here. I can now say, well, I want to justify between. Just like we did before, and that should, yeah, there we go. That pushes it to the edge. All right. So it took a little bit of tweaking, but that's just real life. Come back. And I think that's good enough to move on.Come back. And I think that's good enough to move on.
