- Read Tutorial
- Watch Guide Video
What we need to do is head over to our app here, and let's look at it. We have our generate button, and we have our clear button. Let's go ahead and style this generate button.
What I want to do is go into our code real quick, and instead of adding the styles immediately what we need to do is actually think about how we have these buttons on the screen. If we head over to card.js, we have our button in here. Except we only have one button.
We need a way to apply different styles to this, but if the content is visible. So if it's the clear button. Now, we can either put that in the class here, we can say className="card__submit", and then we could use string interpolation.
We'll actually do it this way, and then I'll show you a different way you can do this. We can say:
card.js
return ( <form onSubmit={this.handleFormSubmit} className="card"> <div className="card__inputs"> { inputData.map((data, index) => { return Input( (data), this.handleInputChange, index) }) } </div> <button className={`card__${!this.state.contentVisible ? 'generate' : 'clear'}`} type="submit">{!this.state.contentVisible ? 'Generate Mad Lib' : 'Clear Form'}</button> { this.state.contentVisible ? <Content data={this.state}/> : '' } </form> )
Now with this, we can go into our styles and it will work. I'll show you how these classNames are changing when we are clicking on the button. If I inspect the elements and scroll down to the button here, and we have our button here and it says card__generate. When the content is visible it's going to change this to clear.
Again, I'll go back. I'll hit generate. This is going to change to clear. Now, this is card__clear, which is great because now we can apply different styles because we'll have styles on that tag.
Let's go to our application here, and let's go to main.scss, and we have our inputs and our card. Now we just need to say, around line 83ish, let's say:
main.scss
.card {
min-height: 736px;
max-height: 994px;
width: 1240px;
box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
border-radius: 7px;
display: grid;
grid-template-rows: 1fr 50px;
background-color: white;
&__inputs {
// background-color: skyblue;
display: grid;
grid-template-rows: repeat(4, 27px);
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 120px;
margin-top: 66px;
margin-left: 83px;
margin-right: 83px;
justify-items: center;
align-items: center;
}
&__generate {
background-color: #00CB79;
}
&__clear {
background-color: #45B0E5;
}
}
Now let's head over to our application in the browser here and see what we have. We have this button and then when we hit generate, it's going to turn to clear. That looks great.
Now what I want to do is give it a width, and then we'll position them. For the clear button, what we need to say is:
main.scss
&__generate {
background-color: #00CB79;
}
&__clear {
background-color: #45B0E5;
height: 50px;
width: 300px;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
}
That looks good. Let's go ahead and look at this. That looks good it looks like our clear button, although the text isn't entirely the same yet. Let's do the styles for that text now. So let's go to our app here and let's say:
main.scss
&__generate {
background-color: #00CB79;
}
&__clear {
background-color: #45B0E5;
height: 50px;
width: 300px;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
color: white;
font-family: 'Montserrat';
font-size: 22px;
text-align: center;
}
Okay, that looks good. Now let's head over to our application here, hit generate, and you'll see it looks exactly like what we have in our design, which looks great. So the we gave it that font color, made it white, the font size made it a little bit bigger, and we aligned it in the center.
That's all you can really explain with that. I feel like there should be more, but that's really all it takes to get that look. Now what we want is to fix this button and then we'll position them. In the green button, we need it to probably have the same text.
Let's look in here and see what we have. Looks like it's the same. What I want to do is basically just copy all these and put it in the generate. We have this button, and that's also the same in terms of box shadow and for radius. So what I want to do is also copy this and throw it in.
main.scss
&__generate {
background-color: #00CB79;
height: 50px;
width: 300px;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
color: white;
font-family: 'Montserrat';
font-size: 22px;
text-align: center;
}
&__clear {
background-color: #45B0E5;
height: 50px;
width: 300px;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
color: white;
font-family: 'Montserrat';
font-size: 22px;
text-align: center;
}
Okay, so that looks good. Let's go to our app, and actually see if it looks good. So we have generate and we have clear. That looks great. Now before we position it, what I'd like to do is reduce all this code we are writing, because it looks like writing everything twice(which we are).
What I want to do is get rid of all of this right here and then cut this with command + x, so that we have it on our clipboard. Then let's provide a tag, and say:
main.scss
button {
height: 50px;
width: 300px;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
color: white;
font-family: 'Montserrat';
font-size: 22px;
text-align: center;
}
&__generate {
background-color: #00CB79;
}
&__clear {
background-color: #45B0E5;
}
Another way we could do this is by cutting this out and writing a mixin in scss. To write a mix and all we have to do is basically cut this, and let's get rid of this button. Then let's head to the top of our file. Scroll all the way to the top and let's just put this at the very top and let's say:
main.scss
@mixin button { height: 50px; width: 300px; border-radius: 4px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.1); color: white; font-family: 'Montserrat'; font-size: 22px; text-align: center; }
Now we have access to this, so we can go into our code down here again at the card. Then on each one of these we can simply just say:
main.scss
&__generate {
background-color: #00CB79;
@include button;
}
&__clear {
background-color: #45B0E5;
@include button;
}
We're just going to keep this way because it's really clean, and we have it done. Now when we go to our app, you'll see we still have the same styles. Which is great and it reduces our code. We've only had to write it once now.
We need to position him, but maybe we need to do something else as well. It looks like when we click on these items here, we have this button. This kind of outline, which I don't really want there, and I believe that's the same thing as this when we had focus.
So what I'd like to do is get rid of that focus when we are clicking it. Let's say:
main.scss
button:focus {
outline: none;
}
&__generate {
background-color: #00CB79;
@include button;
}
&__clear {
background-color: #45B0E5;
@include button;
}
Now let's see if that works. Not sure if it does yet. That looks great to me, and I'm liking it. Now we could do some other animations but we won't.
What I want to do is position this now. Let's go ahead and inspect our element in Firefox, and see what we have. We have our button here. Now what is this grid. What is it on the grid. It's on the card. OK so it's on the card. I'm going to scroll down in the lay out and you'll see your button belongs right here in the second row in column one.
So all that we need to do, if you remember, is use to justify-items or justify-self to align this. We don't have to use align, because if you remember align is along the column axis. So basically the the y-axis, whereas the justify as along the the row axis which is the x-axis.
We need to say justify-items: center on the card grid that belongs in the card. Now we could go into the button itself, and just say justify-self. Because that's the only one we want to center really. In button, you'll see if we do it in focus and we say justify-self: center, you'll realize it's only centered when we have the button focus in there.
main.scss
button:focus {
outline: none;
justify-self: center;
}
Now when we click on it, which is going to look really strange, but like when we click on it it centered. It's strange, but basically we don't want that to happen we want it to always be justify-self: center. So what we can do is we can just say:
main.scss
button:focus {
outline: none;
}
button {
justify-self: center;
}
Now that looks great. Another thing we could do is comment this out, so we go back to the app you'll see we don't have the style anymore. Then we could head up to our grid here, and just say:
main.scss
.card {
min-height: 736px;
max-height: 994px;
width: 1240px;
box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
border-radius: 7px;
display: grid;
grid-template-rows: 1fr 50px;
background-color: white;
justify-items: center;
It's going to align all of our items. That includes this and this and this. Now that kind of messes up our grid a bit on our inputs. So instead of doing that let's just apply the justified self to the button. I just wanted to point out and show that that's how that worked, but we don't want to do that.
I was originally going to come back down here and still keep these styles. That looks great. It's positioned now. What we need to do is just get in the styles for this, and kind of clear up how this is sizing because it's a little bit off. Then we'll be done with this application.
Let's go ahead and commit our code real quick and then hop into the next guide where we will handle the content component and the size of the card.
Let's hit command + j, and let's say git status, git add ., and what I'd like to say here is git commit -m "styled generate madlib and clear form buttons". Okay I'm going to push my code because I haven't done that in a while. Let's say git push origin master. That will be available on github now. I'll see you in the next guide.