RottenSoftware

Random thoughs about software development

Add Bootstrap to Hanami project

In previous post on Shyshka web app we ended up having list of words with their translations. This list has no CSS styles and we will add a tool that is going to improve an appearance of the project. My choice is to add Bootstrap.

What is Bootstrap?

Bootstrap is an open-source JS and CSS framework developed at Twitter. Its goal is to develop responsive, mobile first projects on the web. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

How to add Bootstrap to Hanami?

When I wanted to add Bootstrap to my project I did some googling first. I found hanami-bootstrap gem and this is definitely an easy option to add it to the project.

After looking at the code of this gem I decided I will add it directly. There are 2 reasons to do this:

  • it’s simple enough and adding it through a gem which I’m not sure if it’s going to be maintained might not be a good idea
  • I want to take this opportunity to learn a little more about how Hanami handles assets.

You can find information on assets in Hanami here.

One of the solutions is to add the additional folder to assets path and add Bootstrap there. We will add vendor folder in which we will keep third-party libraries.

Open apps/web/application.rb file and change asset section:

assets do

  # Specify sources for assets
  #
  sources << [
    'assets',
    'vendor/assets'
  ]
end

It tells assets management tool in Hanami - which is separated to its own gem - to lazy copy files from those paths to the public/assets folder.

After that we should create vendor/assets folders under apps/web directory.

Our folder structure is set correctly now.

The next step is to download jQuery library, which is a dependency for Bootstrap. Download jQuery and copy it to the apps/web/vendor/assets/jquery folder.

After that we can download Bootstrap library and copy it under apps/web/vendor/assets/bootstrap.

All files are placed correctly and now we can actually use those libraries in our project.

First, require them in the apps/web/templates/application.html.erb

    <%= javascript 'jquery-3.2.0.min' %>
    <%= javascript 'bootstrap.min' %>
    <%= stylesheet 'bootstrap' %>

We use here assets helpers from Hanami framework. You can read more about them here.

We will also add container CSS class from Bootstrap framework. So apps/web/templates/application.html.erb should look like this:

<!DOCTYPE html>
<html>
  <head>
    <%= javascript 'jquery-3.2.0.min' %>
    <%= javascript 'bootstrap.min' %>
    <%= stylesheet 'bootstrap' %>
    <title>Web</title>
    <%= favicon %>
  </head>
  <body class="container">
    <%= yield %>
  </body>
</html>

The last step is to add Bootstrap styles to the list of words. We will start very basic and for now, the file responsible for displaying this list should look like this:

<h1>All words</h1>

<div id="words">
  <div class="word row">
    <div class="col-xs-6">kot</div>
    <div class="col-xs-6">cat</div>
  </div>

  <div class="word row">
    <div class="col-xs-6">pies</div>
    <div class="col-xs-6">dog</div>
  </div>
</div>

Summary

That’s all we had to do to add Bootstrap to Hanami project. When we refresh page we should see, that page looks a little better.

hanami_bootstrap_basic

Written on March 26, 2017
>