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?
How to add Bootstrap to Hanami?
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
After that we should create vendor/assets folders under apps/web directory.
Our folder structure is set correctly now.
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
We will also add container CSS class from Bootstrap framework. So apps/web/templates/application.html.erb should look like this:
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>
Written on March 26, 2017