Quickly Add Responsive Styling to a Rails 6 Project Using Bulma, jQuery, and Bulmaswatch

Clark Johnson
Nov 14, 2019 · 4 min read

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.

The components:

  • Ruby on Rails Project (I used Rails version 6)
  • Bulma , an open source responsive CSS framework.
  • Jquery, the never say die javascript framework.
  • Bulmaswatch, a set of predefined styles that instantly theme your site.

Start With a Rails 6 Project

Ruby on Rails
Ruby on Rails

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 new
Rails g scaffold post title content:text
Rails db:create
Rails db:migrate

Install Bulma

Rails 6 components often install with yarn. I went with the gem method out of habit from Rails 5.

To your Gemfile add:

gem "bulma-rails", "~> 0.8.0"

Then, import the framework in your app/assets/stylesheets/application.scss file.

@import "bulma";

The file may not exist. Just rename theapplication.css file in the same directory to application.scss.

Let’s add basic template elements toapp/views/layouts/application.html.erb.

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 <head>.

<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">
<div class="navbar-brand">
<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>

<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>

Wrap your <%= yield %> to establish a reference for Bulma. Your template file will have something like this:

<body>
<section class="section">
<div class="content">
<%= yield %>
</div>
</section>
</body>

Start your rails server now and browse a route to see your progress.

Add jQuery for Navigation Actions

To get the navbar-burger functioning, you’ll need some javascript. jQuery has been around for a while, but still gets plenty of traffic. The Rails 6 installation of jQuery is a little different than it’s been in the past. Instead of a gem install, we need to use yarn add.

yarn add jquery

Your config/webpack/environment.js should look something like this:

const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
module.exports = environment

To app/javascript/packs/application.js, add

require("jquery")

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 application.html.erb file.

<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 flatly to slate.

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!

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Clark Johnson

Written by

Full stack software engineer seeking projects using React, Ruby on Rails, Javascript, when I’m not at a baseball game

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Clark Johnson

Written by

Full stack software engineer seeking projects using React, Ruby on Rails, Javascript, when I’m not at a baseball game

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store