Bulma: Free, open source, and modern CSS framework based on Flexbox

7 min read Original article ↗

Learn CSS with 🎓 online interactive courses,📺 educational videos, and 🧑🏻‍💻project-building tutorials.

The most beautifully written framework I've ever had the pleasure of working with.

Bulma CSS by @jgthms is just perfect.

After 5 minutes I have #bulmaio working. It's a miracle!!!! @jgthms

Bulma, I think I'm in love.

We're very happy that @jgthms created the Bulma CSS framework.

With Bulma, I was able to make each one of my pages on my website’s templates in one single day with no prior knowledge on how to use it.

Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

No CSS knowledge required!

CSS Variables

Dart Sass

Flexbox

Modular

Open Source

Responsive

Smart Grid

Okay so with @jgthms’s Bulma, I was able to make each one of my pages on my website’s templates in one single day with no prior knowledge on how to use it, the docs are super easy to understand and it’s a great library. #css

5:30 AM - 18 Jun 2019

Dark Mode

Choose a dark theme automatically or by user preference

Bulma

Modern CSS framework based on Flexbox

Changes successfully saved 

<div data-theme="dark">
  <h1 class="title">Bulma</h1>

  <p class="subtitle">
    Modern CSS framework based on <a href="https://bulma.io">Flexbox</a>
  </p>

  <div class="message is-success">
    <div class="message-body">
      Changes successfully saved
    </div>
  </div>

  <div class="field">
    <input class="input" type="text" placeholder="Your Name">
  </div>

  <div class="field">
    <div class="select">
      <select><option>Select dropdown</option></select>
    </div>
  </div>

  <div class="buttons">
    <a class="button is-link is-soft">Save Changes</a>
    <a class="button is-danger is-soft">Cancel</a>
  </div>
</div>

The simplest grid system

Just add columns, they will resize themselves

While it's possible to add as many columns as you want, it is recommended to stick with 12 columns.
If you want smaller divisions, you can always nest columns.

So easy to learn

Get a design started within minutes

button is-primary is-large

Button

button is-primary is-large is-loading

Button

So quick to customize

Simply set your own Sass variables before importing Bulma 

@use "sass:color";

// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Path to Bulma's sass folder
@use "path/to/bulma/sass" with (
  $family-primary: '"Nunito", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px,
  $input-h: color.hue($beige-lighter),
  $input-s: color.saturation($beige-lighter),
  $input-background-l: color.lightness($beige-lighter),
  $input-border-l: color.lightness($beige-lighter),
  $input-shadow: none
);

// Import the Google Font
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");

Before

Bulma

Modern CSS framework based on Flexbox

After

Bulma

Modern CSS framework based on Flexbox

No JavaScript required

CSS only, so it integrates in any JS environment

Beautified by everyone

See what Bulma developers are building

Loved by the community

See what Bulma fans are tweeting

How to support Bulma