Bulma - Minimal

   
   
 bulma  css  
 frontend  
Article Series

Bulma

Bulma Material Design

Animation Observer

Supplementary Article for Sass.

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Using Bulma for the first time

1: Layout

No. We do not use Bulma yet. We need to talk about something more fundamental.

The Document: HTML Skeleton

This tutorial use header, main, and footer. There is html5 semantic tag for this. But this could be as simple as html element below.

<html>

<head>
  <title>Letters to my Bulma</title>
</head>

<body>

  <!-- header -->
  <p><i>My one, and only dream,</i></p>
  <br/>

  <!-- main -->
  <div id="content">
    <p>There are so many things to say
    to Bulma, Chici, and that Android 18.
    I don't want to live in regrets.
    So I wrote this for my love.</p>
  </div>

  <!-- footer -->
  <br/>
  <p><i>Wishful thinking.</i></p>

</body>
</html>

Open this html artefact in any browser, using your favorite file manager. And have a look at the result.

html: layout

2: Loading CSS

There are some alternative to load CSS.

For this tutorial. I suggest to use local CSS. Because we are going to make a custom Bulma CSS

Using CDN Bulma CSS

It is as simple as

    <link rel="stylesheet" 
          href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">

Directory Preparation

Now consider create directory for respective assets:

  • css

Bulma: Directory Preparation

We only need css directory for the rest of this chapter. But later we need other directory as well such as images, js, and sass.

Using Local Bulma CSS

You need to download bulma.css first from the official site. And put the artefact to css directory.

    <link rel="stylesheet" type="text/css" href="css/bulma.css">

And the bulma.css is here:

Adding Meta

As the official guidance said. We have to add a few tag on the head.

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Letters to my Bulma</title>

Bulma Example Class

We need to see if Bulma class work correctly. Consider add this container and box class.

  <!-- main -->
  <main role="main" class="container">
    <div class="box">
      <p>There are so many things to say
      to Bulma, Chici, and that Android 18.
      I don't want to live in regrets.
      So I wrote this for my love.</p>
    </div>
  </main>

The Preview

And have a look at the result by opening the file in Browser.

css: bulma

We should have white background by now, and also a box inside it.

3: Bulma: Example Class

Now consider having fun for while. And give more example class, and see what happened.

As Header

What lies on header part is up to you.

  <!-- header -->
  <header>
    <div class="hero is-info">
      <div class="hero-body">
        <article class="container">

               <p><i>My one, and only dream,</i></p>

        </article>
      </div>
    </div>
  </header>
  <br/>

What lies on footer part is also up to you.

  <!-- footer -->
  <br/>
  <footer class="footer">
    <div class="content has-text-centered">
      <p><i>Wishful thinking.</i></p>
    </div>
  </footer>

Screenshot

And have fun with the result. Consider open the file in Browser form file manager.

css: hero

4: Bulma: Navbar Class

For the rest of this show case, I’m using navbar for both header and footer.

As Header

Navbar lies on header part.

  <!-- header -->
  <nav class="navbar is-fixed-top is-dark">
    <div class="navbar-brand">
      <a class="navbar-item">
        Home
      </a>
    </div>
  </nav>

Navbar also lies on footer part.

  <!-- footer -->
  <footer class="navbar is-fixed-bottom 
        is-dark has-text-centered is-vcentered">
    <div class="column">
      &copy; 2019.
    </div>
  </footer>

Additional CSS

To have proper layout, this navbar require additional CSS.

.layout-base {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

You should define styles on <head> element.

    <link rel="stylesheet" type="text/css" href="css/bulma.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">

Screenshot

And have fun with the result. Consider open the file in Browser form file manager.

css: navbar

Fix Navbar

Notice that Bulma has these navbar class to handle padding

  • has-navbar-fixed-top or,

  • has-navbar-fixed-bottom

We can choose to use those navbar class above, or simply ignore it for more flexibility while using custom CSS.

5: Summary

As a summary from this chapter, all the html element is as shown below.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Letters to my Bulma</title>

    <link rel="stylesheet" type="text/css" href="css/bulma.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

  <!-- header -->
  <nav class="navbar is-fixed-top is-dark">
    <div class="navbar-brand">
      <a class="navbar-item">
        Home
      </a>
    </div>
  </nav>

  <!-- main -->
  <div class="layout-base">
    <main role="main" class="container">
      <div class="box">
        <p>There are so many things to say
        to Bulma, Chici, and that Android 18.
        I don't want to live in regrets.
        So I wrote this for my love.</p>
      </div>
    </main>
  </div>

  <!-- footer -->
  <footer class="navbar is-fixed-bottom 
        is-dark has-text-centered is-vcentered">
    <div class="column">
      &copy; 2019.
    </div>
  </footer>

</body>
</html>

What is Next ?

There are, some interesting topic about Navigation Bar in Bulma. Consider continue reading [ Bulma - Navigation Bar ].

Thank you for reading.