In this short article, I will present a few resources and basic information about Bulma CSS - the open source CSS framework based on Flexbox.
Bulma is a relatively new entrant to the battleground of CSS frameworks and has made a name for itself in a short time.
According to the CSS 2019 Survey Results published on WpTavern, Bulma CSS scores the 2nd position of the satisfaction scale, right after Tailwind.
Reading the official Bulma documentation might be a good starting point. Some great features provided by Bulma:
- Flexbox based: Makes creating grid items and vertically aligned things really easy
- Modular: Built with Sass. Only import the features that you'll use for your project. Bulma consists of 39 .sass files that you can import individually.
- Mobile first framework.
Coding a basic web page with Bulma it's quite easy. We need to include the CSS file, available on CDN:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello Bulma!</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css"> </head> <body> <section class="section"> <div class="container"> <h1 class="title"> <span style="color: blue">Hello</span> World </h1> <p class="subtitle" style="color: purple"> My first website with <strong>Bulma</strong>! </p> </div> </section> </body> </html>
After loading this file in the browser we should see:
- Modifiers: The first thing you should learn about Bulma is the modifier classes. These allow you to set alternative styles to almost all of the Bulma elements. They all start with is-* or has-*, and then you replace the * with the style you want. For instance, let's add a few styled buttons:
<!DOCTYPE html> <html> <head> <body> ... <p> <button class="button"> Button </button> <button class="button is-primary"> Primary button </button> <button class="button is-large is-warning"> Large button </button> </p> ... </body> </html>
And the result
Every element in Bulma is mobile-first and optimizes for vertical reading, so by default on mobile and uses 5 breakpoints: mobile (up to 768px), tablet (from 769px), desktop (from 1024px), widescreen: from 1216px
To set the color of an element, we need to use the is-* in front of the desired color:
Bulma for Vue: Buefy
In case you wonder, how to use Bulma CSS with Vue, Buefy library might be what you looking for. Personally, I didn't use this library in production, but after using it in a few starters, I can say it's pretty awesome. The library is actively supported by a growing community on Discord.
Bulma for React: Bloomer
To move from theory to practice, let's take an open-source stater built on top of Bulma CSS: BulmaPlay is a simple one-page website styled with Bulma.
How to build BulmaPlay
$ $ git clone https://github.com/app-generator/bulmaplay.git $ cd bulmaplay $ yarn $ yarn start $
If your environment is properly set up, BulmapLay should be accessible in your browser.
- Bulma.io - the official website
- Bulma Themes & Apps: BulmaStyle, Bulma Expo, CreativeBulma
- BulmaLanding - Made with Bulma CSS - open-source app
- Bulma CSS Apps - index provided by AppSeed