This course will be retired on April 30, 2018. We recommend "Rails Routes and Resources" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
In this video, we'll learn how to use Foundation overrides in a Rails application to style forms.
-
0:00
[MUSIC]
-
0:04
In this course, we're going to learn how to design and
-
0:07
build forms in Ruby on Rails.
-
0:10
We'll be working with an existing to do list app called ODOT,
-
0:13
that's built in Rails.
-
0:15
>> First, we'll learn how to create styling for forms.
-
0:18
Then, we'll use form builders to create the HTML structure.
-
0:22
Finally, we'll learn how to modify to do items in ODOT and
-
0:26
use the forms we've built.
-
0:28
>> Keep in mind that this is an existing application.
-
0:31
If you'd like to follow along with the process of building the application,
-
0:35
there are several other courses on Treehouse that cover the process and
-
0:40
we've linked them here.
-
0:41
You can download the project files attached to this video
-
0:44
if you'd like to pick up where we're starting.
-
0:47
>> Since we're going to be working with Ruby on Rails, it's important to have
-
0:51
it installed on your computer as you go through the course.
-
0:54
If you don't have it installed, please check out the Installing
-
0:57
a Ruby Development Environment Series link below this video.
-
1:00
>> Now, let's jump in and make some forms.
-
1:04
We're now at a point in the project where we're ready to style some of the forms.
-
1:09
So let's first pull down some of the work that Jason has been doing.
-
1:14
So we'll do a git pull, and
-
1:19
it looks like that pulled down some tests that Jason fixed.
-
1:23
So thank you, Jason.
-
1:25
And now, let's switch over to our browser and take look at our app.
-
1:31
One way to improve the look of a web app like this is
-
1:36
to work on the forms because a lot of what a web app is are just web forms.
-
1:44
If we go to the settings page,
-
1:46
which allows a user to adjust settings about their account.
-
1:51
You can see that there's a little bit of cleaning up that we could do
-
1:55
to make this look a lot nicer.
-
1:58
Now if we go back, there's lots of other forms throughout the site such
-
2:03
as a form to add a new to do list or
-
2:09
a form to add a new to do item.
-
2:14
And if we logout of the app.
-
2:20
You'll see that there are still even more forms, such as the log in form or
-
2:27
the forgot password form to reset your password.
-
2:33
So let's sign back in.
-
2:43
And let's see if we can do some things that will apply to all of the forms
-
2:48
throughout the site, to try to Bootstrap them up to a certain level of quality.
-
2:54
And then we can do some additional work to work on each individual form.
-
3:00
So the first form that I'd like to work on
-
3:04
to just sort of use as a baseline is the settings page.
-
3:08
And to do that we're actually gonna go back to our foundation overrides and
-
3:14
override a lot of the form styling cuz
-
3:17
a lot of the things to style these forms are already there.
-
3:21
And we just need to tweak them and make some adjustments.
-
3:25
So let's switch over to our project.
-
3:29
And I'm going to open app > assets > style sheets > foundation and over rides.
-
3:37
And let me just switch this over to CSS syntax highlighting so
-
3:42
we can see what we're doing.
-
3:43
Now, we're gonna need to scroll way down in this file.
-
3:47
All the way down to about line 507,
-
3:51
I think is probably the first thing that we're going to change.
-
3:57
As this variable says, this is the form label font color.
-
4:03
And I want to adjust that so I'm going to uncomment this line here.
-
4:13
And I don't want to just scale this color which is a special
-
4:17
SAS function that's being used here.
-
4:21
I just wanna set it to the primary color
-
4:25
which is that nice blue color that we were using previously.
-
4:31
Now the next thing I want to change is the input font color which is right here.
-
4:39
And once again, I just want that to be the primary color.
-
4:44
So we'll just copy that and paste it right there.
-
4:51
The next thing is the input background color.
-
4:54
Now since we're changing it to this primary color this is a case
-
5:00
where I'd actually like to use that scale color function.
-
5:06
And I would like to scale the primary color.
-
5:12
So let's say scale-color and
-
5:18
we'll say, primary color and
-
5:23
I want to increase it's lightness and
-
5:27
we can do that just by passing in this variable lightness.
-
5:33
And we can give it a value, and I'm going to say, about 65%.
-
5:39
Next is something very similar here, the input focus background color,
-
5:45
and that's the color of the actual input boxes when we are focused on them or
-
5:50
when we're typing in information.
-
5:53
And I just want to scale that color.
-
5:55
I'm going to copy and paste this.
-
6:01
We're gonna keep this primary color and instead of scaling it by 65,
-
6:05
we wanna make it even lighter.
-
6:08
So we're gonna scale it by 85, just like that.
-
6:12
So let's save this and switch back to the browser.
-
6:17
And let's refresh this page just to see where we're at
-
6:22
before we do any additional styling.
-
6:25
So as you can see, the label color has changed.
-
6:29
And the input color has changed as well, along with the input background color.
-
6:35
This app is using a fairly flat design as you can see in the iconography,
-
6:39
the logo and this page title here.
-
6:42
So I would like to continue that into the forums and
-
6:46
remove any kind of border or shadowing here.
-
6:50
So let's switch back to our text editor.
-
6:54
And the next thing I'd like to change is the input border style,
-
7:00
which is right here.
-
7:01
Right now, it's a solid border style but
-
7:04
I'd actually just like to remove the border altogether.
-
7:07
So we'll say, none.
-
7:10
Next, every input in foundation has a box shadow by default.
-
7:15
And I would just like to remove that box shadow all together.
-
7:20
So we'll say, none.
-
7:23
And then finally, there is a glowing effect when focused and
-
7:28
I would like to set that to false.
-
7:32
So I'll set that to false.
-
7:34
And then there's a few more things down here with field sets and legends.
-
7:39
And we'll see what those look like very soon, but
-
7:43
let's add the styling now so that we're ready to use them later.
-
7:48
The first thing is the field set margin.
-
7:53
And right now it has margin on the top and bottom.
-
7:57
But I'd also like to add margin on the left and right, but
-
8:01
slightly less than what's on the top and bottom.
-
8:03
So I'm going to say, 16 rems.
-
8:07
Then, the legend will have a background color of white and I don't want that.
-
8:15
I actually just want to set that to transparent, there we go.
-
8:20
And I think that should about do it.
-
8:22
Let's save that out, and let's switch over to this form to see what it looks like.
-
8:32
And as you can see, all of the borders and glowing effects have been removed.
-
8:37
If I focus on these fields, you can see that they increase in lightness so
-
8:43
that we know they're currently selected.
-
8:46
And I think that is starting to look pretty good.
-
8:50
Now, before we move onto the markup for these forms.
-
8:53
There is one more thing that I would like to do, that is not available
-
8:58
in these foundation overrides and that is the color of legends.
-
9:04
As you can see here, there is no option to change the color of,
-
9:11
so let's close that out and we'll open up our partials here.
-
9:16
And I'm going to create a new file.
-
9:20
And I'll save this out as forms.css.scss.
-
9:28
Just in case there's any additional styling that we want to do for
-
9:32
forms in the future that is not available in our foundation overrides.
-
9:37
And then I'll say fieldset legend,
-
9:44
and I'll set the color which is the font color to
-
9:51
our blue color, which is the variable that we've been using throughout this project.
-
9:56
Now, we need to add this to our application and
-
10:01
since forms are fairly global It's not a big deal where we put this.
-
10:07
It's unlikely to be overridden but I'm just going to put it right here.
-
10:12
And we'll say, forms just like that.
-
10:15
And if we switch back to the browser and refresh,
-
10:19
we shouldn't see any kind of changes because we don't have any field sets or
-
10:23
legends here just yet, that will come later.
-
10:27
But I think that's enough work for now, so let's switch over to our terminal and
-
10:32
we'll do a git status, just to check up on things.
-
10:36
That looks good, I'm going to clear my terminal.
-
10:41
And let's do a git add ., and
-
10:44
then another get status just to check to make sure that those new files were added.
-
10:49
Yep, forms is there.
-
10:51
Now we'll do a git commit-m and we'll say,
-
10:58
"Add style overrides for forms".
-
11:03
And then we can do a git push.
-
11:08
And that should do it.
-
11:09
Now we're ready to move on.
You need to sign up for Treehouse in order to download course files.
Sign up