Up And Running with Pest
Playing
03. Creating a base layout

Episodes

0%
Your progress
  • Total: 4h 19m
  • Played: 0m
  • Remaining: 4h 19m
Join or sign in to track your progress

Transcript

00:00
Before we write any real code, let's go ahead and get a basic layout for our app set up. And for this, we're going to go ahead and use Tailwind CSS. So the first thing is, let's just clear out what we have
00:12
in terms of this default welcome view here. So I'm going to go ahead and just get rid of everything in here and just create a really basic document layout and just call this book friends. So we're going to rename this, I think, to home.blade.php.
00:26
That would make more sense. And let's go ahead and create our controller here. So let's call this home controller. And we'll go and register this route really quickly,
00:38
because by default, we've just got this route closure. So let's take all of this, switch this out to our home controller, and we should be good. So under our home controller, let's go down and just make this invocable. We'll go ahead and return that home view, and we should be good.
00:57
So if we come over now, we just end up with an empty page. OK, let's get Tailwind installed so we can style this up nicely. And we're just going to follow the installation instructions for Laravel. So we've already created a new project.
01:10
Let's go ahead and use npm install on Tailwind and any of the other bits that it needs. So let's pull this in. And we'll go ahead and run npxtailwindcss init to generate our Tailwind config file. OK, so let's pull that command in.
01:24
And there we go. Great. So next thing to do is just update webpack.mix.js to pull Tailwind in. So let's grab this line here.
01:34
And let's go over and open webpack.mix.js, come down to post CSS, pop that in there, and let's move on. OK, so in terms of the Tailwind config, we need to make sure that we include all blade.php files. We're not working with JavaScript or Vue here.
01:49
So let's open tailwind.config.js. And just under the content section, that will do. And that will look for any Tailwind classes inside of any of the blade files that we've created. Next thing to do, just update app.css with the base components and utilities.
02:06
So let's open app.css in resources and CSS and paste this in. And then finally, let's run either npm run watch or npm run dev. So let's pull up our terminal and run npm run watch. And we'll just open up a new terminal window so we can run any commands in here.
02:24
OK, so let's just test this out really quickly. So we're going to come over to our home.blade.php file. And let's just create a div out here with a class of bgblue500 and just say hello, just to make sure that this is working.
02:39
And it isn't. So I have a feeling that we didn't include our styles. So let's go ahead and run link here just to generate a style sheet. And the href for this is just going to be using the mix helper.
02:50
And we're going to CSS and put in the compiled app.css file. OK, let's go over. There we go. Tailwind is pulled in.
02:58
So let's go and take what we've got here and put this into a layout component that we can reuse wherever we need. So we're going to go ahead and run php artisan make component. And we're going to say layouts and app.
03:11
And let's go over here. And we should see a layouts folder in view components created with app. And over here in the views directory, we've got app.blade.php. That is where we want to put all of this.
03:24
And then inside of the body, we want to pull in any of the content that we pass into this via the default slot. So let's just test this out over on the home page. So we can get rid of all of this now.
03:36
And we can say x layouts.app. And we can go ahead and just say hello in here. And what that should do is still have hello in. But if we just open up our development tools,
03:48
we've got all of that structure that we created within that base layout. So this is just going to help us not have to duplicate content over. So to create the main structure of our app layout, let's go and just around this slot, create out a div.
04:03
And this is going to have a max width of, let's just say, 4xl. We're going to set mx to auto. So this sits in the middle. We'll give this some padding as well.
04:12
And we're also going to make this a grid. And we'll set grid cols to 8 with a gap of 12. And we'll set a margin top of 16. What that means is we can have a sidebar.
04:24
And then we can have our main content, which will be where we put all of our slot stuff. So the sidebar will contain all of the navigation items that we saw from the introduction.
04:34
OK, so in terms of the actual sidebar sizing, let's say colspan 2. And we'll set a border on the right here. So that separates that out.
04:45
And we'll set this to a color of slate 200. And we'll go ahead and for every single item in here, set a space of 6. So as we have our link items in here,
04:56
that's going to go ahead and separate them out nicely. There we go. So these are separated now with that line down the middle. And because we've used a colspan of 2 here,
05:06
we need to fill this up with a colspan of 6 under the main content. So let's say colspan and 6. There we go.
05:14
We won't see any difference there. But that will now span the entire width of the container that we've created. OK, so for the main content,
05:23
we want a kind of reusable header in here. So I'm just going to go ahead and say if is set header. And we'll end that is set in there. And if that's set,
05:33
let's create an h1 out in here with a class of font bold. And we'll set the text a little bit larger, text to Excel, text slate, and let's pick 800. And then inside of here is going to be the header
05:46
that we pass through. So what we can now do is over on home.blade.php, as well as our main content, also include a header in here as well.
05:56
So that's going to look like this, xslot name and header. And then we can just down here say home. And then that will be the main content on the page.
06:09
So if we come over, there we go. Let's just space this main content out a little bit. So I'm going to wrap that in a div here. And let's say margin top of eight,
06:20
just to space that out. OK, let's work on our navigation item styling. And then we can just duplicate them down as we go. So let's just create one for now.
06:30
And we'll go ahead and make this an unordered list. Let's change that to an unordered list. And then each of these are going to be list items. And they are going to have anchors inside of them.
06:40
So for example, let's just create out the feed link in here and style this up. And then we can duplicate that down as we need. OK, so we're going to go ahead and set this to a font bold.
06:50
Text is going to be large. We'll set the text to slate 600. And we'll say that when we hover on this, the text will change to 800.
07:00
We'll set this to a block level. And we'll set the padding on the y-axis to one, just so we have a little bit more click area. OK, if we come over, there is our feed link.
07:09
When we hover over, that looks nice. And just up here, we're going to have the user's name only when they're signed in. So let's go ahead and add a name in there.
07:20
And we'll change this to just a span. We'll have it as the same styling. Now, we want these separated out. So as an example, we're going to have an unordered list here
07:31
just underneath this one, which is also going to have LinkedIn. So let's just get rid of this one. And this is going to be something like my books. And because we used the space Y6,
07:45
that's going to go ahead and space out that unordered list down here. So it's kind of grouping items. And then at the very bottom, we're going to have another unordered list, which will just contain logout, for example,
07:58
and also sign in and register. So there we go. There is our base layout. We can reuse this across any pages we create.
08:06
At the moment, it's not responsive, but that doesn't matter too much. We're not going to fiddle around too much with the design. At least now, we've got a base layout, which we can use very, very simply on any of the pages that we create.

Episode summary

In this episode, we set up the basic layout for our app before diving into the main code. Starting off, we clear out the default welcome view to make room for our own structure, and rename the relevant Blade templates and controllers for a cleaner setup. Once that's sorted, we switch up the routing so everything points to our new home controller and view.

Next, we bring in Tailwind CSS for styling. We go through the Tailwind installation steps for a Laravel project, updating the necessary config files, hooking Tailwind into our build process, and making sure the styles actually show up by tweaking our Blade template to reference the compiled stylesheet.

With Tailwind working, we create a reusable layout component using Laravel's components feature—this will be the base for all our pages going forward. We set up a grid layout with a sidebar for navigation and a main content area, making sure the structure is flexible and reusable. The sidebar gets some navigation items and placeholder user info, and we add a slot for page-specific headers and content.

Finally, we style up the navigation, hook up some example links, and show how the layout helps keep everything consistent as we add more pages. By the end of the episode, we've got a solid, styled base layout we can reuse throughout the rest of the app. It's not responsive yet, but it's a great foundation to build on.

Episode discussion

No comments, yet. Be the first!