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