How to Style Rails Forms with CSS6:21 with Nick Pettit
In this video, we'll finish some basic styling for our job board. This styling will focus on critical functionality and page layout, with finer details coming in future iterations.
[Master Class] [Designer and Developer Workflow] [Styling the Forms View] 0:00 [Nick Pettit] So far we've styled our index view, 0:07 and we've styled our show view, and they're looking okay. 0:09 We can go ahead and click on any of these and navigate back and forth. 0:13 And if we go to our new job view, 0:19 we can see that it's actually already in pretty good shape. 0:23 We just have a little bit of work to do, so let's go ahead and switch over to TextMate. 0:27 And we don't need to look at our show view anymore. 0:32 We should be done with that for now. 0:35 We'll go ahead and open up our new view and our edit view, 0:38 and it looks like these are pulling in the partial form, 0:43 so we'll go ahead and open that up as well. 0:47 Now, the first thing that I'm noticing in this new view and this edit view 0:50 is this big h1 tag. 0:55 We're going to change that to an h2, 0:58 and we're going to change this to say 1:00 "New Job Posting." 1:03 Just like that. 1:07 And the same thing in our edit view. 1:10 We're going to change this to an h2, 1:12 and we'll say something more friendly like "Edit Job Posting." 1:15 Just like that. 1:21 We can switch back to Easy Jobs! here and refresh the page. 1:23 And that's much more friendly text, although we do need to style it, 1:29 so we can go ahead and do that. 1:32 Let's go ahead and switch back, 1:35 and let's just take a look at this form view. 1:37 The thing that I'm noticing is that we have the field class 1:43 applied to each one of these, and that's fine. 1:47 And then we have "actions" down here. 1:49 We can go ahead and use these in our styling. 1:52 In addition, we also have labels, 1:56 and I think I'm going to set those to block level elements 1:58 just so they push down the form fields below them. 2:01 So, let's go ahead and go over to our application.sas, 2:05 and this file is getting pretty long. 2:11 But not long enough to add comments just yet. 2:14 We'll go ahead and add that in maybe in our next iteration. 2:17 And let's go ahead and first select our fields, 2:21 just to make sure that we can actually select those. 2:25 And we'll just put a light yellow background color on them 2:28 just to make sure that everything is working properly. 2:32 We'll go ahead and switch back and refresh. 2:34 And it looks like we can indeed style those, 2:37 so that's looking good. 2:41 Inside of each one of these fields, 2:43 we're going to select the label, 2:45 and we're going to say "display: block." 2:48 And let's just see if that pushes these form fields down below them. 2:51 We'll switch back and refresh the page. 2:55 Now, it looks like that didn't quite work, so let's go ahead and open up 2:58 the source and just take a look at what's going on here. 3:02 It looks like these labels actually aren't classes. 3:05 They're actually label tags, so let's go ahead and change this label 3:08 just to be a normal label tag. 3:12 So, we'll go ahead and save that out, switch back to the browser and refresh the page. 3:15 This is looking pretty good. 3:20 Now, let's go ahead and start styling this h2. 3:22 So, we'll switch back, and we're not really using any other h2s anywhere else, 3:25 so we can just go ahead and say that h2s are always going to be 3:31 the page title. 3:35 With this h2 here, we'll go ahead and say "font-weight: bold." 3:37 And we'll go ahead and increase the font size 3:45 and say font size will be about 1.4 ems. 3:48 Switch back and refresh the page, and I think that looks pretty good. 3:52 Let's just go ahead and add some margin on the top and bottom of that 3:57 just to separate it out a little bit. 4:01 And we can actually maybe include some friendlier text for each one of those labels. 4:03 But first, I'm going to apply some margin to the top of those labels 4:10 of about 20 pixels just to space them out a little bit better. 4:15 That looks pretty good. 4:19 And now let's go ahead and dive into that form view. 4:21 And we'll go ahead and change the label on these. 4:26 Let's go ahead and just change this to say "Job Title." 4:29 We'll change the description to say "Job Description." 4:35 We'll change company name to say "Company Name." 4:42 And then the details link we'll say "Details Link," 4:48 and we'll say "(optional)." 4:53 And as one final touch, I want to go ahead and move this company name 4:56 so that it's right after the job title 5:00 just so that it reflects the show view a little bit more closely 5:04 so that we have our title, our company name, 5:09 job description, and our details link. 5:12 So, we'll go ahead and switch back to the browser and refresh. 5:15 And as you can see, we now have our job title, 5:19 company name, job description, and details link. 5:22 So, I'd say that about does it for the new job posting view. 5:26 Let's just go ahead and check on the edit view. 5:31 All that seems to be in good working order. 5:34 We have our title coming in, our company name, 5:40 our job description, and our details link. 5:44 So, that should about wrap it up for the forms. 5:48 Let's go ahead and commit our work. 5:51 Go ahead and switch over to our terminal. 5:54 Stop our server. 5:56 Say "git add . git commit" with a message flag, 5:58 and we'll say "Started the form view styling." 6:02 We'll go ahead and commit that, and we'll say "git push." 6:10 And that should just about wrap things up. 6:15 I think we're ready to go ahead and meet with Jim. 6:17
You need to sign up for Treehouse in order to download course files.Sign up