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
Well done!
You have completed Design and Development!
You have completed Design and Development!
Preview
In this video, we'll take care of a few preparatory items that are necessary for us to begin styling the site. This includes picking a CSS framework and including it into our project.
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] [Prepping the Project]
0:00
So, we're going to go ahead and jump into the code, but first,
0:08
it looks like I've received a message from Jim, so let's go ahead and check that out.
0:12
"Hey Nick, just wanted to let you know that I've added SASS support."
0:17
"So if you put a SASS file in layouts/stylesheets/SASS
0:20
it'll automatically be compiled into the root stylesheet's folder. Enjoy!"
0:24
Now earlier, Jim sent us the details for our repository on GitHub and here it is.
0:31
So, let's go ahead and pull that into our project directory.
0:39
So, I'll go ahead and say "git clone," and we need to just go ahead and grab this here.
0:43
And we'll paste it into our terminal,
0:52
and that will go ahead and clone the project.
0:58
Now obviously, I already have git installed.
1:02
I've also installed Rails, and I've installed some of the gems that we'll need
1:05
including the HAML and SASS gem for the view templates.
1:10
So, let's go ahead and jump into this project directory.
1:15
So, I'm just going to list out the directory, and it looks like it's called "EasyJobs"
1:19
so we'll jump in there, and let's just go ahead and try to start up the project.
1:24
So, I'll start the server, and we'll jump over to Google Chrome,
1:29
and we'll say "local host 3000," and it looks like we have a problem here.
1:38
Now, I didn't create the database, so we need to go ahead and do that first.
1:45
So, I'll switch back to my terminal and stop the server, and I'll say "rake ddmigrate"
1:50
and that should create the tables and all the information that we'll need.
1:58
Now, I can say "rails s" and get the server going again,
2:03
switch back to Chrome and refresh the page, and now,
2:08
it looks like we have a Rails application running.
2:13
Now, we're going to do a few things to this application such as styling the index view,
2:16
the show view, and the various form views.
2:22
But first, we need to get our database going with some fake data.
2:25
So, let's just go ahead and create that now.
2:30
So, I'll create a new job, and I'll call this job "Ice Cream Tester" and for the description
2:33
I'll go ahead and say "Try new ice cream all day and get paid,"
2:44
and I'll go ahead and just copy that a few times to make the description a bit longer.
2:55
And then we'll go ahead and include the company name.
3:02
I'll say "Ice Cream Industries."
3:05
And we'll include a details link and I'll just say "example.com."
3:12
So, we'll go ahead and save that, and it looks like our job was successfully created,
3:20
so far so good.
3:26
We'll go back and we'll create a few more jobs here.
3:28
We'll say "Fashion Police Officer" and for the description we'll say
3:35
"Crack down on fashion crimes" and again, we'll just copy and paste that, fill things out.
3:45
Company name will be "Fashion Police Inc" and for this one,
3:54
we'll just skip the details link.
4:01
We're going to create a few more jobs.
4:06
The next job will be "Plant Babysitter," and I'll just say
4:09
"Watch plants grow up" and we'll create our description there.
4:15
We'll create a company name that says "Plant Sitting LLC" and again,
4:23
the details link will just be example.com, save that out, go back, create another job here.
4:31
And we'll say this one is a "Sandwich Enthusiast."
4:39
And for the description we'll say "Get paid to try new sandwiches."
4:48
"You pay for the sandwiches though."
4:58
Copy that and paste that a few times and company name we'll say
5:05
"Sandwich Inspection Inc" and again, we'll just go ahead and skip the details link for this one,
5:11
and we'll create one more job, and for this one we'll say
5:21
"Cinema Patron" and the description will be "Watch movies all day, no reviews required."
5:29
And we'll paste that a few times, and we'll leave this as a shorter description
5:47
just to provide some variety in our data, and for the company name we'll say
5:51
"Cinema Patron Express Inc" and again, we'll just use example.com as our details link.
5:59
So now, we have a database that's populated with a little bit of data.
6:08
A better way to do this probably would have been to have included this in a migration
6:14
so that we can replicate this database anywhere we want, but that's okay.
6:18
We can just do this the quick and dirty way, especially since we're just
6:22
trying to build the layout.
6:25
Now, before we get started on the styling, I want to include a CSS framework.
6:27
Now, because we're using HAML and SASS, I think it would be appropriate to use
6:32
Compass and Blueprint so that we can get all of the nice
6:38
blueprint mixins that come with Compass.
6:42
So, let's go ahead and do that.
6:45
Now, if you're not familiar with installing Compass or with what Compass even is,
6:48
we'll go ahead and hop over to compassstyle.org, and it says
6:54
Compass is an open source CSS offering framework, and they have really nice
6:58
installation instructions on their newish website, and you can actually
7:05
dynamically adjust these instructions.
7:11
So, we have an existing Rails project, so I'm going to say
7:15
"I would like to set up my existing Rails project with Blueprint's starter style sheets."
7:18
I prefer the SASS syntax, and of course, those of you that are more familiar with SASS
7:27
should know that there are 2 different syntaxes that you can use with SASS,
7:34
and I actually prefer the older indentation style versus the newer SCSS style,
7:39
but you can of course pick whichever one you want.
7:46
So, we'll go ahead and choose that, and now, down here,
7:50
we have our really nice installation instructions.
7:53
So, let's go ahead and follow through with those.
7:56
I'll switch back to the terminal, and I'll stop my server,
7:59
and let's go ahead and say "sudo gem install compass,"
8:05
and I'll put in my password, and this will take just a few minutes to install Compass.
8:12
Next, Compass said that we needed to jump into our project directory,
8:22
but we've already done that, and now, we need to go ahead and add Compass.
8:26
So, we'll type "compass init rails ." and we'll say that we're using Blueprint,
8:33
and then, we'll say the syntax we want is SASS.
8:40
So, we'll go ahead and just copy this command here,
8:44
and we'll go ahead and switch back, paste that, and now,
8:49
we've gone ahead and added Compass.
8:55
But, there's still a few more things we need to do.
8:58
We need to add the compass gem to our gem file, and then,
9:01
we need to add a few blueprint style sheets to our application layout.
9:06
So, let's go ahead and do that now.
9:12
We'll open TextMate by typing "mate." to open the current directory,
9:14
and now we're inside of our project directory.
9:19
So, we'll go ahead and open up our gem file, and we'll add the compass gem.
9:22
So, we'll type "gem compass," and then the version which is 0.11.3.
9:28
And we'll save out our gem file and then we need to go into app, views,
9:38
layouts, and open our application layout.
9:45
So, I'll go ahead and switch back to our terminal, and I'm just going to go ahead
9:49
and copy these style sheet link tags here to include Blueprint into our project.
9:55
So, I'll switch back to our text editor, and of course, we want to include Blueprint
10:02
before anything else, so we'll go ahead and paste that in there,
10:07
and we'll be sure to include proper indentation for the Internet Explorer 8
10:13
conditional comment there, and then,
10:18
it says here "stylesheet_link_tag :all" and we don't actually want that
10:23
because first, we're going to include our Blueprint style sheets,
10:28
but if we keep that stylesheet_link_tag :all there, it will include them a second time.
10:33
All we really want is our application.css file, so let's go ahead and add that in.
10:38
Application.css and of course, the media style will be screen and projection.
10:44
So, there we go, I'll go ahead and save that out, switch back to our terminal,
10:56
and I'll clear what we have, and now, let's go ahead and start up our server again.
11:02
So, I'll say "rails s" and I'll switch back to Google Chrome,
11:08
and I'll refresh EasyJobs, and now you can see it looks like that.
11:15
Now, there is one more thing we need to do.
11:22
We need to get rid of scaffold.css which is added in
11:24
when Rails generates new scaffolding.
11:29
So, we'll go ahead and switch over to TextMate, and we'll jump into public,
11:32
style sheets, and we'll delete scaffold.css because we don't need it anymore.
11:38
Move it to the trash, and now, when we switch back to Google Chrome and refresh the page,
11:46
it shouldn't look much different because we weren't actually including scaffold.css
11:52
when we made the switch from stylesheet_link_tag :all
11:58
to just application.
12:02
So now, we're at a point where we're ready to commit our work,
12:05
so let's go ahead and switch over to our terminal.
12:08
We'll go ahead and stop our web server and clear what we have,
12:11
and we'll go ahead and say "git add ." and then "git commit -m"
12:17
and we'll type in a simple message like "Added compass and blueprint."
12:25
And we've committed our files, now let's go ahead and say "git push"
12:35
and that will push up everything to GitHub, and
12:42
we've gone ahead and committed our changes.
12:46
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