[?music?]

[Master Class: Designer and Developer Workflow: Styling the Index View]

[Nick Pettit] We're now in Sprint number four

and there's a few things that we need to do here, but in general,

we're probably going to try and wrap things up.

Our major goals for this Sprint are going to be

to finish up any fluid grid calculations that we need to do,

clean up our CSS by adding some comments.

We need to move our styling from the job show view to all the other pages on the site.

We may need to add some media queries in order to make the site more responsive,

and there are probably a few other things we need to tie up,

so let's just go ahead and dive in.

First, I'm going to go ahead and do a $git pull

to make sure that I'm completely up to date with any changes Jim may have made,

and then I'm going to go ahead and branch into a branch called style.

So if I type $git branch now, I should see that I have a branch called style,

so let's go ahead and do a $git checkout style

and switch over.

And that should keep any of our changes isolated from any changes

that Jim might be making in parallel with us.

So now, let's go ahead and start up our Rails server

so I'll type $rails s

and I'll let that get fired up.

And then, if I switch over to the browser and refresh on localhost: 3000

I should see our Easy Jobs! website here.

Now, most of our work has been done on the show view for jobs

and if we go ahead and resize the browser here,

you can see that we have a little bit of a fluid grid going.

There's a few problems when we get down to smaller sizes,

but that's nothing that can't be solved with a few media queries.

And so I think we're looking pretty good with the fluid grid so far,

so we'll go ahead and roll with that for now.

Now, the next thing that we need to do

is start cleaning up our CSS,

so let's go ahead and switch over to our text editor.

I'm going to go into the public folder here, style sheets, SASS,

and then I'm going to jump into application.sass

and let's just go ahead and add a few comments.

So I'll type // to start my comments there.

I'll go ahead and put in a few stars to create a comment flag

and let's go ahead and call this first section BASIC STYLES.

And let's go ahead and copy our comment flag

down to about here because I think that's where our job styling begins.

So we'll go ahead and just call this JOBS

and then maybe a little bit more detail with INDEX/SHOW VIEWS.

And with that comment flag still on our clipboard,

let's go ahead and scroll down here.

So it looks like we do have job_show view here,

so we can actually split those out.

So here, we'll say this is the JOB SHOW VIEW

and then if we go back up to that first comment flag,

we'll say that it's the JOB INDEX VIEW.

There we go.

And I'm just going to create a little bit of space between each one of these comment flags

just to denote a new section

and let's keep scrolling down here to see if we have anything else.

It looks like we have an h2, a field, and then a label here

and I'm guessing that's probably for our forms,

so let's go ahead and just create a section there called FORMS.

So now, we've added some commentary and we'll probably add

a little bit more commentary as we go along,

but now it's a lot easier to understand where our CSS is actually going here.

So next, let's start styling some of the other pages beyond the show view.

So we'll go ahead and switch over to the browser and take a look at what we have here.

Here we have our show view and that looks to be in pretty good state of completion,

so we'll go ahead and run with this and use it to style our other pages.

We click the Back button here,

we can see that our index view probably could use some work to pretty it up

and make it look just as good as our show view.

and then we have our New Job view, which actually I need to be logged in to view,

so let's look at some of our other forms pages.

If I go to Register here, it looks like something's messed up there,

so we'll go ahead and fix that.

And I've already created an account, so I'll go ahead and sign in

using my email address and very insecure password.

Now, if I hit Log In,

you'll see that I should now be able to create New Jobs.

Down here at the bottom of the New Jobs view,

it looks like a few things are broken there,

so in general, it seems as though we have a little bit of work to do

on the forms view and we also probably need to style that Flash message

that appears at the top that said I needed to be logged in.

So there's a few other views to style here.

Why don't we start off with the index view?

So now that I'm logged in and looking at the index view,

I think I want to add some row striping here,

and I think I might want to turn the New Jobs into more of a button

that makes it look like more of a call to action.

The typography on these new jobs also isn't that great,

so maybe we'll play with that a little bit

and I think all the jobs could use some spacing here

because originally, when we were logged out,

a few of the other links were actually the only thing giving these any kind of separation.

And hopefully, in this Sprint, Jim will either show or hide some of those links.

So before we get ahead of ourselves, let's go ahead and switch back to our TextEditor

and we're going to go into apps, views, and then we want to open up a jobs folder here

and we're going to open our index view.

Now, it looks like this is an unordered list.

So we have a %ul tag and then we have a few list items

and we have all of our jobs underneath that.

There may be other unordered lists on the site in the future,

so let's go ahead and make this a little bit more specific by adding an id.

And to this unordered list, I'm going to add the id of jobs

and then I'll go ahead and switch back to our application.sass file

and let's scroll up to where it says JOB INDEX VIEW.

And so next, I'll go ahead and select our unordered list with the id #jobs.

I'll select each one of our list items.

I will use the :nth-child pseudo selector

and give it a value of odd so only the odd rows are selected.

And then, our background color is on the job_link here,

so let's go ahead and delete that

and we'll apply a background color to each one of our job_links

and let's just see if this works.

So we'll say background:

and we'll just give it a value of something really obnoxious, like green

and we'll switch back to the browser and refresh

and it looks like that applied correctly.

So now, we need to go ahead and pick out a background color.

So we'll go ahead and switch back to our text editor,

