Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll revisit the index view. Building on our previous work, we'll create styling that's more functional and aesthetically pleasing.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[?music?]
0:00
[Master Class: Designer and Developer Workflow: Styling the Index View]
0:02
[Nick Pettit] We're now in Sprint number four
0:05
and there's a few things that we need to do here, but in general,
0:07
we're probably going to try and wrap things up.
0:12
Our major goals for this Sprint are going to be
0:14
to finish up any fluid grid calculations that we need to do,
0:18
clean up our CSS by adding some comments.
0:22
We need to move our styling from the job show view to all the other pages on the site.
0:26
We may need to add some media queries in order to make the site more responsive,
0:32
and there are probably a few other things we need to tie up,
0:37
so let's just go ahead and dive in.
0:41
First, I'm going to go ahead and do a $git pull
0:44
to make sure that I'm completely up to date with any changes Jim may have made,
0:47
and then I'm going to go ahead and branch into a branch called style.
0:53
So if I type $git branch now, I should see that I have a branch called style,
0:59
so let's go ahead and do a $git checkout style
1:06
and switch over.
1:12
And that should keep any of our changes isolated from any changes
1:14
that Jim might be making in parallel with us.
1:18
So now, let's go ahead and start up our Rails server
1:21
so I'll type $rails s
1:24
and I'll let that get fired up.
1:28
And then, if I switch over to the browser and refresh on localhost: 3000
1:30
I should see our Easy Jobs! website here.
1:39
Now, most of our work has been done on the show view for jobs
1:43
and if we go ahead and resize the browser here,
1:47
you can see that we have a little bit of a fluid grid going.
1:51
There's a few problems when we get down to smaller sizes,
1:55
but that's nothing that can't be solved with a few media queries.
1:57
And so I think we're looking pretty good with the fluid grid so far,
2:02
so we'll go ahead and roll with that for now.
2:07
Now, the next thing that we need to do
2:09
is start cleaning up our CSS,
2:12
so let's go ahead and switch over to our text editor.
2:14
I'm going to go into the public folder here, style sheets, SASS,
2:17
and then I'm going to jump into application.sass
2:23
and let's just go ahead and add a few comments.
2:28
So I'll type // to start my comments there.
2:33
I'll go ahead and put in a few stars to create a comment flag
2:38
and let's go ahead and call this first section BASIC STYLES.
2:43
And let's go ahead and copy our comment flag
2:51
down to about here because I think that's where our job styling begins.
2:56
So we'll go ahead and just call this JOBS
3:05
and then maybe a little bit more detail with INDEX/SHOW VIEWS.
3:08
And with that comment flag still on our clipboard,
3:17
let's go ahead and scroll down here.
3:21
So it looks like we do have job_show view here,
3:24
so we can actually split those out.
3:27
So here, we'll say this is the JOB SHOW VIEW
3:31
and then if we go back up to that first comment flag,
3:37
we'll say that it's the JOB INDEX VIEW.
3:40
There we go.
3:49
And I'm just going to create a little bit of space between each one of these comment flags
3:51
just to denote a new section
3:56
and let's keep scrolling down here to see if we have anything else.
3:59
It looks like we have an h2, a field, and then a label here
4:04
and I'm guessing that's probably for our forms,
4:08
so let's go ahead and just create a section there called FORMS.
4:13
So now, we've added some commentary and we'll probably add
4:23
a little bit more commentary as we go along,
4:26
but now it's a lot easier to understand where our CSS is actually going here.
4:29
So next, let's start styling some of the other pages beyond the show view.
4:36
So we'll go ahead and switch over to the browser and take a look at what we have here.
4:44
Here we have our show view and that looks to be in pretty good state of completion,
4:49
so we'll go ahead and run with this and use it to style our other pages.
4:54
We click the Back button here,
5:00
we can see that our index view probably could use some work to pretty it up
5:02
and make it look just as good as our show view.
5:07
and then we have our New Job view, which actually I need to be logged in to view,
5:11
so let's look at some of our other forms pages.
5:17
If I go to Register here, it looks like something's messed up there,
5:21
so we'll go ahead and fix that.
5:25
And I've already created an account, so I'll go ahead and sign in
5:28
using my email address and very insecure password.
5:33
Now, if I hit Log In,
5:41
you'll see that I should now be able to create New Jobs.
5:43
Down here at the bottom of the New Jobs view,
5:46
it looks like a few things are broken there,
5:51
so in general, it seems as though we have a little bit of work to do
5:53
on the forms view and we also probably need to style that Flash message
5:57
that appears at the top that said I needed to be logged in.
6:02
So there's a few other views to style here.
6:07
Why don't we start off with the index view?
6:10
So now that I'm logged in and looking at the index view,
6:12
I think I want to add some row striping here,
6:15
and I think I might want to turn the New Jobs into more of a button
6:19
that makes it look like more of a call to action.
6:24
The typography on these new jobs also isn't that great,
6:27
so maybe we'll play with that a little bit
6:32
and I think all the jobs could use some spacing here
6:34
because originally, when we were logged out,
6:38
a few of the other links were actually the only thing giving these any kind of separation.
6:41
And hopefully, in this Sprint, Jim will either show or hide some of those links.
6:46
So before we get ahead of ourselves, let's go ahead and switch back to our TextEditor
6:52
and we're going to go into apps, views, and then we want to open up a jobs folder here
6:57
and we're going to open our index view.
7:06
Now, it looks like this is an unordered list.
7:10
So we have a %ul tag and then we have a few list items
7:13
and we have all of our jobs underneath that.
7:18
There may be other unordered lists on the site in the future,
7:21
so let's go ahead and make this a little bit more specific by adding an id.
7:25
And to this unordered list, I'm going to add the id of jobs
7:30
and then I'll go ahead and switch back to our application.sass file
7:37
and let's scroll up to where it says JOB INDEX VIEW.
7:43
And so next, I'll go ahead and select our unordered list with the id #jobs.
7:48
I'll select each one of our list items.
7:58
I will use the :nth-child pseudo selector
8:02
and give it a value of odd so only the odd rows are selected.
8:06
And then, our background color is on the job_link here,
8:12
so let's go ahead and delete that
8:19
and we'll apply a background color to each one of our job_links
8:23
and let's just see if this works.
8:31
So we'll say background:
8:33
and we'll just give it a value of something really obnoxious, like green
8:35
and we'll switch back to the browser and refresh
8:40
and it looks like that applied correctly.
8:45
So now, we need to go ahead and pick out a background color.
8:48
So we'll go ahead and switch back to our text editor,
8:52
so let's make this a light blue color,
8:57
and to do that, we'll go ahead and drop the values of red, green,
9:01
and then put on full blue.
9:09
We'll save that, switch back, and it looks like we now have this nice blue color.
9:12
It looks a little bit purpley to me, so I'm going to go ahead and drop the reds a bit more.
9:18
So maybe we'll drop that down to B
9:25
and if we refresh, that still looks a little bit too saturated
9:28
so maybe we'll bump this up to C and E.
9:34
And that's getting a bit closer; maybe we can make that just a little bit more subtle.
9:42
We'll do something like this #00F5FF
9:51
and I think that looks pretty good for our row striping.
9:58
Now let's go ahead and do the same thing
10:03
on the even rows
10:06
and for the even rows, we'll make them even lighter #EEFFFF
10:15
so it will be just a very slight color on them
10:20
and I think that looks pretty good.
10:26
That gets them some nice separation.
10:29
And so now, we need to add in some padding,
10:32
so let's go ahead and try that on our job_link.
10:37
So we'll add some padding to the top and bottom
10:41
and let's just see what that does.
10:44
That looks pretty good.
10:46
That adds some nice separation to each one of these jobs.
10:48
I'm still noticing that the text is running right up against the edge
10:52
and that doesn't look very good, so let's go ahead
10:56
and add some padding on the left and right.
10:58
Just do something like 10px, and if we refresh,
11:02
I think this is starting to look pretty good.
11:07
Now, I'm not totally thrilled with the typography here,
11:11
so maybe we can try to improve the look of this a little bit
11:14
and make these jobs a lot easier to scan.
11:18
Remember, these entire rows are links,
11:22
so maybe we can even add a hover state there as well
11:24
just so that when you scroll over all of these jobs,
11:27
they sort of light up and you know which one you're selecting,
11:30
so let's go ahead and do that.
11:34
We'll switch back to our text editor, and on the job_link,
11:36
go ahead and add a hover state,
11:40
and we actually don't need those curly braces there because we're using SASS.
11:45
And let's apply a background color, and again,
11:52
we'll just do green to make sure that we're selecting this properly.
11:55
And it looks like we're actually not, so let's see what we can do to fix that.
12:01
We need to actually add an ampersand there to get the pseudo-class
12:05
to run right up against the job_link there with no space,
12:11
so we'll save that,
12:15
switch back to the browser and refresh.
12:17
And it still looks like we're having an issue here,
12:20
so let's go ahead and switch back
12:22
and let's try something a bit more simple
12:25
by just saying job_link:hover
12:29
and let's see if that works.
12:33
So I think the problem that we're now encountering is selector specificity,
12:36
so let's go ahead and switch back to our text editor
12:42
and the problem is coming in with this pseudo-selector here,
12:46
so what we need to do is just create hover states for each one of these.
12:51
So we'll go ahead and delete that here
12:55
and I'll go ahead and add a &:hover state
12:59
and here we'll say background: green
13:05
and we'll do this a little bit messily by repeating ourselves, but that's okay.
13:10
We'll save that out, switch back, refresh,
13:16
and now it looks like we have a really nice hover state.
13:20
So now, we just need to pick a color
13:23
and I think for this color, we'll actually go back to that yellow highlight.
13:27
So we'll say background: #FFFFCC
13:31
and let's just see how that looks on these ones here.
13:35
That looks pretty good, so I'll go ahead and add that color in to there
13:38
and refresh the page.
13:46
Now we have this nice hover state going,
13:49
so I think that looks pretty good.
13:51
Now let's address this text.
13:53
So we'll switch back
13:55
and on the job_title,
13:57
let's go ahead and make this a little bit bigger.
14:01
We'll do something that I think is probably going to be too big,
14:06
like 2ems.
14:08
And yep, that is a little bit too large.
14:12
We can probably increase the number of columns here.
14:15
There we go.
14:18
But I think that's pretty close to the size we want.
14:20
The only problem is that it's almost as large as the New Job link,
14:23
so let's go ahead and just decrease the size a tiny bit down to 1.8em.
14:27
I think that's pretty good.
14:33
And in addition, I wanted to actually style the color of these links,
14:35
so on the job link,
14:40
we'll say text-decoration: none so that there's no underline on the links.
14:43
And then let's go ahead and just say color: black
14:50
to color big links black there.
14:57
That looks pretty good to me.
15:00
The titles are nice and dark so they contrast with the background really nicely
15:04
and make them very easy to read.
15:08
Let's go ahead and make the descriptions a little bit lighter
15:11
so that they're less emphasized and allow the titles to be more scanable.
15:14
So on the description,
15:21
we'll go ahead and change the color
15:25
and we'll make it a dark gray color;
15:28
maybe something like #555 in hexadecimal.
15:33
And I think that's perfect.
15:38
I think we nailed that on the first try,
15:39
so that looks pretty good.
15:41
I think next we need to get this text running all the way across the page
15:45
if at all possible, so let's go ahead and see if we can't do that.
15:49
It looks like we're having this take up a fixed width
15:55
with a column, so let's go ahead and just see if we can cut that out
15:59
and see what happens.
16:02
Okay, well it looks like we actually did need that fixed width,
16:05
so let's go ahead and add that back in.
16:08
So next, let's go ahead and try to apply a width to the unordered list element.
16:15
So we'll come up here
16:20
and we'll say ul and we'll go ahead and apply the id #jobs
16:23
and let's just say width: 100%.
16:30
And then, let's go ahead and remove those columns again.
16:34
Let's see if we can get away with this.
16:40
No, it looks like we do need some sort of container here
16:42
to go ahead and stop these columns from running all the way across.
16:45
Actually, before we try that, let's go ahead and switch back to our text editor
16:51
and let's try putting a width on the job_link here.
16:56
So we'll say width: 100% and save that,
17:01
and then let's switch back over and refresh the page
17:06
and that actually looks like it did it.
17:10
We don't need a container after all, so that's good--less markup.
17:14
However, it does look like we have a slight issue on the left and right side.
17:17
So you can see the space over on the left is much greater than the space over on the right
17:22
and I'm pretty sure that's because of this elipses here, these ...
17:29
It looks like they're not actually precalculated with this text,
17:34
so we need to go ahead and account for that in our width.
17:38
We could probably do this another way by maybe adding some negative margin,
17:42
but we can go ahead and just fudge that a little bit by reducing the width,
17:47
so let's go ahead and switch back and we'll put this at something like 98% and save that.
17:51
And when we switch back and refresh,
17:59
it looks like that's just about the same amount of space on the left and right sides,
18:02
so it looks good.
18:07
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up