Bulma CSS

CSS is notorious for taking a while to master but there are many different libraries out there that help you write CSS faster and with less errors.

Bulma is popular CSS library that comes with pre-made classes that we can use on our HTML elements to make them look nicer. This can cut down on the amount of CSS we need to write.

Adding Bulma

Open the baseof.html and inside the head above our styles.css file, add this line: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">. This is a link to a CDN server that hosts CSS files of Bulma.

Some base Bulma styles will be applied to our site as soon as we hit save.

Our baseof.html should look like:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
  <link rel="stylesheet" href="/styles.css">
  <title>{{ block "title" . }}
    {{ .Site.Title }}
    {{ end }}</title>
</head>

<body>
  {{ partial "navbar.html" . }}
  {{ block "main" . }}
  <!-- The part of the page that begins to differ between templates -->
  {{ end }}
  {{ partial "footer.html" . }}
</body>

</html>

If we go visit our site in our browser now, we will see the styles have changed a bit, like a new font was applied.

Don’t forget to remove the background: blue; property from our custom styles.css file we created earlier.

Styling our site

Now we will begin applying Bulma class names to various elements in our site, like this: class="bulma class names here".

So instead of writing the classes and styles ourselves, we use the pre-made ones from Bulma to do 90% of the styling, then we can still add our own custom styles on top of Bulma later.

Open the navbar.html partial file and replace the contents with the below snippet:

<nav class="navbar is-dark">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        {{ $.Site.Title }}
      </a>
    </div>

    <div class="navbar-start">
      <a class="navbar-item" href="/">
        Home
      </a>
      <a class="navbar-item" href="/posts">
        Posts
      </a>
    </div>
  </div>
</nav>

The elements have not changed, but we have added a few classes to each element to style them nicely. Save the changes and take a look at your new navbar in your browser.

Let’s open our footer.html file now and add the class footer to our footer element, like this: <footer class="footer has-text-centered">

This just adds some space around the text and centers it in the middle of the page.

Homepage

Now we will style our homepage a little bit. Open the index.html template and replace it with the following snippet:

{{ define "main" }}
<section class="section">
  <main class="container">
    {{ range first 5 .Site.RegularPages }}
    {{ .Render "summary" }}
    {{ end }}
  </main>
</section>
{{ end }}

This also just adds some spacing around the main content. For more details on what exactly each Bulma class is doing, check out the Bulma docs.

List Page

We will do the same thing with our list.html template, and we will also add a header title to that template since it can be anything based on the folder name in the content folder.

Your list.html should now look like this:

{{ define "main" }}
<section class="section">
  <main class="container">
    <h1 class="title">{{ .Title }}</h1>
    <div>
      {{ range .Pages }}
      {{ .Render "summary" }}
      {{ end }}
    </div>
  </main>
</section>
{{ end }}

Summary

Now we will format our summary.html template to display a nice clickable box instead of unformatted blue text.

Replace the summary.html file with the following:

<a class="box" href="{{ .Permalink }}">
  <h4 class="title is-4">{{ .Title }}</h4>
  <h6 class="subtitle has-text-grey is-6">{{ .Summary }}</h6>
  <div>
    <span class="tag is-link">{{ .ReadingTime }} Minutes</span>
    <span class="tag is-dark">{{ .Date.Format "Jan 2, 2006" }}</span>
    <span class="tag is-warning">{{ .WordCount }} Words</span>
  </div>
</a>

Now our homepage and our list pages will use that beautiful summary component.

Single

Lastly we will style our single.html template. Since this is a blog, we want it to be clutter-free and clean, so we won’t add anything too fancy.

Replace your single.html with the following:

{{ define "main" }}
<section class="section">
  <main class="container mb-6">
    <h1 class="title">{{ .Title }}</h1>
    <h3 class="subtitle">
      <span class="tag is-link">{{ .ReadingTime }} Minutes</span>
      <span class="tag is-dark">{{ .Date.Format "Jan 2, 2006" }}</span>
      <span class="tag is-warning">{{ .WordCount }} Words</span>
    </h3>

    <article class="content">
      {{ .Content }}
    </article>
  </main>

  <div class="container content">
    <ul>
      {{ with .PrevInSection }}
      <li>Previous Post: <a class="previous" href="{{ .Permalink }}">{{.Title}}</a></li>
      {{ end }}
      {{ with .NextInSection }}
      <li>Next Post: <a class="next" href="{{ .Permalink }}">{{.Title}}</a></li>
      {{ end }}
    </ul>
  </div>
</section>
{{ end }}

404

Lastly we will style our 404 page.

{{ define "main" }}
<section class="section">
  <main class="container">
    <h1 class="title">Page not found</h1>
    <a href="/">Go Home</a>
  </main>
</section>
{{ end }}

Now we have a beautiful site that we can start adding our own styles too. Feel free to modify any element classes and styles. Experiment to get the look and feel that you like.

Bulma CSS

Learn about Bulma CSS to help streamline CSS development

Adding Bulma

Styling our site

Navbar

Footer

Homepage

List Page

Summary

Single

404

Share this page