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 begin some basic styling for the Show view of our job board. This styling will focus on critical functionality and page layout, with finer details coming in future iterations.
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
[Master Class] [Designer and Developer Workflow] [Styling the Show View]
0:00
So, we have our index view, which is looking just okay here.
0:07
So, let's go ahead and jump through to our show view,
0:11
and it looks like this could use some work.
0:14
However, before we go ahead and just start styling our index view,
0:17
it would be a good idea to go ahead and commit our work so far.
0:21
So, let's go ahead and switch over to our terminal,
0:25
and we'll stop our server and we'll say "git add . git commit" with the message flag.
0:29
And we'll say "Started styling the index view."
0:37
And we'll say "git push" and there we go.
0:46
So, we'll go ahead and clear that out, and let's go ahead and take a look at this show view.
0:53
We should probably go ahead and leave this edit link and this back link
1:00
because although we haven't really talked about the edit view
1:06
or how we're going to authenticate people so they can edit jobs,
1:09
we're still going to need that edit link eventually, so let's just go ahead and leave it there
1:14
assuming it will be shown conditionally at one point or another.
1:18
Next, we need to get rid of the labels for each one of these items,
1:23
and then we need to just go ahead and lay out the page so it looks a little bit nicer.
1:28
So, let's go ahead and get started into this.
1:34
We'll go ahead and switch over to TextMate, and we can close our index view for now,
1:36
and let's go ahead and open up our show view.
1:43
Now, you'll notice that each one of these is inside of a paragraph,
1:46
and that's probably not what we want.
1:50
We also don't need these labels on them.
1:53
So, we'll go ahead and get rid of them.
1:55
We'll go ahead and remove the indentation here, and next,
2:04
if you recall from our mockup, we actually want the company name right under the job title.
2:09
So, let's go ahead and do that.
2:15
And then we have the description, and then we have our details link.
2:18
So, let's go ahead and save that.
2:23
We'll switch back and refresh the page.
2:25
And it looks like we didn't start our server yet, so let's go ahead and do that now.
2:28
Switch over to our terminal and we'll say "rails s" to get that back going.
2:33
And now when we refresh, you can see all of our text is just inside a giant block.
2:40
So, let's go ahead and break this up with our own mockup.
2:47
We'll switch back to TextMate, and first, we'll just apply a few classes here.
2:50
So, I'm going to say that this is a job title, and I'll indent that.
2:58
I'll say this is a company name, and we'll indent that.
3:08
This is the job description, and actually, I'm going to just go ahead
3:14
and put this inside of a paragraph tag, but we'll keep that job description class name.
3:21
And then finally, for the details link, we need to actually put this inside of a link to.
3:27
So, let's go ahead and do that.
3:34
We'll say "link_to."
3:36
We'll go ahead and copy and paste this here into the link and get rid of that.
3:39
And let's just see where that gets us.
3:46
So, if we refresh, we can see we now have example.com,
3:49
and it looks like that's not quite linking properly,
3:53
so let's go ahead and see if we can't fix that.
3:57
And actually, we don't need to put these in parantheses
4:00
because we're not going to be passing a block.
4:03
This link is just always going to say the same thing.
4:07
So, we'll go ahead and call this "Show More."
4:10
So, we'll save that and when we switch back and refresh the page,
4:14
you can see that this link now says "Show More," and if we click it,
4:18
we go to example.com.
4:22
So now, we just need to style this job title and company name.
4:25
So, let's go ahead and do that.
4:31
We're going to put this entire page inside of another class name
4:34
just so we know where we're at.
4:38
So, we'll call this "job_show," and we'll put everything inside there
4:41
just to keep it a little bit more separated in SASS and for our own benefit.
4:49
So, we'll go ahead and say "job_show," and then inside of job show
4:56
we want to style the job title, and we want to make the font size on that rather large,
5:03
so we'll say 1.4 ems, and we'll probably put the font weight as bold.
5:08
So, let's refresh that, see what that looks like.
5:14
That's still a little bit too small.
5:17
We'll actually change that to about 2 ems.
5:19
And then for the company name, we'll do the same thing.
5:23
We'll say "font size 1.2 ems," actually, maybe 1.4 ems.
5:30
And we don't need to make this bold, but we should make this text a little bit weaker,
5:36
so let's go ahead and say "color," and we'll change that to 555
5:42
for our gray and that looks pretty good.
5:47
Below the company name I would like some extra space between it and the description,
5:52
so let's go ahead and add in some margin.
5:58
So, we'll just say "margin bottom," and let's put in a big value like 50 pixels.
6:00
So, we'll switch back and refresh.
6:08
That actually does look like it's a little much, so we'll bump that back down to about 30 pixels,
6:10
and I think that looks pretty good.
6:16
Now, I would like to increase the font size of the description just a little bit,
6:19
so we'll go ahead and do that.
6:24
So now, we'll go ahead and select job description, and we'll increase the font size
6:28
just a little bit, switch back and refresh.
6:34
Actually, I don't think I like that.
6:38
I think I liked it just how it was.
6:40
So, let's go ahead and remove that.
6:43
So, we'll refresh the page, and I think that looks a lot better.
6:47
And finally, I think the Show More link should actually be a blockable element
6:52
just so it pushes these down, and we said we were going to turn that into a button,
6:56
but that's a detail that we can go ahead and add in later once we start to
7:01
sort of develop the visual style of this site.
7:05
So, we'll switch back, and let's just make sure that we can go ahead
7:09
and actually select that Show More link.
7:13
It doesn't look like we have any sort of class on it,
7:16
so let's just go ahead and add that in.
7:20
We'll say "class" and we'll just call it "details_link"
7:22
because that's what we called it in the model, and then,
7:29
we'll say a "details_link" and we'll go ahead and set it to "display: block."
7:33
And then we can even maybe put some margin on the bottom, and we'll put about 20 pixels.
7:43
So, when we switch back and refresh the page, you can see that Show More link
7:49
now pushes down the edit and back links which, in fact,
7:54
we don't even really know where we're going to put those yet.
7:57
But, that's fine for now.
8:00
I'm going to make the details link bold, and I'm also going to increase the font size
8:02
just a little bit just so that it stands out from the description
8:09
and we remember that we actually need to style that later.
8:13
As one final change here, I'm actually going to put some margin bottom on the description.
8:17
So, let's go ahead and select that, and we'll say "margin bottom" and again,
8:23
we'll just put about 20 pixels.
8:27
So, we'll switch back, and it looks like the margin didn't quite get applied
8:30
to the job description, and I think that's because we used the wrong selector.
8:34
Yep, we need to say job description instead of just description.
8:38
So, we'll save that out and refresh, and now, we have a pretty good looking show view.
8:44
We can go back to our index view.
8:50
We can browse through these job listings.
8:52
We can click on one of them, go back again,
8:55
and so far, this is looking pretty navigable.
9:01
I think I actually am going to add just a little bit of additional styling to this index view real quick
9:05
just to separate out these job links a little bit more clearly.
9:11
So, let's go ahead and scroll back up, and inside of these LIs for each job link
9:16
I'm just going to apply a background color.
9:23
So, I'll say "background" and we'll just set it to yellow and refresh the page.
9:26
And now, it makes it a lot easier to see the clickable area for each one of these jobs.
9:33
And I think that'll about do it for our show view.
9:42
So, let's go ahead and switch back, and it looks like everything is saved out,
9:47
so let's go ahead and switch over to our terminal.
9:52
We'll go ahead and stop our server.
9:54
We'll say "git add ." and then "git commit" with the message flag,
9:56
and we'll say "Styled the show view for jobs" and commit that.
10:02
And then we'll say "git push" and that should push up our changes for both the index view,
10:11
and more importantly, for the show view.
10:19
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