Implementing the HTML files to the Master Layout in Rails

Implementing design templates into Rails can be messy business. Even when the designs were created by a talented developer it can still be challenging to integrate the design assets for a number of reasons. Mainly the issue is that the Rails asset pipeline does not work the same way that a static HTML/CSS site operates. If you navigate to the assets and double click the index.html file you'll see it opens up perfectly in the browser and displays everything properly. However, as you'll soon see, when we paste that HTML code into the application, the design is going to be scattered all over the page. This is due to the fact that Rails compiles all of the CSS and JavaScript assets into a single file when you startup the Rails server. While this is good for performance reasons, it means that we'll need to properly organize our code to match the Rails asset ecosystem.

To begin we'll start by picking out the elements of the design that are shared across the application. Looking at the index page shows that the header is going to be the same for all of the pages, so it would make sense to have that element called from the master layout file, as opposed to each individual page.

large

If you scroll down you'll see the footer is the same, so we'll include both of these items in the master layout file. This seems like a good place to get started with the implementation. Let's create a partial that will store the header:

touch app/views/shared/_header.html.erb

Now let's add in header code into the partial:

<!-- app/views/shared/_header.html.erb -->

<div class="grey2"></div>

<div id="header">
    <div class="container">
        <div class="row">
            <div class="grey"></div>
            <a class="col-xs-3 logo pull-left" href="index.html"><img src="images/common/logo.png" alt="dailysmarty"><img class="logo-small" src="images/common/logo_small.png" alt="dailysmarty"></a>
            <div class="col-xs-9 pull-left">
                <div class="col-xs-6 pull-left">
                    <span class="icon icon-search"></span>
                    <input type="text" placeholder="Search..."/>
                </div>
                <div class="col-xs-3 avatar pull-right">
                    <a href="stats.html">
                        <div class="mask"></div>
                        <img src="images/common/guest_image.png">
                    </a>
                    <strong>Welcome Guest!</strong>
                    <a href="#signup">Sing Up</a> or
                    <a href="#register">Register</a>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

<div id="main-menu" class="small">
    <div class="container">
        <div class="row">
        </div>
    </div>
</div>

And now let's call this partial from the main layout file:

<!-- app/views/layouts/application.html.erb -->

<!DOCTYPE html>
<html>
<head>
  <title>Dailysmarty</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= render 'shared/header' %>
<%= render 'shared/alerts' %>
<%= yield %>

</body>
</html>

Let's startup the rails server and see how ugly this is.

medium

Wow, that's ugly! Oh, the site is ugly too:

large

So what's going on here? Well if you look at the full index.html page you'll see that it has a set of styles that the application needs in order to look like the mock:

large

We're going to integrate the Twitter Bootstrap framework in the next lesson, so for right now let's simply bring in the custom styles that the designer created. We can simply copy and paste the files in the design assets directory css/common and paste those into the Rails application app/assets/stylesheets. Simply by doing that if you refresh the page you'll see that page updated and picked up a few of the styles. Now let's fix the images so those aren't showing as broken links. Copy all of the image files from the design directory /images to the app/assets/images directory in the application. You're image directory should now look something like this:

large

This won't fix the issue, now we need to properly call the images from the _header partial, let's update both of the image calls so they match the below code:

Logo

<a class="col-xs-3 logo pull-left" href="index.html">
  <%= image_tag('common/logo.png') %>
  <%= image_tag('common/logo_small.png', class: 'logo-small') %>
</a>

User Icon

<a href="stats.html">
  <div class="mask"></div>
  <%= image_tag('common/guest_image.png') %>
</a>

Now if you refresh the page you'll see a big ugly Sprockets::Rails::Helper::AssetNotPrecompiled error. So what gives? If you look at the error message shocking how often this helps, you'll see the problem:

Asset was not declared to be precompiled in production.
Add `Rails.application.config.assets.precompile += %w( common/logo.png )` to `config/initializers/assets.rb` and restart your server

Rails really does have some of the best error messages as far as web frameworks go. Let's take their advice and add the code to the assets initializer:

# config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( common/logo.png )

Now restart the Rails server and refresh the browser and you'll see that the images are showing up, nice work!

So why are they stacked on top of each other? This is because the application uses the Twitter Bootstrap framework, which means we need to integrate that into the system to have our layout match the mock. We're off to a good start, in the next lesson we'll implement Bootstrap into the application.

Resources

Project code at this stage