BulmaCSS: a Bootstrap alternative
Tags: css, design, webdev
Published: 2019-09-23 14:54:50


<h3>Content</h3>
⒈ <a href="#introduction">Introduction</a>
⒉ <a href="#2">A Bootstrap alternative?</a>
⒊ <a href="#3">Key features</a>
⒋ <a href="#4">What about Javascript</a>
⒌ <a href="#5">Real Bulma use case in a company</a>
⒍ <a href="#6">What about vanilla CSS</a>
⒎ <a href="#7">Key points of the document</a>

<h4 id="introduction">Hello there, users!</h4>

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

Bulma CSS was created with <b>SASS</b> and <b>Flexbox</b>. It’s lightweight, modular, easy to use, fast to learn and shines because of its <b>high readability </b>(<i>even to backenders/coders not related to CSS nor design, I’ve tested that myself, hurra!</i>). 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 <b>magic</b>.

<h1 id="2">You said Bootstrap alternative?</h1>

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

I was a convinced fighter for vanilla CSS and its power. However, <b>the more I went into the industry the more I had to start getting comfortable with CSS preprocessors and frameworks</b>, 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 <b>35min approx.</b> to build it in <b>less than 10 minutes</b> 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 <b>plenty of awesome templates built in Bulma CSS</b> really customizable and well-looking, that you will be able to check at the end of this document.

<h2 id="3">Now, what makes Bulma CSS so special?</h2>

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

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

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 <i>“not for them”</i>. Everything changed when they allowed me to <b>bring Bulma to our product</b>.

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: <b>you can change everything</b> 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, <u>nothing is easy</u>, but indeed easier than going deep into Bootstrap’s code.

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

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.

<h2 id="4">But Bootstrap has JavaScript</h2>

Well, *so* does Bulma!

You can add to your Bulma CSS its brother <b>BulmaJs</b>, 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!

<h2 id="5">You integrated Bulma in a big company project?</h2>

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 <i>Github</i>.


<h2 id="6">I still prefer vanilla CSS</h2>

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 <b>create a big thing or build a prototype in no time</b>… Bulma is always there for me 💛.

<h2 id="7">Your last words?</h2>

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

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

Of your interest:
➣ <a href="https://bulma.io/documentation/">Bulma documentation</a>
➣ <a href="https://vizuaalog.github.io/BulmaJS/">BulmaJS documentation</a>
➣ <a href="https://bulmathemes.com/">Free and customizable Bulma templates and themes</a>