Styling Your Bookstore

Your bookstore is really starting to take shape. But doesn’t it look a little…spartan?

Don’t get me wrong, there’s a beauty in the simplicity. However, there are a few changes we can make that’ll make your bookstore easier to use.

We’ll add a CSS file to add some style rules. Then, we’ll update your templates to take advantage of the new style rules.

  1. Download the stylesheet file bookstore.scss here.

  2. Move bookstore.scss to app/assets/stylesheets.

    Rails will automatically load all stylesheet files defined in app/assets/stylesheets.

  $ ls -l app/assets/stylesheets
  total 16
  -rw-r--r--  1 awesomesauce  staff   736 Dec 30 12:13 application.css
  -rw-r--r--  1 awesomesauce  staff  2812 Dec 30 12:14 bookstore.scss

Hey - I thought we were adding a CSS file?! What’s a .scss file?

bookstore.scss is a Sass file!

As they say at the top of their homepage, Sass is “CSS with superpowers.”

We can use both Sass and CSS files in your application because Rails ships with support for both.

If you’re curious, you can read the Sass docs to learn more about it.

Now that your application has some styles, let’s use them!

Let’s start by adding a header that will get rendered on every page.

  1. Open app/views/layouts/application.html.erb in your text editor.

    This file makes up the skeleton of every page in your application.

    All your content is rendered inside the body tag.

    <body>
  <%= yield %>
</body>

  2. After the beginning of the body tag, add the following code:

    <div class="navigation">
  <div class="center">
    <%= link_to "My Super Rad Bookstore", books_path %>
  </div>
</div>

    On every page of your bookstore, there will be a header with a link labeled “My Super Rad Bookstore” that links to the books index. No matter what page your on, you’ll be able to get back to your bookstore’s main page.

  3. Now, let’s add a containing div around your application’s content.

    Inside the body tag, change the yield line from

    <%= yield %>

    to

    <div class="container">
  <%= yield %>
</div>

    This let’s us add some styling to make your application’s content consistent across the different pages.

  4. Save your changes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  <!DOCTYPE html>
  <html>
    <head>
      <title>Bookstore</title>
      <%= csrf_meta_tags %>

      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    </head>

    <body>
      <div class="navigation">
        <div class="center">
          <%= link_to "My Super Rad Bookstore", books_path %>
        </div>
      </div>

      <div class="container">
        <%= yield %>
      </div>
    </body>
  </html>

  1. Now, let’s take a look at the books index. Open app/views/books/index.html.erb.

  2. At the end of the template, you have a link to add a book.

    Let’s make that link look like a button. This will help people recognize the link as an actionable item.

  3. Change the link from

    <%= link_to("Add a book", new_book_path) %>

    to

    <%= link_to("Add a book", new_book_path, class: "button") %>

    With this change, you’re adding a CSS class called button to the link. The CSS class button is defined in bookstore.scss.

  4. Save your changes.

1
2
3
4
5
6
7
8
9
10
11
  <h1>Welcome to My Super Rad Bookstore!</h1>

  <ul>
    <% @books.each do |book| %>
      <li>
        <%= link_to(book.title, book_path(book)) %> by <%= book.author %>
      </li>
    <% end %>
  </ul>

  <%= link_to("Add a book", new_book_path, class: "button") %>

Now that we have some styles in place, let’s see what they look like.

  1. Go to Terminal and make sure you’re in the bookstore directory.

  2. Now, start your application’s web server and go to http://localhost:3000/books.

  $ pwd
  /Users/alimi/Projects/bookstore

  $ rails server
  => Booting Puma
  => Rails 5.0.0.1 application starting in development on http://localhost:3000

Browser showing styled books index

Wow! Doesn’t it look so different?!

Let’s add a few more finishing touches.

  1. Open app/views/books/new.html.erb.

  2. We’ll add the button CSS class to the form submission button to make it look like a…button.

    Trust me, it’ll be a really good looking button 😉

  3. Change the submit button from

    <%= f.submit %>

    to

    <%= f.submit(class: "button" )%>

    This change is very simmilar to the change we made to the “Add a book” link. Before, you weren’t passing any arguments to the submit button. Now, you’re setting the class to button.

  4. Save your changes and go to the new book page to see your changes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  <%= form_for(@book) do |f| %>
    <ul>
      <li>
        <%= f.label :title %>
        <%= f.text_field :title %>
      </li>

      <li>
        <%= f.label :author %>
        <%= f.text_field :author %>
      </li>

      <li>
        <%= f.label :price_cents %>
        <%= f.number_field :price_cents %>
      </li>

      <li>
        <%= f.label :quantity %>
        <%= f.number_field :quantity %>
      </li>

      <li>
        <%= f.label :description %>
        <%= f.text_area :description %>
      </li>
    </ul>

    <%= f.submit(class: "button") %>
  <% end %>

