Hugo - Bulma - CSS Introduction

   
   
 hugo  bulma  css  
 ssg  
Article Series

This article series contain few sections.

Related Article Series

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

This article is part one of Hugo Bulma CSS.

Goal: Explain How to Use Bulma Stylesheet in Hugo

Hugo meet Bulma

Hugo... This is Bulma.
Bulma... This is Hugo.
Don't be shy, both of you.

Source Code

You can download the source code of this article here.

Related Article

I wrote about Bulma Navigation Bar that used in this article. Step by step article, about building Navigation Bar. You can read here:

1: Preparation

Consider make an ecosystem for bulma first.

Create Theme

To avoid messed-up with previous tutorial, consider make a new theme.

$ hugo new theme tutor-02
Creating theme at /media/Works/sites/tutor-hugo-bulma/themes/tutor-02
$ cat config.toml
theme        = "tutor-02"
$ cd themes/tutor-02

Copy CSS and JS

Copy bulma.css to themes/tutor-02/static/css.

$ tree static/css
static/css
└── bulma.css

Copy Example Assets

Or even better, use our previous tutorial, And copy example assets to themes/tutor-02/static.

$ tree static
static
├── css
│   ├── bulma.css
│   ├── bulma.css.map
│   ├── bulma.min.css
│   └── main.css
├── images
│   └── logo-gear.png
└── js
    ├── bulma-burger-jquery.js
    ├── bulma-burger-vue.js
    ├── jquery-slim.min.js
    └── vue.min.js

Hugo Bulma: Tree

Note that, you might still need map files, while debugging using object inspector.

Source: gitlab.com/…/themes/tutor-02/static

2: Add Bulma

Adding bulma is straightforward. Just add the stylesheet to site/head.html.

However, there are these artefacts, to make sure, we have the same copy.

Partial: HTML Head

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>{{ .Page.Title | default .Site.Title }}</title>
  
    <link rel="stylesheet" type="text/css" href="{{ "css/bulma.css" | relURL }}">
</head>

Layout: Homepage

No change, very similar to previous tutorial. You can just copy from tutor-01 to tutor-02.

{{ define "main" }}
{{ .Content }}
{{ end }}

Default: Baseof Template

I’m trying to have this file, as simple as possible.

  • layouts/_default/baseof.html
<!DOCTYPE html>
<html lang="en">
{{ partial "site/head.html" . }}
<body>
  {{ .Content }}
</body>
</html>

Server Output: Browser: Landing Page

Open in your favorite browser. You should see, white background, by now.

Hugo Bulma: White Minimal

3: Simple Layout

I put colors so you can get the idea, about this responsive layout clearly. I also put grid, just as an example.

Consider refactor by layout

Default: Baseof Template

Consider using semantic HTML5 tag.

  • themes/tutor-02/layouts/_default/baseof.html
<!DOCTYPE html>
<html lang="en">
{{ partial "site/head.html" . }}
<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="columns layout-base">
    <main role="main" 
          class="column is-two-thirds has-background-primary">
      <article class="blog-post">
        <h4 class="title is-4">{{ .Title | default .Site.Title }}</h4>
        {{ .Content }}
      </article>
    </main>

    <aside class="column is-one-thirds has-background-info">
      <div class="blog-sidebar">
        Side menu
      </div>
    </aside>
  </div>

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

</body>
</html>

Partial: HTML Head

Add necessary stylesheet. the main.css right below bulma.css. You should find the stylesheet on repository.

<head>
    ...
  
    <link rel="stylesheet" type="text/css" href="{{ "css/bulma.css" | relURL }}">
    <link rel="stylesheet" type="text/css" href="{{ "css/main.css" | relURL }}">
</head>

Assets: Custom Stylesheet

This is additional custom decoration stylesheet that required. Something that does not covered with Bulma CSS Framework.

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

footer.site/footer {
  padding-top: 5rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

.blog-sidebar,
.blog-post {
  margin-left: 20px;
  margin-right: 20px;
}

.blog-post-meta {
  margin-bottom: 5px;
}

Server Output: Browser

Open in your favorite browser. You should see, layout in colour, by now.

Hugo Bulma: Coloured Layout

4: Simple Refactor

After minimalist bootstrap above, the next step is to create the layout. We are going to refactor

  • layouts/_default/baseof.html

Into:

  • layouts/_default/baseof.html

  • layouts/index.html

  • layouts/partials/site/header.html

  • layouts/partials/site/footer.html

Default: Baseof Template

<!DOCTYPE html>
<html lang="en">
{{ partial "site/head.html" . }}
<body>
{{ partial "site/header.html" . }}

  {{- block "general" . }}
    <div class="columns layout-base">
      {{- block "main" . }}
      {{ .Content }}
      {{- end }}

      {{- block "aside" . }}{{- end }}
    </div><!-- columns -->
  {{- end }}

{{ partial "site/footer.html" . }}
{{ partial "site/scripts.html" . }}
</body>
</html>

I put the header/footer, outside main block. So we do not need to repeatly writing header/footer in every main block.

Layout: Index

{{ define "main" }}
  <main role="main" 
        class="column is-full has-background-primary">
    <article class="blog-post">
      <h4 class="title is-4">{{ .Title | default .Site.Title }}</h4>
      {{ .Content }}
    </article>
  </main>
{{ end }}

Partial: Header

<nav class="navbar is-fixed-top is-dark">
  <div class="navbar-brand">
    <a class="navbar-item">
      Home
    </a>
  </div>
</nav>
<footer class="site-footer">
  <div class="navbar is-fixed-bottom
        is-white has-text-centered is-vcentered">
    <div class="column">
      &copy; {{ now.Year }}.
    </div>
  </div>
</footer>

Partial: Javascript

It is just an empty template.

    <!-- JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->

Server Output: Browser

Open in your favorite browser. You should see, non-colored homepage, by now.

Hugo Bulma: Layout Homepage

What is Next ?

Consider continue reading next part of this article in [ Hugo - Bulma - CSS Layout ].

Thank you for reading.