- Read Tutorial
- Watch Guide Video
We want to be able to throw them anywhere and have them be the size that we want really quickly. So it's a little bit of a time investment to make it easier to build custom components. Let's go ahead and let's look at the width here.
So our top form is about 1020 pixels from the title to the end of the form, horizontaly. So what we should do is make it so our forms a specific width so that then our inputs will just adapt to that form. So anywhere we want to throw a new form and input, they will be the size of that form.
Let's go into form-fields.scss and let's comment out the columns and the widths.
form-fields.scss
.form-input {
display: grid;
grid-template-rows: 1fr;
// grid-template-columns: 129px 500px;
align-items: center;
// width: 629px;
justify-content: center;
Now there is one other place we have widths that we want to comment out is the input section down below.
form-fields.scss
&__input {
height: 4rem;
// width: 50rem;
border: 1px solid $color-gray-E6;
border-radius: .5rem;
padding-left: 2rem;
font-size: 1.6rem;
font-weight: 500;
}
So the input is specifically set to 50rem and then our title just takes up the remaining space which is going to be that 129px. Just don't forget to confuse their case. We don't want this width to be 50rem, we want it to be 100 percent. We want it to contain up the entire second column.
&__input {
height: 4rem;
// width: 50rem;
width: 100%;
border: 1px solid $color-gray-E6;
border-radius: .5rem;
padding-left: 2rem;
font-size: 1.6rem;
font-weight: 500;
}
Now if we check our browser, you'll see everything's kind of messed up and it's only the default input width.
Okay so this is how wide an input usually is. Now the reason it's still 40 pixels high is because in our code we're saying, "hey make the height for it 4rem." We always want it to be this height. We don't we never want it to be higher. Now you might be thinking that we do want to change the height because in the design, our main text box is huge, but that's because it isn't an input. it is a text area.
So we're going to build a component for that, which will be really easy. But right now it's focus on the width here and if we ever wanted to reuse this after we did our refactor, we'll make it so the text area can be the size of whatever we want.
Again we're just showing you how to make things reusable and efficient. You might have heard that programmers are lazy so they build solutions like this but I don't like to say that. I think programmers like to be efficient, not lazy.
Now let's work on our columns.
form-fields.scss
.form-input {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 3fr 10fr;
// grid-template-columns: 129px 500px;
align-items: center;
// width: 629px;
justify-content: center;
The reason we're using 3fr 10fr is because they are fractional units, or ratios. the'll change based on our overall size. Now let's go check our application, and it's still going to be messed up a bit. You'll see that it looks a little bit bigger but it's still kind of weird.
OK. So what you do is declare width explicitly inside of our form, and then our columns will take up that width. We're going to signin.scss and inside of our sign-in-form let's build out some grid templates instead of just saying justify-items: center;.
signin.scss
.sign-in-form {
display: grid;
grid-template-columns: 1fr [input-s] 629px [input-e] 1fr;
justify-items: center;
Now the reason we are doing this is because the title still belongs to our form. Right now we don't want the form to only be 629 pixels. We want the title to extend across the entire screen. Okay so you'll see our forms all messed up now which doesn't really matter.
That's part of refactoring. It's kind of like a Rubik's cube one side has to get messed up a bit so you can fix the other side. So that's what we're doing right now. So we want to do is just specify where our pieces exist on the grid.
signin.scss
.sign-in-form {
display: grid;
grid-template-columns: [s] 1fr [input-s] 629px [input-e] 1fr [e];
justify-items: center;
&__title {
width: 100%;
margin-top: 6.6rem;
grid-column: s/e;
}
&__email {
margin-top: 7.7rem;
grid-column: input-s/input-e;
}
&__password {
margin-top: 4rem;
grid-column: input-s/input-e;
}
&__login {
margin-top: 8.8rem;
grid-column: input-s/input-e;
}
&__text-links {
margin-top: 5.2rem;
grid-column: input-s/input-e;
}
&__email,
&__password {
transform: translateX(-64.5px);
}
}
OK. The reason why we have this layed out like we have it now is so we can be able to adjust things later on without messing up what we've already done. This is beginning with the end in mind. Principal #2 habit of 7 Habits of Highly Effective People.
Now if you go into the browser you'll see that it's still messed up but, we can see that our grid is inside of it.
So what we need to do now is just set the width to be 100 percent. So open up form-fields.scss again and let's put width: 100%;
form-fields.scss
.form-input {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 3fr 10fr;
// grid-template-columns: 129px 500px;
align-items: center;
width: 100%;
justify-content: center;
You'll see our forum is back to normal like nothing has changed. And that's awesome. So that's just a bit of refactoring and we still need to get our new forms to be the right width, ao what we'll need to do is take the same approach and give columns to our newsletter-new-form. Now that's going to be a little bit more coding.
Let's end the video here and do that in the next video.
git status git add . git commit -m "refactored formInput and signinForm to adapt"
Now we're going to have to fix this in a couple different places. We're gonna have to fix our newsletter-new-form obviously, and we are going to have to fix our not-a-member-form because it's now that it's extremely long for some reason and that's because we don't have a grid on this form like we just added to our sign-in-form. It's going to be the same grid.
See you in the next video.