Ruby on rails is a great platform for developing web applications. It’s also extremely adaptive and useful for discovering the power of object oriented programming.
Here’s what I did to get my run-of-the-mill rails project to have a little style and flair.
- Ruby on Rails Project (I used Rails version 6)
- Bulma , an open source responsive CSS framework.
- Bulmaswatch, a set of predefined styles that instantly theme your site.
Start With a Rails 6 Project
I’m learning Rails on versions 5 and 6, so that’s where I’ll start. You should be able to perform similar steps on any Rails version.
Feel free to use an pre-existing project, or generate a new one if you’d like with just a few commands:
Rails g scaffold post title content:text
Rails 6 components often install with yarn. I went with the gem method out of habit from Rails 5.
gem "bulma-rails", "~> 0.8.0"
Then, import the framework in your
The file may not exist. Just rename the
application.css file in the same directory to
Let’s add basic template elements to
Bulma is a responsive framework, meaning your site will make adjustments based on the width of the browser. That requires adding this viewport meta tag to the
<meta name="viewport" content="width=device-width, initial-scale=1">
You’ll want to add some navigation to your web page, so add the Bulma Basic Navbar snippet to your file. Replace the appropriate sections with your brranding and route paths.
<nav class="navbar" role="navigation" aria-label="main navigation">
<a class="navbar-item" href="https://versions.bulma.io/0.7.0">
<img src="https://versions.bulma.io/0.7.0/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<%= yield %> to establish a reference for Bulma. Your template file will have something like this:
<%= yield %>
Start your rails server now and browse a route to see your progress.
Add jQuery for Navigation Actions
gem install, we need to use
yarn add jquery
config/webpack/environment.js should look something like this:
const webpack = require('webpack')
)module.exports = environment
Great. This is a good time to do a
bundle install. Start your rails server and test your hamburger menu by resizing the browser window.
It’s Time for Bulmaswatch
Bulmaswatch is a set of free themes I recently discovered. They remind me of the old jQueru-UI themes. They’re very easy to install. Just include the CDN in the
<head> of your
<link rel="stylesheet" href="https://unpkg.com/bulmaswatch/flatly/bulmaswatch.min.css">
There were twenty-two themes available at the time I wrote this. The great thing is you can instantly change themes, just by changing the theme name in the above link. For example, try changing
That’s it. A next step might be to add font awesome if you want, or explore Bulma’s documentation for extended customization. Happy coding!