Preface
This article is intended for beginner.
Goal: Changing Bootstrap Color with Sass in Hugo theme
All these examples below based on official bootstrap examples:
1: Prepare
This preparation is required.
Theme
With your file manager, copy manually
- From themes/tutor-02/* to themes/tutor-03.
Remove completely:
- themes/tutor-03/static/dist/css/
Create directory 3. themes/tutor-03/sass
You should see the sass directory, in this new tutor-03 theme:
- Edit config.toml, and save.
$ cat config.toml
theme = "tutor-03"
- Have a look at the example in repository.
Source: gitlab.com/…/themes/tutor-03
Boostrap Source
You can download your bootstrap using
$ wget https://github.com/twbs/bootstrap/archive/v4.1.3.zip
With your file manager, using newly downloaded bootstrap directory, copy manually:
- From bootstrap-4.1.3/scss/* to themes/tutor-03/sass/bootstrap.
Change working directory
$ cd /themes/tutor-03
Your sass directory should be looks like this.
$ tree -d sass
sass
└── bootstrap
├── mixins
└── utilities
3 directories
Source: gitlab.com/…/sass/bootstrap
2: Bootstrap Sass
Install
$ gem install sass
...
Successfully installed sass-3.5.7
Parsing documentation for sass-3.5.7
Installing ri documentation for sass-3.5.7
Done installing documentation for sass after 13 seconds
1 gem installed
Deprecated
Ruby-sass will be deprecated soon.
As an alternative you can use dart-sass, node-sass.
Or any task runner such as gulp or grunt.
Using SASS
Using SASS in CLI is easy. However, you need to read the manual page first.
$ sass --help
You don’t need to create this directory, as sass will create necessary directory.
$ mkdir static/bootstrap/
Generate CSS
Using themes/tutor-03 as working directory, generating css is as simply as this command below. The command will map any necessary input scss in sass directory, into output css in static directory.
$ sass --update sass:static
write static/bootstrap/bootstrap-grid.css
write static/bootstrap/bootstrap-grid.css.map
write static/bootstrap/bootstrap-reboot.css
write static/bootstrap/bootstrap-reboot.css.map
write static/bootstrap/bootstrap.css
write static/bootstrap/bootstrap.css.map
Result: gitlab.com/…/static/bootstrap
Continuously
To avoid, typing command above over, and over again. Consider to this command to continuously update as the input change.
$ sass --watch sass:static
>>> Sass is watching for changes. Press Ctrl-C to stop.
Assets: Stylesheet
We need an adjustment, as we use different bootstrap stylesheet.
-
- themes/tutor-03/layouts/partials/site-head.html
- gitlab.com/…/layouts/partials/site-head.html
<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="{{ "bootstrap/bootstrap.css" | relURL }}">
</head>
Now check the browser, to check if there is no error.
3: Custom SCSS
Now we are also going to move static/css/.
Create Custom CSS
Rename these three artefacts:
-
themes/tutor-03/static/css/blog.css to sass/css/_blog.scss
-
themes/tutor-03/static/css/bootstrap-custom.css to sass/css/_bootstrap-custom.scss
-
themes/tutor-03/static/css/sticky-footer-navbar.css to sass/css/_sticky-footer-navbar.scss
- source
- gitlab.com/…/sass/css/
Watch The Changes
$ sass --watch sass:static
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> New template detected: sass/css/_blog.scss
>>> New template detected: sass/css/_bootstrap-custom.scss
>>> New template detected: sass/css/_sticky-footer-navbar.scss
Result: gitlab.com/…/static/css
Generate CSS
- Create main.scss
- gitlab.com/…/sass/main.scss.
@import
"sticky-footer-navbar",
"blog",
"bootstrap-custom"
;
You should see the change in the terminal.
$ sass --watch sass:static
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> New template detected: sass/css/main.scss
write static/css/main.css
write static/css/main.css.map
>>> Change detected to: sass/css/main.scss
write static/css/main.css
write static/css/main.css.map
Result
The content of themes/tutor-03/static/css should be as below:
$ tree static/css
static/css
├── main.css
└── main.css.map
Result: gitlab.com/…/static/css/main.css
It is, a looong stylesheet, automatically crafted by sass.
Assets: Stylesheet
Don’t forget to add necessary stylesheet.
-
- themes/tutor-03/layouts/partials/site-head.html
- gitlab.com/…/layouts/partials/site-head.html
<head>
...
<link rel="stylesheet" type="text/css" href="{{ "boostrap/bootstrap.css" | relURL }}">
<link rel="stylesheet" type="text/css" href="{{ "css/main.css" | relURL }}">
</head>
Server Output: Browser
Check the browser again, to check if there is no error.
4: Bootswatch (as an example)
You can change bootstrap predefined variable. You can make your own variable override.
Resources
Luckily, you do not to reinvent the wheel, there are already good color schemes, in the internet.
-
And some more sites
I took one example, the bootswatch.
Prepare
Clone
$ git clone https://github.com/thomaspark/bootswatch
Copy from bootswatch/dist/* to themes/tutor-03/sass/bootswatch/
You should see, many theme in that directory.
$ ls sass/bootswatch
cerulean flatly lux sandstone solar yeti
cosmo journal materia simplex spacelab
cyborg litera minty sketchy superhero
darkly lumen pulse slate united
Remove unnecessary files.
$ find themes/tutor-03/sass/bootswatch -name "bootstrap*" -exec rm {} \;
This will remove any all compiled bootstrap.css. Saving some space.
Generate CSS
- Create bootswatch.scss
- gitlab.com/…/sass/bootswatch.scss.
@import
"bootswatch/cerulean/variables",
"bootstrap/bootstrap",
"bootswatch/cerulean/bootswatch"
;
Again, you should see the change in the terminal.
$ sass --watch sass:static
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> New template detected: sass/css/bootswatch.scss
write static/css/bootswatch.css
write static/css/bootswatch.css.map
Result: gitlab.com/…/static/css/main.css
Assets: Stylesheet
Don’t forget to make an adjustment, as we use bootstrap stylesheet from bootswatch.
-
- themes/tutor-03/layouts/partials/site-head.html
- gitlab.com/…/layouts/partials/site-head.html
<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/bootswatch.css" | relURL }}">
<link rel="stylesheet" type="text/css" href="{{ "css/main.css" | relURL }}">
</head>
Switch Theme
You may switch to other template. There is already some free swatch such as: cerulean, cosmo, cyborg, darkly, flatly, journal, litera, lumen, lux, materia, minty, pulse, sandstone, simplex, sketchy, slate, solar, spacelab, superhero, united, yeti.
$ cat sass/css/bootswatch.scss
@import
"bootswatch/flatly/variables",
"bootstrap/bootstrap",
"bootswatch/flatly/bootswatch"
;
But sometimes you need some color adjustment, to match. Here I remove the text-mute class from the span tag.
<footer class="footer bg-dark text-light">
<div class="container text-center">
<span>© {{ now.Year }}.</span>
</div>
</footer>
Server Output: Browser
Open in your favorite browser. You should see, a homepage, with different theme color.
5: Custom Color Variables
If you want, you can create your own custom color. Supposed you want a pink feminine navigation bar, you can just adjust the color.
-
- themes/tutor-03/sass/css/_variables.scss
- gitlab.com/…/sass/_variables.scss.
// Variables
$pink: #e83e8c !default;
$primary: darken($pink, 10%) !default;
Note that, darken is sass function.
Generate CSS
Do not forget to make the bootstrap.scss.
-
- themes/tutor-03/sass/css/bootstrap.scss
- gitlab.com/…/sass/bootstrap.scss.
@import
"bootstrap/functions",
"variables",
"bootstrap/bootstrap"
;
You should see the change in the terminal, as usual.
$ sass --watch sass:static
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> New template detected: sass/css/_variables.scss
>>> New template detected: sass/css/bootstrap.scss
write static/css/bootstrap.css
write static/css/bootstrap.css.map
Assets: Stylesheet
Also change the site-head.html.
-
- themes/tutor-03/layouts/partials/site-head.html
- gitlab.com/…/layouts/partials/site-head.html
<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/bootstrap.css" | relURL }}">
<link rel="stylesheet" type="text/css" href="{{ "css/main.css" | relURL }}">
</head>
Partial: HTML Footer
And some adjustment, from bg-dark to bg-primary, so the pink can also affect the hyperlink.
-
- themes/tutor-03/layouts/partials/site-footer.html
- gitlab.com/…/layouts/partials/site-footer.html
<footer class="footer bg-primary text-light">
<div class="container text-center">
<span>© {{ now.Year }}.</span>
</div>
</footer>
Partial: HTML Header
I also simplified the logo, to match the pink color.
-
- themes/tutor-03/layouts/partials/site-header.html
- gitlab.com/…/layouts/partials/site-header.html
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
<a class="navbar-brand" href="{{ .Site.BaseURL }}">
<img src="{{ "images/logo-gear-pink.png" | absURL }}"
alt="Logo" />
</a>
...
Server Output: Browser
Open in your favorite browser. You should see, a homepage, with pink navigation bar.
Summary
As a summary, here is the content of scss input:
$ tree sass/css
sass/css
├── _blog.scss
├── _bootstrap-custom.scss
├── bootstrap.scss
├── bootswatch.scss
├── main.scss
├── _sticky-footer-navbar.scss
└── _variables.scss
.
And the content of css output would be:
$ tree static/css
static/css
├── bootstrap.css
├── bootstrap.css.map
├── bootswatch.css
├── bootswatch.css.map
├── main.css
└── main.css.map
With map, you can debug in object inspector.
What is Next ?
I do not go deep about sass, as this is not a bootstrap tutorial.
There are, some interesting topic about Using SASS in Bootstrap in Hugo. Consider continue reading [ Hugo Bootstrap - SASS Customization ].
Thank you for reading.