Quick Tip: How to Build a Blog Layout With Bulma

In this quick tip, we’re going to use Bulma, a popular Flexbox-based CSS framework by Jeremy Thomas, to build a responsive blog layout.

Quick Tip: How to Build a Blog Layout With Bulma

As usual, to get an initial idea of what we’ll be creating, take a look at the associated Codepen demo (check out the larger version for a better experience):

Getting Started With Bulma

Bulma requires just one single CSS file. You can grab a copy of this file by visiting its GitHub page, through a package manager (e.g. npm), or a CDN (e.g. cdnjs).

For this tutorial, we’ll choose the last option. So, we place a link to the required file within the <head> of our HTML document:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet">

Now, we’re ready to start building the blog layout!

Building the Layout

Our grid will have a maximum width and will be centered horizontally. To accomplish this, we use Bulma’s section and container helper classes:

<section class="section">
  <div class="container">
    <!-- grid here -->
  </div>
</section>

On small screens all articles should be stacked vertically, like this:

Quick Tip: How to Build a Blog Layout With Bulma

By default Bulma, which is designed mobile-first, places the articles on top of each other under viewport widths of 769px. All we have to do is to build the blog layout when the viewport exceeds 768px.

To do that, we need only one element: the tile. As you’ll see in a moment, the trick is to nest multiple tile elements.

With that in mind, let’s have a closer look at the desired desktop layout. As you can see from the following visualization, it comprises three rows:

Quick Tip: How to Build a Blog Layout With Bulma

For each row, Bulma expects at least the following nested hierarchy:

tile is-ancestor
|
└───tile is-parent
    |
    └───tile is-child

Let’s explain that:

  • We start with a top-level tile which contains all the other tiles.
  • Within it, we add tiles which are distributed on the horizontal axis. Plus, based on a twelve column grid, we can set a specific width for these elements. This is possible by using the is-* classes where * is a number between 1 and 12. For instance, a tile with the is-6 class will occupy 50% of the horizontal space.
  • To stack tiles vertically, we use the is-vertical class.
  • Once we want to add content to a tile, we assign the is-child class to it and the is-parent class to the parent tile.

At this point we’re ready to put this theory into practice.

Row #1

The first row contains three columns. The first and third columns occupy one-fourth of the row’s width, while the second takes up one half of the row’s width. In addition, the third column consists of two child columns.

Quick Tip: How to Build a Blog Layout With Bulma

Based on what we’ve discussed above, here’s the required markup:

<div class="tile is-ancestor">
  <div class="tile is-parent">
    <article class="tile is-child green post">
      <!-- content here -->
    </article>
  </div>

  <div class="tile is-6 is-parent">
    <article class="tile is-child pink post">
      <!-- content here -->
    </article>
  </div>

  <div class="tile is-vertical is-parent">
    <article class="tile is-child blue post">
      <!-- content here -->
    </article>
    <article class="tile is-child gold post">
      <!-- content here -->
    </article>
  </div>
</div>

Notice that we define a specific width only for the second column via the is-6 class. Of course, if we want, we can add the is-3 class to the first and third columns as well. But this isn’t needed because both columns grow (they have flex-grow: 1) to share the remaining horizontal space.

Moreover, just for styling, we assign a few custom classes to each article. And for simplicity, we omit the articles’ contents.

Row #2

Similar to the first row, the second row contains three columns. The first one occupies one half of the row’s width, while the second and third take up one quarter of the row’s width. Furthermore, the second column includes two child columns.

Quick Tip: How to Build a Blog Layout With Bulma

Here’s the related markup:

<div class="tile is-ancestor">
  <div class="tile is-6 is-parent">
    <article class="tile is-child gray post">
      <!-- content here -->
    </article>
  </div>

  <div class="tile is-vertical is-parent">
    <article class="tile is-child blue post">
      <!-- content here -->
    </article>
    <article class="tile is-child gold post">
      <!-- content here -->
    </article>
  </div>

  <div class="tile is-parent">
    <article class="tile is-child red post">
      <!-- content here -->
    </article>
  </div>
</div>

Row #3

The third row is a bit more complicated; here we have two columns. The first is twice as large, relative to the second. Within the first column, we have two sub-rows. The first sub-row contains three equal-sized columns, while the second sub-row includes two equal-sized columns.

Quick Tip: How to Build a Blog Layout With Bulma

The markup for this case is as follows:

<div class="tile is-ancestor">
  <div class="tile is-8 is-vertical">
  
    <div class="tile">
      <div class="tile is-parent">
        <article class="tile is-child blue post">
          <!-- content here -->      
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child gray post">
          <!-- content here -->      
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child red post">
          <!-- content here -->      
        </article>
      </div>
    </div>
    
    <div class="tile">
      <div class="tile is-parent">
        <article class="tile is-child pink post">
          <!-- content here -->      
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child gold post">
          <!-- content here -->      
        </article>
      </div>
    </div>
    
  </div><!-- /is-8 -->
  
  <div class="tile is-parent">
    <article class="tile is-child green post">
      <!-- content here -->
    </article>
  </div>
    
</div>

As you’ll see from the code above, the nested hierarchy looks like this:

tile is-ancestor
|
├───tile is-8 is-vertical
|   |
|   ├───tile /*Extra class for IE*/
|   |   |
|   |   ├───tile is-parent
|   |   |   └───tile is-child
|   |   |
|   |   ├───tile is-parent
|   |   |   └───tile is-child
|   |   |
|   |   └───tile is-parent
|   |       └───tile is-child
|   |
|   └───tile /*Extra class for IE*/
|       |
|       ├───tile is-parent
|       |   └───tile is-child
|       |
|       └───tile is-parent
|           └───tile is-child
|
└───tile is-parent
    └───tile is-child

If you want to get a better idea of how the tile element works, be sure to check out the documentation as well as use the developer tools of your favorite browser to inspect the associated classes.

Browser Support

Nowadays Flexbox has really great support, and our blog layout should therefore work in all modern browsers.

However, while I was testing the page in different browsers, I found that IE 11 didn’t produce the desired result. Here’s what I was seeing:

Quick Tip: How to Build a Blog Layout With Bulma

On the other hand, testing with Microsoft Edge I didn’t encounter these issues. Perhaps it’s some kind of bug with the latest versions of IE. Anyhow, I tried to see if there was any quick fix which would avoid these problems.

I solved it by adding flex-basis: auto to the articles and the top-level tiles of the is-vertical tile of the third row (see previous hierarchy).

Again, this is a quick solution that seems to work for this particular example. For your own implementations, you may have to make some other changes in your code.

Conclusion

In this quick tip, we learned how to build a responsive blog grid with Bulma, a framework built on top of Flexbox.

Have you ever tried Bulma in any of your projects? What do you think of it? Share your experiences in the comments below.