Intro to Bulma

#css #bulma

I recently starting using a CSS framework called Bulma for a small react app I am making, which improves upon CSS significantly. It is open-source, standardizes criteria and concepts, and deals with quite a few issues in front-end development as a whole. It is based on Flexbox and reduces the amount of CSS code needed for customizing layouts.

It is quite easy to learn and there are many templates on the official site for starting out. Bulma is also modular, allowing users to use parts of it like button styles or columns by importing .sass files. It also contains a large of components for anything one might need for a frontend layout and it also is compatible with most web browsers.

Installation

npm install bulma

You also need to make your webpage responsive for Bulma to work correctly either by using the HTML5 doctype:

<!DOCTYPE html>

Or add the responsive viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Quick Guide

An HTML starter template from the official site:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

Bulma modifier classes allow you to set alternative styles to almost all of the Bulma elements. Starting with is- or has-, you add after - a style of your choice. Example with buttons:

<button class="button">
   Button
</button>

<button class="button is-primary">
   Primary button
</button>

There are many more components like colors, cards, containers, dropdowns etc. that you can see in the documentation on the official site. Also Bulma libraries exist for React and Vue and other frameworks.

References