Bootstrap 4
Bootstrap is a css framework that can be added to our rails application. First of all, let's start from the scratch and create a project that we will be using in this project. As usual create a Rail Project and name it what you want it to be $ rails new (what you want it to be), in this article, i will be using preshy - $ rails new preshy. Be sure to add the dependencies you need to add both to your database.yml and in your gemfile and run bundle install and bundle update respectively. Check this link for more info.
Then run $ rails generate scaffold Article title:string description:text and after which you will run the command $ rails db:migrate so as to properly have your database and table to be well created. We used scaffold here because like you may already know scaffold is a Ruby on Rails command that houses the three main building blocks of rails - Models, Views and Controllers (MVC). These would be automatically generated and added to our project.
Now let’s proceed to our gemfile and remove your gem ‘bootstrap’ and gem ‘jquery-rails’ and run the command $ bundle install and $ bundle update respectively. But if you do not have the above mentioned dependencies as i do not have it in my own gemfile, feel free to ignore the last gemfile steps above. We are removing the bootstrap and jquery gem from our gemfile because rails comes with the webpacker gem that combines the JS files into one.
We will achieve that by using yarn. Yarn works with webpacker and allows us to add different JavaScript libraries. so you can add yarn with as many JavaScript libraries you want to add separating them with a space. For this article we will be adding yarn with bootstrap jQuery and popper.js.
Yarn will have all the packages added, wrap them up and have them installed in our application. It would install and show us what version of the dependencies that we are working with. $ yarn add bootstrap jquery popper.js
Alright let’s proceed to our vs code, then checkout in your application, go to the config, open the webpacker folder and check on the environment.js file and then have these block of codes added in the file in between const { environment } = require('@rails/webpacker') and module.exports = environment. It should be written thus:
Next , we will go to our app -> javascript -> packs -> application.js , inside this application.js file, there are some automatically generated files by our rails 6 application.
JQuery will not be required in the application.js environment since we have already added that in our environment.js. What we will need to add here is to import our bootstrap. This is done by simply adding import ‘bootstrap’ at the top of the generated syntax in that file by the rails application.
Move to app -> assets -> stylesheets -> application.css file and then rename the application.css file to application.scss and then delete all the codes that are in the file and add @import ‘bootstrap/scss/bootstrap’. If you are having trouble running it this way then consider doing @import “~bootstrap/scss/bootstrap” and you will be fine.
With that said, we will check if our installation is working out good. Bring up the rails server with the command $ rails server, then go to bootstrap site and grab any framework and bring it over to your application and move to the views and then in articles file (or whatever your scaffold is) go to the index.html.erb file and then paste it. In this article, we will be using the bootstrap modal.
Then in your browser, go to the localhost3000/articles(whatever the name of your scaffold is) and see. Then it brings up the bootstrap modal launch demo button which you have added to your application. I just added Bootstrap to the launch demo modal button. So it's working well!
Now, talking about Bulma. This is an open source css framework based on flexbox. Bootstrap and Bulma can actually co-exist and we will go ahead and have it added to our rails application so we can have our required user experience.
To get started, we need to go to the project we have been working on already and open our gem file so as to add bulma dependency. We would get that from the www.rubygems.org site, grab it and add it to your gem file and then run $ bundle install.
As at the time this article was written, gem ‘bulma-rails’ ‘-> 0.9.0’ was used.
Then in your app -> assets -> stylesheets -> application.scss file, as you can see, no need to rename the application.scss file since it has been renamed already. So import bulma by typing @import "bulma/css/bulma.css";
Remember from our second paragraph, we have already generated our scaffold and also added our jquery using yarn. Now that we have added what we need to add for our bulma, there is a need for us to add some template elements at our rails wrapper file which is located at app -> views -> layouts -> application.html.erb.
The wrapper file controls the view in our rails application. Bulma being a powerful responsive css framework that would allow your application to adjust based on the screen size, we will have to add this bulma viewport meta tag to our head tag in application.html.erb
With the responsive meta tag added, we will add bulma navigation to our application by following the bulma navigation link indicated above and have it added at the top of your index.html.erb file before the <h1> tag from app -> views -> articles -> index.html.erb.
The outcome should look like what we have below:
In case you experienced some challenges bringing your application to work on the browser just like I did as a result of turbolinks from application.html.erb file, go to rubygems.org and grab the gem coffee-script-source and add it to your gemfile and run $ bundle install.
Since you grabbed the gem from rubygems.org, there may not be any need to run $ bundle update since the gem you have is the latest version. Then finally change <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> to
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> refresh the browser and it should work out fine.
That is it! Bootstrap is a wonderful framework to work with but I think in recent times, most people prefer using Bulma because of its simplicity, responsiveness and the good user experience it offers to its users. Both frameworks can co-exist as we can see it from the image above.
So it’s up to you to decide on which framework to work with. Thanks for stopping by and checking on this article. Hope you found it helpful.
Kingsley McSimon Ogbonna – a Full-Stack developer student in Microverse – a remote software development school based in California. You can view my Portfolio, take a look at my Github repo, check me out on LinkedIn and follow me on Twitter.