While Bootstrap has always been a great framework and in many ways led the way for CSS frameworks to blossom, it's good to switch it up a bit. While waiting on Bootstrap v4 to come out of beta, I went looking for other frameworks, especially flexbox based ones. Bulma to the rescue!
The modern design and layout features Bulma offers were the main reasons we chose to use it for Scotch.
Table of Contents
Bulma provides many great features like:
- Flexbox based: Makes creating grid items and vertically aligned things really easy.
- Responsive: Mobile first framework similar to Bootstrap
- Well documented: This sounds like a boring reason but is so very important
- Solid looking foundation: All the typography, buttons, tables, forms, and basic CSS goodies you'd expect
- Tons of components: Comes with layouts, a vertical alignment level, and media objects
- Modular: Built with Sass. Only import the features that you'll use for your project
I've found that building out sites/apps with Bulma (including Scotch.io!), there is less CSS that I have to write since there are so many features built in. We make heavy use of the layout features like hero sections and cards.
Here's a quick look at the
Why Have a CSS Framework
Having a solid CSS framework as part for your project is an important foundational addition. While it's fun to roll your own CSS foundation/framework, it is also a good option having a third-party framework like Bootstrap or Bulma. A third-party CSS framework allows for:
- Uniformity across teams of developers
- Documented features
- New features are added by the package owner or community
- A set of classes and components
The Bulma syntax uses the
is- keyword to identify modifiers on the base class. For buttons,
button is the base class and there are modifiers like
is-small, and more.
Here's a comparison of the Bootstrap vs Bulma classes. Pretty similar overall and Bulma uses the
is- keyword that is pretty readable. We have a
is-inverted. There's even classes for
<!-- bootstrap button --> <a class="btn btn-danger btn-large">Bootstrap Button</a> <!-- bulma button --> <a class="button is-danger is-large is-inverted">Bootstrap Button</a>
Here's some examples from the docs:
Bulma Docs and Favorite Features
Bulma's main features are separated into a few main sections. We'll look at some highlights of the Bulma framework. These are the features that convinced me to use Bulma when building Scotch.
The main place to get an overview of how Bulma works and what it offers. This is mostly talking on installation and how to use Bulma if you were to import the Sass variables/files/functions.
If you wanted to bring in the entire Bulma CSS file, you can use it with:
You can also install using npm:
npm install bulma
Shows off the main modifiers like responsive helpers to hide and show elements based on viewport size. There are also typography helpers to size, color, and align text.
<!-- sizing --> <p class="is-size-1">3rem</p> <p class="is-size-7">0.75rem</p> <!-- responsive sizing based on viewport --> <p class="is-size-1-mobile">large sizing < 768px</p> <!-- change text color --> <p class="has-text-white">White!</p> <p class="has-text-black">Black!</p> <p class="has-text-info">Blue!</p> <p class="has-text-danger">Red!</p> <!-- alignment --> <p class="has-text-centered">In the middle!</p> <p class="has-text-right">To the right!</p>
The grid system in Bulma is easy to use and customizable. We have the ability to control the sizes, grid layout based on viewport, nesting, and even sizing the gap.
Since the grid is flexbox based, we don't have to set the sizing. The columns will just fill the space evenly.
You can also set sizes using the
<!-- numbered sizing --> is-1 is-6 <!-- readable sizing --> is-one-third is-one-quarter is-half <!-- responsive --> is-one-third-desktop is-one-half-tablet
This is my favorite section of Bulma. While other frameworks will give you a lot of the basics like styling, forms, and buttons, Bulma sets itself apart by providing layout components.
Section and Container
This is a generic section class to provide a quick divider for your site. The
container class will set the correct widths for your content based on viewport sizing.
<section class="section"> <div class="container"> <h1 class="title">My New Section!</h1> </div> </section>
This is my favorite feature of Bulma. Browse around Scotch and you'll see it's heavily used. The
hero class is all over the Scotch home page, at the top of article pages, and pretty much on every page! We added the icon background to our heroes and voila, you have quickly made a site topper.
<section class="hero is-info"> <div class="hero-body"> <div class="container"> <h1 class="title">My New Hero!</h1> </div> </div> </section>
The hero layout allows us to do the following modifier classes:
We can even add a navbar or tabs to the inside of the hero layout.
The level is a feature that allows us to vertically center elements in a row. This is made easy thanks to flexbox.
<nav class="level"> <div class="level-item has-text-centered"> <div> <p class="heading">Tweets</p> <p class="title">3,456</p> </div> </div> <div class="level-item has-text-centered"> <div> <p class="heading">Following</p> <p class="title">123</p> </div> </div> <div class="level-item has-text-centered"> <div> <p class="heading">Followers</p> <p class="title">456K</p> </div> </div> <div class="level-item has-text-centered"> <div> <p class="heading">Likes</p> <p class="title">789</p> </div> </div> </nav>
Bulma comes with many important components that will be used in most sites:
Cards: Versatile card that we use for our articles
Modals: Well designed modals. You'll need to write your own JS
All of these put together help you focus on what makes your site unique and not on writing CSS to create these often-used components.
Form and Elements
The form and elements sections aren't as glamorous as the features mentioned above. Definitely look through them to see how the base classes of Bulma look. Here's a few highlights out of the elements section of the docs.
On top of all the built in features of Bulma, there is an Extensions section of the docs for side projects meant to enhance Bulma's features. These include some really useful components. Here are some highlights:
Overall, Bulma is a great flexbox based CSS framework that has proven itself with the constant updates and new features being added at lightning pace. The modifier
is- keyword is simple to use and also very readable. The use of flexbox and easy vertical centering is a solid feature.
On top of all these great features, the layout classes that come with Bulma allow us to make sites/apps quickly. Give Bulma a try and definitely read through the docs to see all the offerings.