How to Prepare a Rails Project for Styling12:49 with Nick Pettit
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.
[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 up