loading...
Cover image for Bulma CSS - Tutorial for beginners

Bulma CSS - Tutorial for beginners

sm0ke profile image Sm0ke Updated on ・4 min read

Hello Coder,

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.

CSS Framework 2019 Survey Results -  Published on WpTavern.com


Learn Bulma CSS

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.
  • Small footprint and no Javascript dependency. Bulma comes in a single compiled CSS usable via nom install, CDN or local usage.
  • Mobile first framework.

Getting started

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:

Bulma CSS - a minimum starter.

Bulma Syntax

  • 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

Bulma CSS - a minimum starter with buttons.

Bulma Responsiveness

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

Bulma CSS - Image with the Gid system.


Bulma Colors

To set the color of an element, we need to use the is-* in front of the desired color:

.is-danger
.is-warning

Bulma CSS - Framework Colors.


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.

Buefy - Bulma CSS components for Vue


Bulma for React: Bloomer

React developers might use Bloomer, a library that provides UI components, styled with Bulma. I never use it, but it's definitely on my list.

Bloomer - React components for Bulma


Bulma CSS Sample

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.

BulmaPlay - Open-Source app built with Bulma CSS.

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.

App Resources

Bulma Resources

Thank you!

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

pic
Editor guide
 

Bloomer project now still continue ?