Browser showing new book page with a styled button

There’s one more link we’ll style as a button. Can you guess which one it is?

It’s a sneaky one - the “Edit book” link on the book details page.

Once again, we’ll style the link as a button to help people recognize it as an actionable item.

  1. Open app/views/books/show.html.erb.

  2. Just as we’ve done before, add the button class as the last option to the link.

  3. Save your changes and visit http://localhost:3000/books/1 to see your changes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  <dl>
    <dt>Id</dt>
    <dd><%= @book.id %></dd>

    <dt>Title</dt>
    <dd><%= @book.title %></dd>

    <dt>Author</dt>
    <dd><%= @book.author %></dd>

    <dt>Price</dt>
    <dd><%= number_to_currency(@book.price_cents / 100.0) %></dd>

    <dt>Quantity</dt>
    <dd><%= @book.quantity %></dd>

    <dt>Description</dt>
    <dd><%= @book.description %></dd>
  </dl>

  <%= link_to("Edit book", edit_book_path(@book), class: "button") %>

Browser showing book details page with styled edit link

Finally, we have one more button to style as a…button.

  1. Open app/views/books/edit.html.erb.

  2. Just like the submit button on the new book template, add the button class as the last option to the edit book template’s submit button.

  3. Save your changes, go to http://localhost:3000/books/1/edit, and admire your freshly styled button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  <%= form_for(@book) do |f| %>
    <ul>
      <li>
        <%= f.label :title %>
        <%= f.text_field :title %>
      </li>

      <li>
        <%= f.label :author %>
        <%= f.text_field :author %>
      </li>

      <li>
        <%= f.label :price_cents %>
        <%= f.number_field :price_cents %>
      </li>

      <li>
        <%= f.label :quantity %>
        <%= f.number_field :quantity %>
      </li>

      <li>
        <%= f.label :description %>
        <%= f.text_area :description %>
      </li>
    </ul>

    <%= f.submit(class: "button") %>
  <% end %>

Browser showing book edit page with styled update button

Your bookstore looks sooooo purrdy 😍

Purrdy cat

But there’s one thing that’s kinda bugging me. Take a look at http://localhost:3000.

The default Rails homepage is a great way to verify things are working when you’re just getting started, but we’re well past that.

The books index at http://localhost:3000/books is your application’s true homepage, so let’s treat it that way!

To make the books index your application’s homepage, we’ll need to update your application’s routes.

  1. Open config/routes.rb in your text editor.

  2. Before the line with resources :books, add the following line:

    root "books#index"

    This will update your application’s routes so requests to http://localhost:3000 get routed to the BooksController index action.

  3. Save your changes.

1
2
3
4
5
6
  Rails.application.routes.draw do
    # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
    root "books#index"

    resources :books
  end

Let’s take a look at how the change to config/routes.rb changed your application’s routes.

  1. Go back to Terminal, stop your application’s web server, and run rake routes.

    You might not notice it, but there’s a new row at the beginning of the table.

    root GET    /                         books#index

    The root route has an empty path (there’s nothing after /).

  2. It’s a small change, but it’s pretty powerful. Restart your application’s web server and go to http://localhost:3000.

  $ rails server
  ...
  ^CExiting

  $ rake routes
     Prefix Verb   URI Pattern               Controller#Action
       root GET    /                         books#index
      books GET    /books(.:format)          books#index
            POST   /books(.:format)          books#create
   new_book GET    /books/new(.:format)      books#new
  edit_book GET    /books/:id/edit(.:format) books#edit
       book GET    /books/:id(.:format)      books#show
            PATCH  /books/:id(.:format)      books#update
            PUT    /books/:id(.:format)      books#update
            DELETE /books/:id(.:format)      books#destroy

  $ rails server

Browser showing the books index as the bookstore's homepage

Now that your bookstore has a root route, let’s make one more change.

  1. Open app/views/layouts/application.html.erb.

  2. Change the “My Super Rad Bookstore” link from

    <%= link_to "My Super Rad Bookstore", books_path %>

    to

    <%= link_to "My Super Rad Bookstore", root_path %>

    By changing the link to root_path, we can always be sure that it will go to your application’s homepage.

  3. Save your changes and take your updated bookstore for a spin. When you’re done, stop your application’s web server.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  <!DOCTYPE html>
  <html>
    <head>
      <title>Bookstore</title>
      <%= csrf_meta_tags %>

      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    </head>

    <body>
      <div class="navigation">
        <div class="center">
          <%= link_to "My Super Rad Bookstore", root_path %>
        </div>
      </div>

      <div class="container">
        <%= yield %>
      </div>
    </body>
  </html>
Chapter 6
Chapter 8