DEV Community

Cover image for Bulma - The Most Underrated Framework of the CSS Framework Era
Aashir Khan
Aashir Khan

Posted on • Edited on • Originally published at justaashir.com

Bulma vs Bootstrap Bulma - The Most Underrated Framework of the CSS Framework Era

Everyone was using a CSS Framework to simplify their work and save their time, Bootstrap was and is King Right Now of the Frameworks Market. Every Institute, Almost Every Tutorial on YouTube was using Bootstrap, Developers were not learning Fundamentals of CSS and using Bootstrap. I was also a beginner at that time, I learned HTML and CSS from W3schools and Lynda. Then I used a lot of floats to make web pages, and kinda like the way.


Responsive Design was my next goal, so CSS Framework was the Easiest way for Responsiveness, I tried to read docs and watched Bootstrap Videos but Bootstrap terrified me with lots of classes and inconvenient naming, and I didn't like to use bootstrap cause I think every website using Bootstrap looks quite similar it also applies styles on element as defaults, I tried two or more times but didn't get Bootstrap in my mind, so I found some alternatives like Foundation and Material, but they were just like Bootstrap. I just wanted to make my site Responsive, and then I found the video of Brad Traversy Skeleton CSS


I loved Skeleton CSS but now their devs are not updating it, its not based on CSS grid or Flexbox. There were some confusions in it, and then I found Bulma , I was just using YouTube as usual and then I came to Bulma.css Tutorial Video tagged “The Easiest Framework You can learn in 20 minutes”, Hmm I watched it and it really changed my life, It was really the easiest framework, even you don't have to remember the classes and there are some of the advantages :

  • No default Styling
  • Powerful Flexbox Grid
  • Small Size in Kbs
  • Reusable and You can modify Sass
  • No Javascript only CSS
  • Reusable Components

I am Kinda Obsessed with Bulma(I think) But You can give it a try.
This is my First Post BTW, You can Follow me on Twitter 😉 https://www.twitter.com/justaashir

Oldest comments (55)

Collapse
 
justaashir profile image
Aashir Khan

Of course 😊 TailwindCSS is too good to not to ignore

Collapse
 
momin profile image
Md Abdul Momin

Bootstrap 4+ is unbeatable for the last 4 years!

Collapse
 
justaashir profile image
Aashir Khan

I really agree with you! But if a person only want grid system and not the other things? as defaults??

Collapse
 
momin profile image
Md Abdul Momin

Yes! If I want to choose only grid, I can pull only grid from bootstrap!

Thread Thread
 
justaashir profile image
Aashir Khan

Then It will be really great 😊 , I have some bad experience with Bootstrap though. As So I wrote this post

Thread Thread
 
ptejada profile image
Pablo Tejada

With sass you can only pull the components that you need. Also the global style reset is great, it does wonders for cross browser comparability.

Collapse
 
joluga profile image
joluga

If you only want grid, just use CSS Grid. No javascript or any framework needed nor required.

Collapse
 
sm0ke profile image
Sm0ke • Edited

Hello @amir ,
Good article, thank you!
Bulma has the potential to grow, IMO. Also, Tailwind looks promising.

CSS Framework 2019 Survey Results -  Published on WpTavern.com

2019 Survey Results - Published on WpTavern

For new projects, I'm using Bulma (Sorry Bootstrap), and prototype pages using two resources:

A real problem is to find some nice templates to start fast a new project, only a few available on ThemeForest & related markets.

Happy (CSS) Styling & Coding!

Collapse
 
justaashir profile image
Aashir Khan

It's Awesome

Collapse
 
zolodeveloper profile image
JULIUS SOLOMON

Use bulkit cssninja UI kit

Collapse
 
vikdiesel profile image
Viktor Kuzhelny

Here are couple of free Bulma Admin Dashboard templates built with Vue.js & Buefy

github.com/vikdiesel/admin-one-vue...

Vue Bulma Admin Dashboard

github.com/vikdiesel/admin-two-vue...

Vue Bulma Admin Dashboard

Collapse
 
_juliettech profile image
juliette_chevalier

Do you happen to have a source for this graph/survey? Very interesting intel 🔥

Collapse
 
sm0ke profile image
Sm0ke • Edited

Hello Juliette,
The survey was published here - Full credit to WpTavern

Collapse
 
sairamnagothu profile image
SairamNagothu

I tried Bulma CSS once.. and it's really impressive and it has good potential also..

Collapse
 
justsharkie profile image
/*Sharkie*/

Bulma has always been at the edge of my mind, but I've never fully dug into it like I meant to!

Maybe one of these days. 😂

Collapse
 
jvarness profile image
Jake Varness

Can confirm Bulma is lit.

Collapse
 
tomearly profile image
Tom Early

I use Buefy which is Bulma based for Vue. It is great :-)

Collapse
 
justaashir profile image
Aashir Khan

Keep Using What you like , not what others are using

Collapse
 
devnamednick profile image
Nick Kaufmann

I agree that Bulma is worth a try. While Bootstrap is the most "pushed" framework, I think the "kitchen-sink" concept should not be relied upon heavily for times when you only need a faucet. I like that you point out how the work flow for new developers is "backwards" in learning core CSS values after taking on a framework like Bootstrap. In my opinion, communities can be too quick to offer frameworks as a solution before individuals even understand why these frameworks were created in the first place. Nice article.

Collapse
 
justaashir profile image
Aashir Khan • Edited

This guy just summarized my entire article.

Collapse
 
peterdkc profile image
Peter DeMarco

My go tos are Bulma for company internal sites that need a lot of boilerplate form and table CRUD stuff; Tailwind for anything public facing that needs a unique design or just needs to look interesting. Both are significantly faster and easier to use than Bootstrap.

Collapse
 
justaashir profile image
Aashir Khan

That's my point.

Collapse
 
spascareli profile image
Sergio Pascareli

How does Bulma compare to Bootstrap in terms of features?
My use would be for internal company sites as well, where "no js" or "smaller size" doesn't make too much difference, but developer speed does.

Collapse
 
peterdkc profile image
Peter DeMarco

I mean probably a lot smaller feature set but the point on those kinds of sites is that you can make do with very little compared to public sites. I'd give the docs a read and see if you think it has what you need. Definitely much faster to use, less markup, less futzing. Just drop in the example code and roll.

Collapse
 
perigk profile image
Periklis Gkolias

As a backend focused engineer I find Bulma very relieving (if I need to touch css for any reason)

Collapse
 
justaashir profile image
Aashir Khan

It's really easy to implement Bulma without breaking the workflow.