Now that I'm happy with our document dashboard, let's go and let's navigate to our proposals.

This is looking really bad but we'll take care of this in a few future guides. We're going to do something pretty neat and bring in some different styles. Let's focus on our new proposal page. Obviously this would not be the best user interface right here. I think we're going to use cards in this one and we're going to have a column base set up I'm not gonna use CSS columns but because we're using bootstrap I can use a grid. And what I'm planning on doing because I think this will make for the best user interface is having a card set up. So one large card and then splitting it right down the middle so our form is on the left hand side and our generated proposal is here on the right hand side so that the user can as they're typing they can see it being edited in real time I think that would make for a really nice interface.

For this one I am going to keep this screen open and I'm actually going to keep it wide open just so we can see exactly what this would look like in a regular browser environment. And now here I'm going to leave this the same width because I'm not going to do anything to the side. Starting off I'm going to open up proposal-new.component.html and then let me open up proposal-new.component.ts file. And you'll notice we don't have the styles here yet so let's add that. Let's create stylesURLs and pass in just a basic style here.

styleUrls: ['proposal-new.component.css']

One thing I do want to also clear up just in case you're wondering you do not have to create a new CSS file for every single style that you have for every component. It would be perfectly fine if say that you wanted to put all of your proposal CSS files in a single CSS file. It'd be perfectly fine to create something called proposals.css and then have that referenced in your styleURLs. I'm going to actually create a new one because I think the things I'm going to be creating are going to be specific to this form page but I just wanted to let you know. There's no secret sauce in naming it like this. This is a standard convention but if you want to share CSS file that's perfectly fine and in many cases, it's actually recommended.

That's going to break the app because we don't have this file yet. Coming into proposal I'm going to create a new one a new CSS file that will bring the app back and then eventually we'll add items to that. So let me split our screen here and take our CSS file down and I don't need our component file anymore so I can close that. We're just going to add a couple styles but before we do that let's create our grid. I'm going to create a new div here and everything inside of the form is now going to go inside of this so I'm going to paste this in and then make sure you indent it just so it's clear what's inside and I'm going to add a class and this class is going to be of type card. If I hit save and switch back to the browser you can see that this now has the card as the background. So that is a good start. That's where we want to start with it.

Now we want to have them side by side. So in order to do that we're going to create another div and this div right here is going to be of class row. And this is something built directly into bootstrap. So it's a nice way of being able to kind of creating a row so items can reside side by side and then we're going to create two more div's here 0ne for the left-hand side of the screen and one for the right-hand side of the screen.

We'll give some room here and now I'm going to add a class and I'm actually going to add the same class to both of these so I can edit them at the same time. And this is going to be of col-md-6. What this is going to do is it's going to create two columns inside of our row and this is going to let us put our form on the left-hand side and our text on the right-hand side. So I'm going to hit save and you're not going to see anything on the screen because we don't have anything inside of it yet. I'm going to grab all of the content inside of this h1 one so everything all the way down to the closing div.

I'm going to take all of that and paste it inside of this div. Now the indentation here is going to be a little bit off. So just come all the way up and indented the proper way and then it is to make sure that there's at least two spaces from the div that it's nested inside. If you scroll down Sublime Text has these nice helpers so that you can line it up properly. So that's going to be the first part. And if we look at the screen now we can see that it looks kind of messy because it's now on the left-hand side. But what we can do is now put this div on the right-hand side. Now we can put all of this content inside of this div. Make sure your indentation is all lined up and hit save and let's see what we have.

OK look at that. So now we have this structure that we're going for where we have the left-hand side that has the form and the right-hand side.

Now if I type in Google then I can see all of this happening all at the same time just like this. I'm like in that a lot.

Now that we have that we're still not done because we really need to have some other styles because I'm not a huge fan of how wide this is.

Let's take a look at our docs. Notice on our documents how this is nice and it's the same width the reason why this is contained right here is because we used a container. Now if we go to proposals, new proposal, we just have to add a container property or the container class. I'm going to come up to the proposal new component add a container and hit save. Now if you check back you can see that this now is in the nice container and everything is still working properly so we're good to go on that side of it.

Let me add in a couple styles. Nothing crazy but I want to create a form container. What this is going to be is a class that is going to be specific just to this form block and inside of this I just want to add some padding because I'm not sure if you notice but see how everything's really close here. I don't really like how that looks so just going out some padding of 30 pixels hit save. And you can see that looks a lot better.

That is all that I really want to do right now. And in the next guide, we're going to do something really cool which is to start styling our validation so if you notice that I come here and delete this. This is fine you know where it adds this customer name is required.

However, we can take advantage of some bootstrap styles and we can make these have a lot better things like colors and different things like that. The things you'd expect from a modern web application that's what we're going to do in the next guide.

Resources

• Code at this stage