Hugo - Bootstrap - SASS Customization

   
   
 hugo  bootstrap  sass  
 ssg  frontend  
Article Series

This article series contain few sections.

Supplementary Article for Windows User.

Clone Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

This article is intended for beginner.

Goal: Add common bootstrap sass customization.

Before going futher with Hugo, we need to clean up our sass, because we next chapter require a nice looks.

This chapter is more like a Bootstrap guidance rather than Hugo. In fact this chapter doesn’t require Hugo at all. This chapter is completely out of topic.

1: Prepare

This whole chapter is nice to have.

Theme

As usual, with your file manager, copy manually

  1. From themes/tutor-03/* to themes/tutor-04
    gitlab.com/…/themes/tutor-04.

  2. Edit config.toml, and save.

$ cat config.toml
theme        = "tutor-04"

Watch Both

As usual, run Hugo.

$ hugo server

And do not forget, using other terminal, run the good SASS in parallel:

$ cd themes/tutor-04
$ sass --watch sass:static

Stylesheet

For starter, I put a nice background, using subtle pattern.

// -- -- -- -- --
// _decoration.scss

body {
    background-image: url("../images/funky-lines.png");
}

And empty stylesheet file

// -- -- -- -- --
// _layout.scss

And finally restucture all stylesheets in main.scss.

$ cat sass/css/main.scss

@import
  // taken from bootstrap
    "sticky-footer-navbar",
    "blog",
    "bootstrap-custom",

  // variables
    "bootstrap/functions",
    "variables",
    "bootstrap/variables",

  // custom
    "layout",
    "decoration"
;

I also change the pin color to blue. Note that, actually, you do not need to use the !default directive at all.

// Variables

$blue:  #007bff;
$dark:  darken($blue, 35%);

Hugo Bootstrap: Subtle Pattern Background

2: Maxwidth

I have a smartphone, tablet, sometimes medium screen, and mostly I’m working with large screen. What is good for my regular screen, looks ugly in large screen. My solution is to create maxwidth, so my content would not be stretched horizontally. Unfortunately, bootstrap maxwidth, does not suit my needs.

There are at least two options:

  • first: using bootstrap,

  • second: custom css class

Using Bootstrap

Using bootstrap is simply add these classes offset-lg-2 col-lg-8. or even for medium screen offset-md-2 col-md-8. And put these classes as below:

<!DOCTYPE html>
...
  <div class="container-fluid offset-lg-2 col-lg-8">
...

This will move the column to right. For illustration below, I put border, so you can see clearly, how the responsive goes in medium screen.

Hugo Bootstrap: Maxwidth Using Bootstrap

Notice that you do not need to balance by writing as this below:

  <div class="container-fluid offset-lg-2 col-lg-8 offset-lg-2">

Custom CSS Maxwidth Class

The other way is using custom stylesheet. Instead of relying on bootstrap, I’d rather lock the design with fixed width in pixel.

The maxwidth class is as simply as below. You can use whatever pixel width that suit you most.

// -- -- -- -- --
// _layout.scss

.maxwidth {
   margin-right: auto;
   margin-left: auto;
   max-width: 1366px;
}

Add this maxwidth class. And put it as below:

<!DOCTYPE html>
...
  <div class="container-fluid maxwidth">
...

And the header

<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top
              bg-dark maxwidth">
  ...

Also the footer

<footer class="footer bg-transparent">
  <div class="container text-center 
              bg-dark text-light maxwidth">
    <span>&copy; {{ now.Year }}.</span>
  </div>
</footer>

You can see the different look as below.

Hugo Bootstrap: Maxwidth Custom CSS

I guess it is more consistent than using mix of: md, lg, and xl. Not everything should be using bootstrap.

3: Decoration: Border, Rounded, Shadow

In order to have a better looks, I like to add these three bootstrap classes:

  • Rounded

  • Border

  • Shadow

Decoration with Bootstrap

We need to add some custom variable here, altering the default variable.

// Variables

$blue:  #007bff;
$dark:  darken($blue, 35%);

$border-radius: 4px;
$border-color:  $dark; // no default

Since we have border, we should also adjust footer related stylesheet.

.footer {
  ...
  bottom: 1px;
  ...
}

Change the header

<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top
              bg-dark maxwidth rounded-bottom shadow
              border border-top-0 border-light">
  ...

And the footer

<footer class="footer bg-transparent">
  <div class="container
              text-center bg-dark text-light
              maxwidth rounded-top shadow
              border border-bottom-0 border-light">
    <span>&copy; {{ now.Year }}.</span>
  </div>
</footer>

Also these two:

{{ define "main" }}
<main role="main" class="container-fluid 
            bg-light rounded border border-dark shadow">

But this one is, a little bit different, since it has layout.

{{ define "main" }}
  <main role="main" class="col-md-8">
    <div class="blog-main p-3 mb-3
                bg-light rounded border border-dark shadow">
      <div class="blog-post">
        <section>
          <h2 class="blog-post-title"
              >{{ .Title | default .Site.Title }}</h2>
          <p  class="blog-post-meta"
              >{{ .Page.Date.Format "January 02, 2006" }} by <a href="#">epsi</a></p>
        </section>

        <article>
          {{ .Content }}
        </article>
      </div><!-- /.blog-post -->
    </div><!-- /.blog-main -->
  </main>
{{ end }}

{{ define "aside" }}
  <aside class="col-md-4 blog-sidebar">
    <div class="p-3 mb-3
                bg-light rounded border border-dark shadow">
      <h4 class="font-italic">About You</h4>
      Are you an angel ?
    </div>
  </aside>
{{ end }}

Hugo Bootstrap: Decoration with Bootstrap

Actually, this is just an example. You should write, what suit you most.

Custom CSS Hover Class

Not everything can be solved using bootstrap. For example, hover would not work, because of this !important directive.

  • themes/tutor-04/sass/bootstrap/utilities/_shadows.scss
// stylelint-disable declaration-no-important

.shadow-sm { box-shadow: $box-shadow-sm !important; }
.shadow { box-shadow: $box-shadow !important; }
.shadow-lg { box-shadow: $box-shadow-lg !important; }
.shadow-none { box-shadow: none !important; }

To solve this situation, you need to create your own css.

// -- -- -- -- --
// _decoration.scss

...

.shadow-hover { box-shadow: $box-shadow; }

.shadow-hover:hover {
    box-shadow: 0 1rem 3rem rgba($black, .175);
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

Rename all shadow class to shadow-hover. And you are done. Ready for next chapter.

What is Next ?

Create necessary css, as you need.
However, still Bootstrap can save you,
from writing a lot of CSS code.

Need some rest ? Consider relax, and look at this adorable kitten in my shoes. Have a break for a while, prepare your playlist, and resume our tutorial.

adorable kitten

There are, some interesting topic about Populating Content in Hugo using Archetypes. Consider continue reading [ Hugo - Section List ].

Thank you for reading.