Did you ever use Bulma as your CSS Framework?

I usually used bootstrap as for css layout, because this is easy to used and easy to make responsive layout to the website. Then I meet this Bulma and what I say this was more powerful and more flexible than bootstrap with regards layout, responsive, button action and etc as your CSS Framework.

What is Bulma?

Bulma is a free, open source CSS framework based on Flexbox and built with Sass. … that teaches you how to build a web interface from scratch using Bulma. And another word this is just like bootstrap if you are using a CSS Framework to build your own website from scratch. More info here.

How can I start using this?

This easy to implement if you are using NPM/node.js you can do this command.

npm install bulma

But if is not and you are building it from scratch HTML version you can call this to head section or after footer.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"> 
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

Code Requirement

Use the HTML5 doctype

<!DOCTYPE html>

Add the responsive viewport meta tag

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

Here an example of a starting template.

<!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/[email protected]/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </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>

Here you can start your tutorial here base on bulma documentation. This will guide, how you can use bulma in a proper layout of your website.