30 Days to Learn Laravel, Ep 04 - Make a Pretty Layout Using Tailwind CSS

[Music] all right welcome to day four everybody Why Don't We Begin by quickly going over the homework from day three so you may remember I asked you to extract one of these navigation links into its own dedicated component so let's do that now together so in my components directory and actually a quick note uh I made it capital here it's kind of muscle memory from other Frameworks I also use uh but it can absolutely be lowercase if you prefer all right anyways uh nav link. blade. PHP all right let's grab this and paste it in like so switch back and now this can become xnav link like so all right obviously a little more work to do but let's have a look in the browser all right come back give it a refresh and yeah we do see the home link but it's not very functional right this needs to be dynamic so that it can be used for any nav link item all right so why don't we do that slot technique here let's come back to layouts and now this can become home this one can become about and this one can become contact all right come back give it a refresh all right that looks good but now of course you'll notice they're all linking to the exact same place all right so this is where the homework got a little bit tricky you may not know about this so it sounds like I need to pass in a an href like we did like we do with a normal link right that would make sense however in the nav link component how do we access it right uh well as it turns out all layal blade components have access to an attributes object and that object will contain uh all the details for any attributes you pass and by attributes I mean hre I mean ID I mean class any of these okay so if I come back to our component yeah what we could do initially is just open up an echo um PHP Echo and then say attributes and that will properly be stringified now yeah again keep in mind attributes is an object so there's actually more bells and whistles than what you initially see here for example if you want to merge in some sensible defaults you could do so like this but we're getting a little ahead of ourselves so let's keep it very simple right now all right back to the browser give it a refresh and now we should see the about page page and the contact page and yeah just to be crystal clear here what if I wanted to say uh the about page should have a style tag where the color is green or something like that well that too will be included in that attributes object so if I come back and give it a refresh sure enough it's green okay so now you're probably thinking okay fine but why would we ever do this uh and the answer is well maybe for simple things you wouldn't however in real life a navlink is a little bit more complicated than a simple anchor tag uh think about it you will need specific classes or styling based on whether it is the currently active page or not um there might be other situations where the presentation should differ based upon I don't know where you are in the website or what your screen size is anyways the whole point is it gets a little bit more complicated than a basic anchor tag in most cases so if we extract all of this into its own naving component we can isolate any of that complexity into a single file which is really cool all right but yeah that was just an example I'm going to delete it and now I want to make things look a little bit more attractive so here's what I'm going to do I'm going to switch over to tailwind css.com and actually on that note before we begin um if you don't know what tail1 CSS is trust me it's entirely fine you don't need to it's not a prerequisite for the course it's just a way to quickly and rapidly build up um some layouts and such without having to refer to a CSS file so Tailwind is a CSS utility framework and what utility means is you can declare classes that refer to specific uh CSS properties effectively so for example there might be a class name of text red 500 and that literally refers to set the color to this shade of red there might be another class name of mr-2 and that transl Ates to set the margin right to level two uh so again it's very easy to learn but it's not a prerequisite all right back to work now one thing that I especially like about Tailwind is its companion Tailwind ui.com so this is a paid tool but they offer free uh example components and those free ones are the only ones that we will use uh for this series okay anyways check this out if I browse components and we scroll down to application UI yeah notice they have examples of sidebars and multicolumn layouts and headings it ends up being a really great way to quickly scaffold uh any new application that you're working on okay so anyways I'm going to click on stacked layouts and yeah right here you'll see usually the first one is free to anyone but if you want any of these custom ones uh you have to pay for it and again we don't need the paid plan here so if you're working along we're just going to grab the free code here and I can click on it and that will give us what you see right here a quick application uh layout or UI okay so I'm going to grab this and within layout yeah we're going to replace all of this and it's a big chunk of HTML so that's okay we'll go over uh anything that's important and we'll probably delete a bunch of this as well all right so let's go back to the browser give it a refresh and what's going on here well we've pulled in uh this Tailwind component and notice all of the these utility classes but we haven't actually pulled in the Tailwind CSS uh framework so you can attach this to your build tool of choice if you know what that is but otherwise while we're still in the in the playing Phase the toying phase I'm just going to reference it on a CDN and I can do that I believe I have a shortcut for that yeah I can do that by creating a script and setting the source to cdn1 css.com and that should do the trick so if I come back and give it a refresh TDA it works pretty cool all right so now I want to take two minutes and just quickly delete anything uh that we're not going to use like these menu bars and such all right so your profile I'm going to search for that and yes notice uh for anything that requires a bit of interactivity in JavaScript they will include notes for what classes you should uh toggle in our case though it's not going to be relevant because we won't have any drop down menu all right so what you see here is the users's profile all right give that a refresh and now it's gone but notice there will be mobile styling as well so we should get rid of that uh as well all right here's the mobile version come back give it a refresh and now that's gone good all right what else uh we don't have five links we only have um three so we have one for home one for about and one for contact and then I will update these links cool and there should be let's see yeah this is the mobile specific version so if I come back and refresh we've updated it here but notice for desktop view uh we haven't so I'm going to look for dashboard one more time aha here we go let's update these as well home about contact all right come back give it a refresh that looks good to me next we have our heading here so it's set to default and if I scroll down here uh there we are and then notice it says your content here so example content goes here or the slotted content right and we learned about that in the last episode there you go so this would be the main content area uh for each individual page so let's see can we just swap that out with slot all right let's give it a shot so we come back give it a refresh and now notice a quick note it's going to appear as if we're on the homepage because those CSS styles are hardcoded on that home link but we will make that Dynamic shortly uh anyways right now we're clearly on the contact page as you can see here and then we're on the about page and then we're on the homepage okay but what about the heading here and this is where it gets a little bit tricky we've learned about setting a default slot here but now we've learned there's a section outside of that that also needs to be dynamic based upon the current page uh and there's a couple ways we can do this but one way that I like to is to Simply assume this is a variable do you want it to be heading title anything you want let's call it heading okay but now if I come back and give it a refresh it's going to blow up because well now it's looking for a heading variable that has not been defined so that's proper behavior okay so how do we Define that well if I come back to the homepage um there's there's two options here we could pass it through as a prop and a prop is just kind of a custom attribute like this heading or we can declare a named slot so think of your slots as different areas where you paste content and you could have a slot here a slot there and a slot down here right but you need a way to distinguish between them so we assign names this is your your dashboard slot this is your main slot this is your footer slot right so if we know that this represents our default slot at the very top let's create a new one for our heading slot and we do that by writing x-s slot colon and then in this case the name of the slot or the variable so we have heading here and I can say home page all right come back give it a refresh and it works very cool so yeah this is one way that we can solve that problem problem and I think it's probably going to be the path of least resistance um like I said we could talk more about props but I don't want to get too into the weeds when it comes to components because we have many other things to talk about first all right so let's go to the about page and update this one as well like so contact and again this can be anything uh you want we're just using a basic uh string for now so home about contact I think we're in business all right so now the last little fun thing I want to do is swap out some of these images uh instead of the tail one UI logo why don't we use of course the ler cast logo and I will paste that in right here yeah layer cast.com images logo logo triangle or use your own logo come back give it a refresh that looks nice and then finally this guy this tail one UI guy I'm always seeing uh let's come down where are you buddy right here let's swap that out with our mascot Larry the robot so I will we'll paste that in and once again lc.com images Larry aif face and nope there's two versions of this dude where's the other one here you go here's the other one like that so come back give it a refresh and I like it okay and then finally I think this dude's name is Tom Cook why don't we change his name to Larry robot and we'll do just me Jeffrey lc.com all right give it a refresh come down down and now we see Larry robot all of this is looking good especially when considering we spent maybe 10 minutes or so on this okay so now in the next episode I'm on the contact page but the home button is highlighted which clearly is not correct so we'll have to figure out how to conditionally uh create layout or apply styling based upon what the current URL is or what the current route is so yeah I'll show you how to do that in day five no workk today I think you've done enough uh and I'll see you later bye

Channel: Laracasts

Views: 7,970

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: 37QPJZ1la2g

Length: 12min 39sec (759 seconds)

Published: Fri Apr 12 2024