Table of Content
This article series contain few sections.
- Hugo - Summary
- Hugo - Minimal
- Hugo - Layout
- Hugo Bootstrap - Layout
- Hugo Bootstrap - Components
- Hugo Bootstrap - SASS
- Hugo Bootstrap - SASS Customization
- Hugo - Section List
- Hugo - Taxonomy
- Hugo - Archive
- Hugo - Custom Content Type
- Hugo - Sidebar
- Hugo - Data
- Hugo - Pagination - Simple
- Hugo - Pagination - Number
- Hugo - Pagination - Adjacent
- Hugo - Pagination - Indicator
- Hugo - Pagination - Responsive
- Hugo - Pagination - Screen Reader
- Hugo - Content - Bootstrap Post
- Hugo - Content - Markdown
- Hugo - Content - Raw HTML
- Hugo - Syntax Highlighting
- Hugo - Meta - Opengraph
- Hugo - Service
- Hugo - Javacript - lunr Search
- Additional: Deploying Pages on Git
- Presentation - Concept SSG
Supplementary Article for Windows User.
Clone Tutorial Source.
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.
Table of Content
Preface: Table of Content
1: Prepare
2: Layout: Maxwidth
3: Decoration: Border, Rounded, Shadow
Summary
What is Next ?
1: Prepare
This whole chapter is nice to have.
Theme
As usual, with your file manager, copy manually
From
themes/tutor-03/*
tothemes/tutor-04
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.
themes/tutor-04/sass/css/_decoration.scss
// -- -- -- -- --
// _decoration.scss
body {
background-image: url("../images/funky-lines.png");
}
And empty stylesheet file
themes/tutor-04/sass/css/_layout.scss
// -- -- -- -- --
// _layout.scss
And finally restucture all stylesheets in main.scss
.
themes/tutor-04/sass/css/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.
themes/tutor-04/sass/css/_variables.scss
// Variables
$blue: #007bff;
$dark: darken($blue, 35%);
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:
themes/tutor-04/layouts/_default/baseof.html
<!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.
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.
themes/tutor-04/sass/css/_layout.scss
// -- -- -- -- --
// _layout.scss
.maxwidth {
margin-right: auto;
margin-left: auto;
max-width: 1366px;
}
Add this maxwidth
class.
And put it as below:
layouts/_default/baseof.html
<!DOCTYPE html>
...
<div class="container-fluid maxwidth">
...
And the header
layouts/partials/site-header.html
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top
bg-dark maxwidth">
...
Also the footer
layouts/partials/site-footer.html
<footer class="footer bg-transparent">
<div class="container text-center
bg-dark text-light maxwidth">
<span>© {{ now.Year }}.</span>
</div>
</footer>
You can see the different look as below.
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.
themes/tutor-04/sass/css/_variables.scss
// 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.
themes/tutor-04/sass/css/_sticky-footer-navbar.scss
.footer {
...
bottom: 1px;
...
}
Change the header
themes/tutor-04/layouts/partials/site-header.html
<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
themes/tutor-04/layouts/partials/site-footer.html
<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>© {{ now.Year }}.</span>
</div>
</footer>
Also these two:
themes/tutor-04/layouts/_default/single.html
themes/tutor-04/layouts/_default/list.html
{{ 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.
themes/tutor-04/layouts/post/single.html
{{ 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 }}
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.
themes/tutor-04/sass/css/_decoration.scss
// -- -- -- -- --
// _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.
There are, some interesting topic
about Populating Content in Hugo using Archetypes
.
Consider continue reading [ Hugo - Section List ].
Thank you for reading.