So obviously we're going to create styles for those but I think this is a good stopping point for us and after this, we're gonna have a completely finished homepage and we're gonna have the base styles we're gonna need for later on in the course as well.

So in this last guide, let's take a look at our final version of the application. You may notice that we don't have any spot for filters and that's because I created this portfolio application early on and I decided I wanted to add the filters later.

So that is why that is not in that version of the app but with what I'm gonna do, I want to remove this welcome to my portfolio text and then I want to bring up all of these buttons and I actually want them to span, I want each one of 'em to span the width of one of these columns and as we're gonna see, CSS Grid is going to allow us to do this automatically.

So let's get started, we're going to write quite a bit of code in this guide. So I have our portfolio container here and let's scroll down and you can see right here that we have the page title and so we don't need that anymore, that was kinda helping us learn how to work with state so we can remove that.

Now, we have our portfolio items wrapper as a final div and then we have these buttons here. Well, there's a couple of changes that we can make, first we are going to be able to remove each one of the buttons from here and put them inside of the portfolio items wrapper but then we're also going to be able to get rid of the div above it as well and we're gonna wrap it all, and consolidate it all into this one portfolio items class.

So let me remove that and that one, and then I will give us some space here and then we're going to bring in these three buttons. So let's paste all of that in and that should fix your syntax error 'cause remember we can only return one element inside of JSX and so that looks like everything should be in working order, switch back and you can see yes, we don't have any errors and you can see everything is still working properly. We have the right layout so we are able to consolidate some code which is always a good thing.

So by default, we have our buttons here working perfectly but we wanna add a few other styles to these buttons. So let's... actually, I think this would be a really good time to take advantage of Mixins. So Mixins in Sass are a way where you can create kinda like a template type of set of styles and then import those anywhere else in your SCSS file.

So what I wanna do is create a base button class and then we'll be able to extend it later on as we build out other buttons. So this would be a good opportunity for it, so let's do that. We're going to have some nice big teal buttons here, they'll have some nice hover effects and we'll match the rest of the style of the application.

So let's come back to the code here and I'm first going to add the class in, even though we haven't created it yet, let's just add it in right now. I'm gonna say className equals btn and then let's just copy that and then populate it on each one of these. This is not gonna change any styles or anything like that 'cause we haven't defined these yet.

Then in the main Sass file and we can actually close portfolio container, we're not gonna do anymore work in it, I'm going to create a couple of new files. Right below variables, I'm going to create a new file called mixins.scss and then at the very bottom or you know what? Actually right after base, I'm going to bring in a new file called button.scss.

So what I'm doing here is we're going to create a Mixins file, this is gonna be where we can place all the Mixins in our application in one spot and we can call it from these other Sass files. Now the order that you use here is absolutely critical because of how CSS works.

Remember, CSS stands for Cascading Style Sheets which means that the variables file here, if we move this all the way down at the bottom, then our variables would not be able to access by any of these other files, that's the reason why you always want your variables listed at the very top so you can reference them from anywhere else.

Mixins are very similar to variables because you may need to reference them in any number of these other files so we wanna make sure it's at the top and then I will have our new button file here. Now we've not created these yet so let's do that now. So we have two files to create inside of our style folder, we have Mixins and then we have button.

So copy those and now I'll close off the side so it's easier to see, hit save and our main. SCSS file and we should be all good to go. I'm going to create the Mixin first and this is gonna be a decent amount of code but these are gonna be all of our base button styles that we're gonna wanna use.

So I'm gonna say Mixin base-btn and then inside of here, I'm just gonna give some defaults that we wanna work with so I wanna have a cursor as a pointer, I want to have a default height of 42 pixels and one of the cool things about using Mixins is you can override any of these. So once we import them into a real CSS class, we can always override 'em so, say that we have a button that we wanna be taller or shorter, we can just override that behavior, that's one of the powerful things about Mixins.

So I'm gonna bring in the height, let's do font size here, just of 1em and then font-weight of, let's not do 900 let's do 500 that'll give us a solid but not too thick font-weight and then we'll go with a border, so it'll be one pixel solid and transparent and the reason why I'm doing that in the base is because we may want to do something such as adding, when you hover over, maybe you want to add the ability for a different color along the border.

If we do not add that inside of our base button, then it's going to make for kind of like little jumpy scenes or those kinds of things, so I'm just gonna add a transparent border here and then also for animation purposes, I wanna do a transition, we're gonna catch all of the potential effects such as hover, click, focus, anything like that and I want those to take a half second and we'll use ease in and out and then I want to now work with a few of those actions.

So we're gonna work with active, focus and then hover and we're gonna add some styles for those. So for active and focus, what we can do is, and there you go, with Scss whenever you're selecting an action like this, you need to use the ampersand then the colon right afterward.

So for that I just don't wanna have an outline, if you've ever clicked on a button in an HTML page, do you see how it has kinda that gray very ugly outline? Well, that can be turned off, so we can say outline none and then I'm also going to add a hover effect. So here I'll say hover, and background color let's change this to be let's say dark teal. Oh and I guess it'll probably help if we added a background color here, so background color and we'll use teal.

Okay so this is our Mixin and now in order to implement this we simply have to create a class for it and you know what I did also forget? I need to add color so we'll have a color of white, this is gonna be our base button like I said we can override any of these if we need to but this gives us a good starting point.

mixins.scss

@mixin base-btn {
    cursor: pointer;
    height: 42px;
    font-size: 1em;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.5 ease-in-out;
    background-color: $teal;
    color: white;

    &:active,
    &:focus {
        outline: none;
    }

    &:hover {
        background-color: $dark-teal;
    }
}

So now I'm gonna create that class of btn and we need to include button and then the curly brackets and then I need to include base-btn and then call parens 'cause that's how you call a Mixin inside of SCSS. So now that we've included that, if we did want to add any other behavior, we could do all of those rules right here but for the case of what we're looking for, this base button should give us everything that we need.

button.scss

.btn {
    @include base-btn();
}

So I think that everything should be working, let's go take a look, and yes, look at that.

Those are much better looking buttons, we have eCommerce, Scheduling and Enterprise and notice how these are fitting perfectly in CSS Grid and if you click 'em, they are still functional. And we have a little bug with it if you hadn't noticed, you have to refresh in order to get all of the portfolio items back, so if I were to say eCommerce and then Scheduling, nothing has both of those.

So because of that, it wipes all of them off which isn't good at all, so we're gonna have to have a way of resetting that but we're not gonna worry about that right now. So great job if you went through that section, I know that was a little bit longer but writing out styles and learning how to work with the look and feel of your react application can take some time, especially in the early learning stages but I think we now have a pretty good looking portfolio.

Feel free to customize it however you want so that it fits in with your own unique type of style that you like to work with and in the next section, we're going to get into authentication which is going to allow us to log into our app.

Resources

• Source Code