Bulma – A Flexbox Framework



Mobile first is a mindset, you start to build your design from the smallest screen to the largest, this way you will ensure that quality and responsiveness will be delivered first for those who have the least screen real estate. Design in a small space is harder, the information should be accessible. Progressively you will rearrange the information as your available space increases and you can accommodate more elements.

Modern web design gave us the flexbox, we already covered this in a past post. But what is next? If we are serious about mobile first we need to organize our code in such way that will deliver it, and this is how Bulma comes into play.

Bulma

Made with Bulma

Bulma is a Flexbox framework, very similar to the all-time famous Bootstrap. It is Open Source and it’s fully responsive mobile first framework. Bulma is the work of Jeremy Thomas, a CSS Guru. Bulma is open source and it is just a CSS framework written in SASS, the main difference from Bootstrap, among others.

In this article, we are going to cover some of the best features of the framework.

Modularity

Bulma is modular, you don’t need to download the entire framework, you can use one of the 39 .sass modules Individually. For example, if you want to use just the grid module you can import it alone:

@import "bulma/sass/utilities/_all"
@import "bulma/sass/grid/columns"

Now you can use the Columns class for the container and the Column for the items


<div class="columns">
     <div class="column">1</div>
     <div class="column">2</div>
     <div class="column">3</div>
     <div class="column">4</div>
     <div class="column">5</div>
</div>

Grid

The flexbox makes Bulma a powerful framework, yet easy to implement, all columns have the same width no matter how many columns you have in a Columns container.

The grid comes with modifiers called sizes

See the Pen Bulma Experiments by allur.co (@allurco) on CodePen.0

Magic Tiles

With Bulma Tiles you can create 2d Grid like designs with nested elements. The flexibility is great and you can push your bounderies to the limit with it.

See the Pen Bulma Magic Title by allur.co (@allurco) on CodePen.0

To start creating you need at least 3 levels

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

The Code Pen layout about has the following Hierarchy;

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

What’s next?

Bulma is pretty complete, modern and lightweight. Besides the topics mentioned in this article, you have Components, Buttons, Form Elements, Elements of Design like Boxes, Icons, Tables and more.

For the layout, Bulma is packed with other features like the Hero component, Sections, and the Media Object.

You should head to the Bulma Documentation and Experiment right now.

Until the next time!

Posted on // |
 

Leave a Comment