Bulma SASS - Helpers

   
   
 bulma  sass  
 frontend  
Article Series

Bulma

Bulma Material Design

Animation Observer

Supplementary Article for Sass.

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Getting tools not available in Bulma.

Unlike Bootstrap, Bulma does not come with complete utilities. This can be an issue while migrating from, any theme with a lot of padding and margin classes.

1: Using Bulma Helpers

Why Another Repository?

Compared with Bootstrap CSS framework, Bulma developer does not want the framework to be bloated. Both approach has pros and cons.

One of my favorites bootstrap utility is padding and margin. This can be done in Bulma by altering each SASS of elements or components. I can undertand that rookie developer need a quick fix, by designing in HTML document just like what we have in bootstrap.

So here it is, I represent you the Bulma Helpers.

The Issue

Bulma Helpers is a big toolkit. You will end up with CSS, even bigger than Bulma itself. Luckily Bulma Helper is modular, so we can have only what we need.

The power of SASS

Prepare

Assume that what you need is only padding class and margin class. Consider put, the cloned bulma-helpers in to vendors directory.

Bulma SASS: Tree Vendors

And change the bulma-helpers.sass from:

@charset "utf-8"

@import "bulma-helpers/mixins/_all"
@import "bulma-helpers/helpers/_all"

To this one:

@charset "utf-8"

@import "bulma-helpers/variables/_all"
@import "bulma-helpers/mixins/_all"
@import "bulma-helpers/helpers/spacing/_all"

Where to Put the Stylesheet?

You can either make a different css such as bulma-helpers.css.

@import "vendors/bulma-helpers"

Or packed in bulma.css.

@import "initial-variables"
@import "vendors/bulma"
@import "vendors/bulma-helpers"
@import "derived-variables"

It is all up to you, actually. Not mine to decide.

The Documents: Example Code

As usual, use the class in the document, and see if this works.

    <main role="main" 
          class="column is-full blog-column
                 box-deco has-background-white has-text-centered">
      <article class="blog-post">
        <h2 class="title is-5">Welcome to My Bulma Portfolio</h2>

        <br/>

        <p>
          <a class="button is-dark has-margin-bottom-5"
             href="#">Articles Sorted by Month</a>
          <a class="button is-primary has-margin-bottom-5"
             href="#">Articles Sorted by Tag</a>
        </p>

        <br/>

        <p>There are so many things to say
          to Bulma, Chici, and that Android 18.
          I don't want to live in regrets.
          So I wrote this for my love.</p>
      </article>
    </main>

The Preview

Now there is space between buttons.

Bulma SASS: Helpers

Problem solved.

2: Tailor Made Helpers

Alternatively, you can generate your own custom spacing classes. I have a long article, with thorough example, a step by step guidance, to make margin and padding classes, utilizing sass loop.

Official Spacing Helpers

Update

This article was made in March 2019 with Bulma 0.7.

In June 2020, Bulma 0.9 comes out. And Bulma 0.9 is equipped with spacing helpers.

Conclusion

Thank you for reading.

We are finished yet with this Bulma article series. Consider continue to [ Bulma MD - Overview ].