In this guide, I’m going to share a really simple Flexbox layout to get you up and running when developing applications - in this case, with Rails. Leveraging something like Bulma will give you a level of polish that might otherwise take time to do. You get things like responsive by default and really nice designs for forms, notifications, buttons etc. I chose Bulma because it’s one of the CSS Frameworks that supports Flexbox and I specifically wanted to be able to use that.

In order to use the sample code below, you’ll need to follow these quick steps:

Create a New Rails Application

To get started, we’ll need to create a new rails app. Please note, that you don’t necessarily have to be using rails to leverage this tutorial. You simply need a way to process the scss files and generate a single file with the css extension.


rails new myapp
cd myapp
bundle install
rails s

Once you start the server, you should see the Yay! You’re on Rails! default page. Onward!

Adding Bulma Using Yarn

Now that we have a rails app up and running, we need to install Bulma. We wrote about this a few weeks back, but you can read more about it here. I recommend a quick flip through to better understand how Bulma is added and where to reference it.


yarn add bulma

Setup CSS/SCSS Structure

This next bit is going to be a personal preference of mine. I generally like to have a single file that manages all of the scss partials and variables. I’ll summarize my steps:

  1. Create a new file called main.scss
  2. Create a new file called _layout.scss
  3. Within application.css, remove *= require_tree . and add *= require main
  4. Wire up main.scss to include Bulma and any partials you’ve created or will be generated in future.

When you’re done, your main.scss file should look like this:


@import 'bulma/bulma';
@import '_layout';

Your file structure should look like this:

File Structure

Setup a Users Resource

So our scss is sorted, we now need to include this in our application.html.erb layout. Before I do that though, we need to set up a really simple resource in Rails so that we can see some of this in action. Let’s setup a Users resource.


rails g resource User name:string email:string
rails db:migrate

Let’s update our routes.rb file to default to the users#index page, instead of where it’s routing us now.


root 'users#index' 

Update the users_controller.rb and define an index method.


class UsersController < ApplicationController
  def index
  end
end

Finally, create an index.html.erb file and add an H1 tag with some text for now.


<h1>Hello World!</h1>

You should now be looking at something like this:

File Structure

Now for the fun

Ok, so we’re ready go to. We’ve got a controller, but our layout is pretty plain. We’re going to start off by setting up a standard Header, Content, Footer layout that will give us a header for navigation/buttons, an area for all our content, and a footer to store any additional links, newsletter signup logic, etc.

Update our application.html.erb file for Bulma use. First, let’s add our responsive tag and font awesome css file.


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

Within the Body tags, add the following:


<header class="header">
  <div class="container">
    <nav class="level">
      <div class="level-left">
        <div class="level-item">
          My App
        </div>
      </div>
      <div class="level-right">
        <p class="level-item">
          <%= link_to("Manage Users", users_path, :class => "button is-dark is-outlined") %>
        </p>
      </div>
    </nav>
  </div>
</header>
<section class="section">
  <div class="container">
    <%= yield %>
  </div>
</section>
<footer class="footer">
  <div class="container">
    Copyright © 2019 MyApp. All rights reserved.
  </div>
</footer>

Within the _layout.scss file add:


body {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100vh;
}
.header {
  background-color:$white-bis;
  padding:2rem 1.5rem;
}
.section {
  display:flex;
  flex:1 0 auto;
}

The above logic gives us a really nice, single column, 3 row layout. The display flex on the body with a direction of column will allow us to create a layout that positions the footer at the bottom. The flex 1 on the section tag ensures that the section content takes up the full space.

File Structure

Now with Bulma, the possibilities are endless. The documentation is great and there is loads we can do form here. Let’s run through some examples:

Updating a Font in Bulma

Let’s say you’d like to use a font other than the default. This is really simple, within your main.scss file, add the following at the very top:


@import url('https://fonts.googleapis.com/css?family=Ubuntu');
$family-primary:'Ubuntu', sans-serif;

Please note, that when overriding any Bulma variables, you have to ensure that’s done BEFORE you import Bulma. So in the example above, my main.scss now looks like this:


@import url('https://fonts.googleapis.com/css?family=Ubuntu');
$family-primary:'Ubuntu', sans-serif;
@import 'bulma/bulma';
@import '_layout';

Refresh and voila! You now have a new font being used throughout your app.

File Structure

Let’s say you think the padding on the footer is too large, and you want to change the background color. Again, really simple.


$footer-background-color:#342E37;
$footer-padding:3rem 1.5rem;

File Structure

Add a Button to the Header Using Bulma

Let’s add another button to the header. In order to figure out how this should be structured, we visit the docs. Bulma has a whole section on buttons. We can grab some sample html from there directly and insert it into our application.html.erb file.


<p class="level-item">
  <a class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
</p>

Refresh and we get this:

File Structure

If you visit the Official Bulma Documentation, you’ll see there are a ton of variables you can change. And there are a lot of elements and components you can use that don’t require a lot of effort on your part.

I should note, that whenever you do run a rails generate of some kind that creates an scss file, you will want to change it into a partial and include it in main.scss. Part 2 of this series will delve into this, specifically, we’ll setup users so that index, edit, show and new all function and leverage Bulma for styles. If you run into any issues or have any questions, leave a comment and we’ll try and help out!