so let's make this a light blue color,

and to do that, we'll go ahead and drop the values of red, green,

and then put on full blue.

We'll save that, switch back, and it looks like we now have this nice blue color.

It looks a little bit purpley to me, so I'm going to go ahead and drop the reds a bit more.

So maybe we'll drop that down to B

and if we refresh, that still looks a little bit too saturated

so maybe we'll bump this up to C and E.

And that's getting a bit closer; maybe we can make that just a little bit more subtle.

We'll do something like this #00F5FF

and I think that looks pretty good for our row striping.

Now let's go ahead and do the same thing

on the even rows

and for the even rows, we'll make them even lighter #EEFFFF

so it will be just a very slight color on them

and I think that looks pretty good.

That gets them some nice separation.

And so now, we need to add in some padding,

so let's go ahead and try that on our job_link.

So we'll add some padding to the top and bottom

and let's just see what that does.

That looks pretty good.

That adds some nice separation to each one of these jobs.

I'm still noticing that the text is running right up against the edge

and that doesn't look very good, so let's go ahead

and add some padding on the left and right.

Just do something like 10px, and if we refresh,

I think this is starting to look pretty good.

Now, I'm not totally thrilled with the typography here,

so maybe we can try to improve the look of this a little bit

and make these jobs a lot easier to scan.

Remember, these entire rows are links,

so maybe we can even add a hover state there as well

just so that when you scroll over all of these jobs,

they sort of light up and you know which one you're selecting,

so let's go ahead and do that.

We'll switch back to our text editor, and on the job_link,

go ahead and add a hover state,

and we actually don't need those curly braces there because we're using SASS.

And let's apply a background color, and again,

we'll just do green to make sure that we're selecting this properly.

And it looks like we're actually not, so let's see what we can do to fix that.

We need to actually add an ampersand there to get the pseudo-class

to run right up against the job_link there with no space,

so we'll save that,

switch back to the browser and refresh.

And it still looks like we're having an issue here,

so let's go ahead and switch back

and let's try something a bit more simple

by just saying job_link:hover

and let's see if that works.

So I think the problem that we're now encountering is selector specificity,

so let's go ahead and switch back to our text editor

and the problem is coming in with this pseudo-selector here,

so what we need to do is just create hover states for each one of these.

So we'll go ahead and delete that here

and I'll go ahead and add a &:hover state

and here we'll say background: green

and we'll do this a little bit messily by repeating ourselves, but that's okay.

We'll save that out, switch back, refresh,

and now it looks like we have a really nice hover state.

So now, we just need to pick a color

and I think for this color, we'll actually go back to that yellow highlight.

So we'll say background: #FFFFCC

and let's just see how that looks on these ones here.

That looks pretty good, so I'll go ahead and add that color in to there

and refresh the page.

Now we have this nice hover state going,

so I think that looks pretty good.

Now let's address this text.

So we'll switch back

and on the job_title,

let's go ahead and make this a little bit bigger.

We'll do something that I think is probably going to be too big,

like 2ems.

And yep, that is a little bit too large.

We can probably increase the number of columns here.

There we go.

But I think that's pretty close to the size we want.

The only problem is that it's almost as large as the New Job link,

so let's go ahead and just decrease the size a tiny bit down to 1.8em.

I think that's pretty good.

And in addition, I wanted to actually style the color of these links,

so on the job link,

we'll say text-decoration: none so that there's no underline on the links.

And then let's go ahead and just say color: black

to color big links black there.

That looks pretty good to me.

The titles are nice and dark so they contrast with the background really nicely

and make them very easy to read.

Let's go ahead and make the descriptions a little bit lighter

so that they're less emphasized and allow the titles to be more scanable.

So on the description,

we'll go ahead and change the color

and we'll make it a dark gray color;

maybe something like #555 in hexadecimal.

And I think that's perfect.

I think we nailed that on the first try,

so that looks pretty good.

I think next we need to get this text running all the way across the page

if at all possible, so let's go ahead and see if we can't do that.

It looks like we're having this take up a fixed width

with a column, so let's go ahead and just see if we can cut that out

and see what happens.

Okay, well it looks like we actually did need that fixed width,

so let's go ahead and add that back in.

So next, let's go ahead and try to apply a width to the unordered list element.

So we'll come up here

and we'll say ul and we'll go ahead and apply the id #jobs

and let's just say width: 100%.

And then, let's go ahead and remove those columns again.

Let's see if we can get away with this.

No, it looks like we do need some sort of container here

to go ahead and stop these columns from running all the way across.

Actually, before we try that, let's go ahead and switch back to our text editor

and let's try putting a width on the job_link here.

So we'll say width: 100% and save that,

and then let's switch back over and refresh the page

and that actually looks like it did it.

We don't need a container after all, so that's good--less markup.

However, it does look like we have a slight issue on the left and right side.

So you can see the space over on the left is much greater than the space over on the right

and I'm pretty sure that's because of this elipses here, these ...

It looks like they're not actually precalculated with this text,

so we need to go ahead and account for that in our width.

We could probably do this another way by maybe adding some negative margin,

but we can go ahead and just fudge that a little bit by reducing the width,

so let's go ahead and switch back and we'll put this at something like 98% and save that.

And when we switch back and refresh,

it looks like that's just about the same amount of space on the left and right sides,

so it looks good.