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.
[?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 up