5.1.1 Site navigation

As a first step toward adding links and styles to the sample
application, we’ll update the site layout file application.html.erb
(last seen in Listing 4.3) with additional HTML structure. This includes
some additional divisions, some CSS classes, and the start of our site
navigation.
5.1.2 Bootstrap and custom CSS

In Section 5.1.1, we associated many of the HTML elements with CSS
classes, which gives us considerable flexibility in constructing a
layout based on CSS. As noted in Section 5.1.1, many of these classes
are specific to Bootstrap, a framework from Twitter that makes it easy
to add nice web design and user interface elements to an HTML5
application. In this section, we’ll combine Bootstrap with some custom
CSS rules to start adding some style to the sample application.
5.2.2 Syntactically awesome stylesheets

Sass is a language for writing stylesheets that improves on CSS in many
ways. In this section, we cover two of the most important improvements,
nesting and variables.
5.3.2 Rails routes

Now that we have tests for the URLs we want, it’s time to get them to
work. As noted in Section 3.1, the file Rails uses for URL mappings is
config/routes.rb. If you take a look at the default routes file, you’ll
see that it’s quite a mess, but it’s a useful mess—full of commented-out
example route mappings. I suggest reading through it at some point, and
I also suggest taking a look at the Rails Guides article “Rails Routing
from the outside in” for a much more in-depth treatment of routes.

To define the named routes, we need to replace rules such as

get 'static_pages/help'

with

match '/help', to: 'static_pages#help', via: 'get'
5.3.3 Named routes

Let’s put the named routes created in Section 5.3.2 to work in our
layout. This will entail filling in the second arguments of the link_to
functions with the proper named routes. For example, we’ll convert

<%= link_to "About", '#' %>

to

<%= link_to "About", about_path %>

and so on.