An Alternative to the Front-End Bootstrap Framework: Bulma

If you’ve done any front-end development, you’ve heard of Bootstrap, the 900-pound gorilla when it comes to CSS framework that has about 10x the usage and prestige (at least according to Github statistics and this comparison. And Bootstrap is awesome, especially the new Bootstrap 4 which on average reduces time to first byte by 25% in tests I’ve conducted.

But Bootstrap isn’t the only CSS framework out there and shouldn’t be the only framework you as a developer use. Different clients, startups, platforms, will want alternatives to Bootstrap. Maybe it’s time to get to know Bulma.

Bulma is a CSS-only framework ideal for mobile front-ends and other parts of the interwebs where file size and request load matters, such as Chrome extensions.

In Bulma, you’ll find all the usual UX suspects: responsive columns, appealing buttons, clean-looking cards, modals, navbars, panels, tabs, dropdowns and more. All of these components, along with some very nice special case components like pricing tables and mega menus. But unlike some frameworks each component in Bulma is defined in its own separate SASS module, making it easy to pick and choose which components you are actually using on a site and therefore want to compile into a css file.

Bulma’s naming convention makes it easy to pick up. Need an ‘<a>’ tag to be a button? Add the class name ‘button.’ Want that button to be large? Add the class ‘is-large.’ How about setting it to one of Bulma’s standard colors? Just add a class of ‘is-success’ to your button’s HTML.

Bulma is built on CSS Flexbox, a newish part of the CSS specification supported by all modern browsers. Being able to rely on functionality built into current CSS like flexbox definitely makes for faster rendering than older frameworks, or older versions of frameworks like Bootstrap 3. When browsers support new css functionality like Flexbox, sites which take advantage of that new functionality load faster, sometimes a lot faster.

In some ways, Bulma is ahead of Bootstrap 4. While both use Flexbox, Bootstrap has a fairly heavy burden of legacy coding conventions – some dating back to the first major release of the CSS framework. Those legacy artefacts have become part of how the “Bootstrap Way” of coding.

Compare:

<form>

<div class=”form-group”>

  <label for=”exampleInputEmail1″>Email address</label>

  <input type=”email” class=”form-control” id=”exampleInputEmail1″ aria-describedby=”emailHelp” placeholder=”Enter email”>

  <small id=”emailHelp” class=”form-text text-muted”>We’ll never share your email with anyone else.</small>

</div>

In Bootstrap 4 to Bulma’s

<div class=”field”>

<label class=”label”>Label</label>

<div class=”control”>

  <input class=”input” type=”text” placeholder=”Text input”>

</div>

<p class=”help”>This is a help text</p>

</div>

Bulma takes conventions over configuration several steps further: for images, it has predefined size and ratios s like ` is-4by3` available; for column widths `is-four-fifths`.

There are several Bulma extensions authored by Bulma’s creator, Jeremy Thomas, that solve common problems like a TagsInput, Calendar, and Steps that are easily compiled into a Bulma.css file. This modular approach to SASS means on one hand it’s easy to change variables in SASS for such things as colors and margins, but that code is smoothly compiled into actual CSS files sent to the browser. And, Thomas, a London-based designer, has from the start monetized Bulma through both online ads and big name sponsors like Microsoft to make it possible for him to make the huge time investment needed to help an open source project blossom. That time investment by Thomas is paying off: Bulma’s now has on GitHub about 22,000 stars.

While Bulma has its own palette, default font (‘system-ui’, built-into Chrome and Safari for zero latency), and aesthetics, you don’t have to be a Sass designer to get a different look. Just head over to Bulmaswatch (inspired by Bootswatch), pick a theme, and grab either a CDN reference or the actual files.

I recently used Bulma on a Chrome extension project that was part of a larger side project (DevCodeLearn) of mine. Weighing in at just 216 kb even including several Bulma special components, Bulma is perfect for the constrained size of chrome extension popup.html files.

You can install Bulma in your own project via npm or yarn, or just use a CDN version via `<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css” >`

Here’s my recommendations for learning this lightweight and highly useful framework:

• Why you should use Bulma, an under-three minute YouTube video, perfect for convincing your fellow team members to have a look at Bulma.
• Learn a CSS Framework in 6 Minutes with Bulma, By Gregg Pollack and Adam Jahr is a great short walkthrough over at Sitepoint, now featured on Bulma’s home page.
• The docs. Bulma’s documentation is excellent: everything you need to get up to speed without a bit of fluff.
• Ready to dig in? Bulma CSS Framework Crash Course is an hour well-spent, or you can follow along this tutorial: My Journey into the Bulma CSS Framework by Henrik Ståhl over on FreeCodeCamp.org.