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.
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
Assume that what you need is only padding class and margin class.
Consider put, the cloned
bulma-helpers in to
And change the
@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
Or packed in
@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>
Now there is space between buttons.
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
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.
Thank you for reading.
We are finished with this Bulma article series. Consider going back to [ Bulma - Overview ].
Farewell. We shall meet again.