DEV Community

Cover image for BulmaCSS: a Bootstrap alternative
Desiré 👩‍🎓👩‍🏫
Desiré 👩‍🎓👩‍🏫

Posted on • Updated on

BulmaCSS: a Bootstrap alternative

Content

Introduction
A Bootstrap alternative?
Key features
What about Javascript
Real Bulma use case in a company
What about vanilla CSS
Key points of the document

Hello there, users!

In this document I’d like to talk about a CSS framework called Bulma CSS, which won a lot of recognition and adepts lately, and why it is a really good alternative for Bootstrap.

Bulma CSS was created with SASS and Flexbox. It’s lightweight, modular, easy to use, fast to learn and shines because of its high readability (even to backenders/coders not related to CSS nor design, I’ve tested that myself, hurra!). You can take what you want, that’s the philosophy. Use its columns system, its components or just its color palette… Or use everything!

Now, let me show you how Bulma does its magic.

You said Bootstrap alternative?

I see you've read this document title, indeed.

I was a convinced fighter for vanilla CSS and its power. However, the more I went into the industry the more I had to start getting comfortable with CSS preprocessors and frameworks, especially Bootstrap and SASS.

I had my first contact with Bootstrap 2 years ago. I was really comfortable with my CSS skills and had coded a lot of designs but I found it so hard to learn. Even after 3 months of usage I still had to go check my notes to get clear into something. It was a bit frustrating even to use it for little and simple project that I started searching for a better option… And then I found Bulma CSS.

I went from building a complex structure in 35min approx. to build it in less than 10 minutes without even noticing I was coding it without checking any notes. I thought it was incredible and I also included Bulma in my freelancing projects, side-projects and everything. Clients were happy that I increased quality and decreased my working time, and so was I.

Also, there are plenty of awesome templates built in Bulma CSS really customizable and well-looking, that you will be able to check at the end of this document.

Now, what makes Bulma CSS so special?

It may sound weird to you and obvious, but: everyone can learn and understand it easily.

Dear backenders and other people who aren’t comfortable with their design skills: you will now rest well at night.

I’ve been in many teams were I was the one creating layouts and doing web design/development. Everyone else was scared because it was “not for them”. Everything changed when they allowed me to bring Bulma to our product.

I did a few presentations and testing of what Bulma was and how it worked, and a week later everyone was able to extend my code knowing what they were doing or creating using bulma modifiers. I wasn’t needed anymore to delete a column or revise a component. They still didn’t liked design or web layouts, but they were able to modify or add it without any hard time.

Second of all: you can change everything if you know how to. Yes, I know this may sound quite obvious too.

Bulma is built in SASS, and this SASS files are available for you to play around. Don’t expect this to be easy, nothing is easy, but indeed easier than going deep into Bootstrap’s code.

Third, last but not less important, and this is personal: I think it’s the best option for both a web developer freelancer without design skills or a fullstack web freelancer who needs to build projects quickly and easy.

This one is made up in my experience. I started with Bulma because I was building products and webs easier, but I end up getting a like on it because it was easy to learn and it had a modern look and feel, away from the corporate style I was escaping from.

But Bootstrap has JavaScript

Well, so does Bulma!

You can add to your Bulma CSS its brother BulmaJs, also opensource. How does that sound to you? Lightweight, easy to understand and to use it in your code… Same concept, same family, same advantages!

You integrated Bulma in a big company project?

I did, yes!

I’m currently working in Smart City development and we build every prototype we need in Bulma. Upon this prototype we develop the look and feel with our own SASS. We use Bulma CSS with Vuejs without any problem, I have an example of this integration in my own Github.

I still prefer vanilla CSS

And that’s not a problem, buddy!

I keep using my own CSS resources built with SASS to get my job done quicker and easier, using my own styles, mediaqueries and etc., but if I must create a big thing or build a prototype in no time… Bulma is always there for me 💛.

Your last words?

Now, to sum up the key points in this document…
📌 Bulma is based in SASS and Flexbox, which makes it so customizable, flexible and mobile-first.
📌 Bulma’s modular nature will allow you to use just what you need: nothing more, nothing less.
📌 Bulma CSS is so easy to learn, memorize and use it even if you’re not familiar with web layouts or css frameworks.
📌 Bulma CSS suits big and hard company projects too. It is so flexible and customizable that you can develop your product upon it.
📌 It has lots of components and even a JavaScript complementary plugin so the components that need JavaScript can work properly.
📌 You have plenty of customizable themes to start your project with, without the Wordpress or Bootstrap difficulties.
📌 The perfect option (in my opinion) for freelancer web developers without design skills or fullstacks freelancers who need to build quality projects/prototypes in no time.

I hope now you give it a try and share your feedback with all of us!

Of your interest:
Bulma documentation
BulmaJS documentation
Free and customizable Bulma templates and themes

Oldest comments (4)

Collapse
 
justaashir profile image
Aashir Khan

Awesome!

Collapse
 
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

Thank you, I hope you find it helpful!

Collapse
 
atrandafir profile image
Alexandru Trandafir

Well, gotta try it out cause I haven't yet!

I'm fan of plain CSS too, but indeed been using a lot of Bootstrap lately.

Collapse
 
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫 • Edited

Whenever you try it I'd be glad to get your feedback and opinion!