Filling in the Layout

In the process of taking a brief tour of Ruby in Chapter 4, we learned about including the application stylesheet into the sample application—but, as noted in Section 4.3.4, this stylesheet is currently empty. In this chapter, we’ll change this by incorporating the Bootstrap framework into our application, and then we’ll add some custom styles of our own.1 We’ll also start filling in the layout with links to the pages (such as Home and About) that we’ve created so far (Section 5.1). Along the way, we’ll learn about partials, Rails routes, and the asset pipeline, including an introduction to Sass (Section 5.2). We’ll also refactor the tests from Chapter 3 using the latest RSpec techniques. We’ll end by taking a first important step toward letting users sign up to our site.

Adding Some Structure

Rails Tutorial is a book on web development, not web design, but it would be depressing to work on an application that looks like complete crap, so in this section we’ll add some structure to the layout and give it some minimal styling with CSS. In addition to using some custom CSS rules, we’ll make use of Bootstrap, an open-source web design framework from Twitter. We’ll also give our code some styling, so to speak, using partials to tidy up the layout once it gets a little cluttered.

                             When building web applications, it is often useful to get a high-level overview of the user interface as early as possible. Throughout the rest of this book, I will thus often include mockups (in a web context often called wireframes), which are rough sketches

Sample App

                               Figure 5.1 A mockup of the sample application’s Home page.

of what the eventual application will look like.2 In this chapter, we will principally be developing the static pages introduced in Section 3.1, including a site logo, a navigation header, and a site footer. A mockup for the most important of these pages, the Home page, appears in Figure 5.1. You can see the final result in Figure 5.7. You’ll note that it differs in some details—for example, we’ll end up adding a Rails logo on the page—but that’s fine, since a mockup need not be exact. As usual, if you’re using Git for version control, now would be a good time to make a new branch: