Preface
This article is part two of Hugo Bulma CSS.
Goal: Explain How to Use Bulma Stylesheet in Hugo
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:
5: Modify Layout: Navigation Bar
How about Navigation Bar ? The next step after create is to enhance the already refactored layout. I’m going to use Vue version for use with burger button.
-
layouts/partials/site/header.html
-
layouts/partials/site/scripts.html
Partial: Javascript
It is just an empty template.
-
- themes/tutor-02/layouts/partials/site/scripts.html
- gitlab.com/…/layouts/partials/site/scripts.html
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{{ "js/vue.min.js" | relURL }}"></script>
<script src="{{ "js/bulma-burger-vue.js" | relURL }}"></script>
Partial: Header
This is a loong Header, with logo image.
-
- themes/tutor-02/layouts/partials/site/header.html
- gitlab.com/…/layouts/partials/site/header.html
<nav role="navigation" aria-label="main navigation"
class="navbar is-fixed-top is-dark"
id="navbar-vue-app">
<div class="navbar-brand">
<a class="navbar-item" href="{{ .Site.BaseURL }}">
<img src="{{ "images/logo-gear.png" | absURL }}"
alt="Home" />
</a>
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Blog
</a>
<a role="button" class="navbar-burger burger"
aria-label="menu" aria-expanded="false" data-target="navbarBulma"
@click="isOpen = !isOpen" v-bind:class="{'is-active': isOpen}">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBulma" class="navbar-menu"
v-bind:class="{'is-active': isOpen}">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Archives
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
By Tags
</a>
<a class="navbar-item">
By Category
</a>
<hr class="navbar-divider">
<a class="navbar-item">
By Date
</a>
</div>
</div>
<a class="navbar-item">
About
</a>
</div>
<div class="navbar-end">
<form class="is-marginless" action="/pages/search/" method="get">
<div class="navbar-item">
<input class="" type="text" name="q"
placeholder="Search..." aria-label="Search">
<button class="button is-light"
type="submit">Search</button>
</div>
</form>
</div>
</div>
</nav>
Server Output: Browser
Open in your favorite browser. You should see, non-colored homepage, by now.
6: Further Layout: Page and List.
After minimalist Bulma layout above, the next step is to create the layout. We are going to enhance our layout for
-
layouts/_default/single.html
-
layouts/_default/list.html
Default: List
We should also change the list
-
- themes/tutor-02/layouts/_default/list.html
- gitlab.com/…/layouts/_default/list.html
{{ define "main" }}
<main role="main"
class="column is-full has-background-light">
<section class="section">
<h4 class="title is-4">{{ .Section }}</h4>
{{ .Content }}
<ul>
{{ range .Data.Pages }}
<li>
<a href="{{ .URL }}">{{ .Title }}</a>
</li>
{{ end }}
</ul>
</section>
</main>
{{ end }}
Server Output: Browser: List
Open in your favorite browser. You should see, simple index with article list, by now.
Default: Single, as I am
This one artefact, for content page, or post page.
-
- themes/tutor-02/layouts/_default/single.html
- gitlab.com/…/layouts/_default/single.html
{{ define "main" }}
<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>
{{ end }}
{{ define "aside" }}
<aside class="column is-one-thirds has-background-info">
<div class="blog-sidebar">
Side menu
</div>
</aside>
{{ end }}
Server Output: Browser: Page
Open in your favorite browser. You should see, simple page content, by now.
7: Custom Page Posts
Custom Page is a must have SSG Concept
Consider remake our simple single.html, adding a more useful information, semantic, and bootstrap’s classes.
Post: Single
This is very similar with _default
.
The point is you can customize as creative as you want.
-
- themes/tutor-02/layouts/post/single.html
- gitlab.com/…/layouts/post/single.html
{{ define "main" }}
<main role="main"
class="column is-two-thirds">
<div class="blog-post">
<section>
<h4 class="title is-4">{{ .Title | default .Site.Title }}</h4>
<p class="blog-post-meta"
>{{ .Page.Date.Format "January 02, 2006" }} by <a href="#">epsi</a></p>
</section>
<article>
{{ .Content }}
</article>
</div><!-- /.blog-post -->
</main>
{{ end }}
{{ define "aside" }}
<aside class="column is-one-thirds has-background-info">
<div class="blog-sidebar">
<h4 class="is-size-4 is-italic">About You</h4>
<p>Are you an angel ?</p>
</div><!-- /.blog-sidebar -->
</aside>
{{ end }}
Most class are in official Bulma documentation.
Assets: Stylesheet
No need any custom stylesheet. We have already packed the required class, before this section.
Example Content: Everyday
Consider make this one post as an example
- content/posts/everyday.md
+++
type = "post"
title = "Everyday I Ask"
date = 2015-10-03T08:08:15+07:00
slug = "daily-wish"
tags = ["wishful", "story"]
categories = ["love"]
+++
You know, some people makes mistakes,
and have to bear the consequences, for the rest of their life.
I made, one good decision when I was far younger than you are.
Later I know it was the right decision.
But I also have to bear the consquences, for the rest of my life.
> I wish you a good family, and happiness.
Server Output: Browser
Open in your favorite browser. You should see, a post, with sidebar.
Note that, this is already using responsive grid. It has different looks on different screen. You should try to resize your browser, to get the idea.
7: Summary
So far here are artefacts for our layouts.
$ tree themes/tutor-02/layouts
themes/tutor-02/layouts
├── _default
│ ├── baseof.html
│ ├── list.html
│ └── single.html
├── index.html
└── partials
└── site
├── footer.html
├── header.html
├── head.html
└── scripts.html
3 directories, 8 files
What is Next ?
I feel you. Sometimes human get scared of new thing. You might think you are alone somewhere in a middle of jungle. Do not give up. Do not be a quitter. Yes you can finish until the end of the journey.
We are going to use SASS in theme, with custom SASS, all compiled into CSS. Consider continue reading [ Hugo - Bulma - SASS Introduction ].
Thank you for reading.