[MUSIC]

In this course, we're going to learn how to design and

build forms in Ruby on Rails.

We'll be working with an existing to do list app called ODOT,

that's built in Rails.

>> First, we'll learn how to create styling for forms.

Then, we'll use form builders to create the HTML structure.

Finally, we'll learn how to modify to do items in ODOT and

use the forms we've built.

>> Keep in mind that this is an existing application.

If you'd like to follow along with the process of building the application,

there are several other courses on Treehouse that cover the process and

we've linked them here.

You can download the project files attached to this video

if you'd like to pick up where we're starting.

>> Since we're going to be working with Ruby on Rails, it's important to have

it installed on your computer as you go through the course.

If you don't have it installed, please check out the Installing

a Ruby Development Environment Series link below this video.

>> Now, let's jump in and make some forms.

We're now at a point in the project where we're ready to style some of the forms.

So let's first pull down some of the work that Jason has been doing.

So we'll do a git pull, and

it looks like that pulled down some tests that Jason fixed.

So thank you, Jason.

And now, let's switch over to our browser and take look at our app.

One way to improve the look of a web app like this is

to work on the forms because a lot of what a web app is are just web forms.

If we go to the settings page,

which allows a user to adjust settings about their account.

You can see that there's a little bit of cleaning up that we could do

to make this look a lot nicer.

Now if we go back, there's lots of other forms throughout the site such

as a form to add a new to do list or

a form to add a new to do item.

And if we logout of the app.

You'll see that there are still even more forms, such as the log in form or

the forgot password form to reset your password.

So let's sign back in.

And let's see if we can do some things that will apply to all of the forms

throughout the site, to try to Bootstrap them up to a certain level of quality.

And then we can do some additional work to work on each individual form.

So the first form that I'd like to work on

to just sort of use as a baseline is the settings page.

And to do that we're actually gonna go back to our foundation overrides and

override a lot of the form styling cuz

a lot of the things to style these forms are already there.

And we just need to tweak them and make some adjustments.

So let's switch over to our project.

And I'm going to open app > assets > style sheets > foundation and over rides.

And let me just switch this over to CSS syntax highlighting so

we can see what we're doing.

Now, we're gonna need to scroll way down in this file.

All the way down to about line 507,

I think is probably the first thing that we're going to change.

As this variable says, this is the form label font color.

And I want to adjust that so I'm going to uncomment this line here.

And I don't want to just scale this color which is a special

SAS function that's being used here.

I just wanna set it to the primary color

which is that nice blue color that we were using previously.

Now the next thing I want to change is the input font color which is right here.

And once again, I just want that to be the primary color.

So we'll just copy that and paste it right there.

The next thing is the input background color.

Now since we're changing it to this primary color this is a case

where I'd actually like to use that scale color function.

And I would like to scale the primary color.

So let's say scale-color and

we'll say, primary color and

I want to increase it's lightness and

we can do that just by passing in this variable lightness.

And we can give it a value, and I'm going to say, about 65%.

Next is something very similar here, the input focus background color,

and that's the color of the actual input boxes when we are focused on them or

when we're typing in information.

And I just want to scale that color.

I'm going to copy and paste this.

We're gonna keep this primary color and instead of scaling it by 65,

we wanna make it even lighter.

So we're gonna scale it by 85, just like that.

So let's save this and switch back to the browser.

And let's refresh this page just to see where we're at

before we do any additional styling.

So as you can see, the label color has changed.

And the input color has changed as well, along with the input background color.

This app is using a fairly flat design as you can see in the iconography,

the logo and this page title here.

So I would like to continue that into the forums and

remove any kind of border or shadowing here.

So let's switch back to our text editor.

And the next thing I'd like to change is the input border style,

which is right here.

Right now, it's a solid border style but

I'd actually just like to remove the border altogether.

So we'll say, none.

Next, every input in foundation has a box shadow by default.

And I would just like to remove that box shadow all together.

So we'll say, none.

And then finally, there is a glowing effect when focused and

I would like to set that to false.

So I'll set that to false.

And then there's a few more things down here with field sets and legends.

And we'll see what those look like very soon, but

let's add the styling now so that we're ready to use them later.

The first thing is the field set margin.

And right now it has margin on the top and bottom.

But I'd also like to add margin on the left and right, but

slightly less than what's on the top and bottom.

So I'm going to say, 16 rems.

Then, the legend will have a background color of white and I don't want that.

I actually just want to set that to transparent, there we go.

And I think that should about do it.

Let's save that out, and let's switch over to this form to see what it looks like.

And as you can see, all of the borders and glowing effects have been removed.

If I focus on these fields, you can see that they increase in lightness so

that we know they're currently selected.

And I think that is starting to look pretty good.

Now, before we move onto the markup for these forms.

There is one more thing that I would like to do, that is not available

in these foundation overrides and that is the color of legends.

As you can see here, there is no option to change the color of,

so let's close that out and we'll open up our partials here.

And I'm going to create a new file.

And I'll save this out as forms.css.scss.

Just in case there's any additional styling that we want to do for

forms in the future that is not available in our foundation overrides.

And then I'll say fieldset legend,

and I'll set the color which is the font color to

our blue color, which is the variable that we've been using throughout this project.

Now, we need to add this to our application and

since forms are fairly global It's not a big deal where we put this.

It's unlikely to be overridden but I'm just going to put it right here.

And we'll say, forms just like that.

And if we switch back to the browser and refresh,

we shouldn't see any kind of changes because we don't have any field sets or

legends here just yet, that will come later.

But I think that's enough work for now, so let's switch over to our terminal and

we'll do a git status, just to check up on things.

That looks good, I'm going to clear my terminal.

And let's do a git add ., and

then another get status just to check to make sure that those new files were added.

Yep, forms is there.

Now we'll do a git commit-m and we'll say,

"Add style overrides for forms".

And then we can do a git push.

And that should do it.

Now we're ready to move on.