Bootstrap - Sass - Introduction

   
   
 bootstrap  sass  
 frontend  
Article Series

Bootstrap5 article series.

Supplementary Article for Sass.

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Step Four: Using Bootstrap SASS for the first time

Understanding SASS is a must for theme maker. You should be able to alter bootstrap variables.

Reading

If you do not have any idea about SASS you should read this first:

1: Overview

First thing first.

Bootstrap v4

The obsolete Bootstrap v4 article series is also available.

Directory Preparation

Add SASS to your current working directory.

❯ tree -d -L 1 assets sass
assets
├── css
├── images
└── js
sass
├── bootstrap5
└── css

7 directories

Bootstrap SASS: Directory Preparation

We are going to need them for the rest of this chapter.

Download Bootstrap SASS

Add Bootstrap to your vendors directory.

❯ tree -d sass/bootstrap5
sass/bootstrap5
├── forms
├── helpers
├── mixins
├── utilities
└── vendor

6 directories

Now you should see inside Bootstrap.

Bootstrap SASS: Inside Bootstrap

Custom SASS

Now, it is about the right time to create custom SASS. Let’s say we create this

@import 
  "../bootstrap/functions",
  "variables",
  "../bootstrap/bootstrap"
;

The import partials is from sass/css. We want to compile it to assets/css.

Bootstrap SASS: SCSS: Bootstrap

SASS Tools

You may compile with any SASS compiler that you need.

I user artix linux, so I use pacman to install dart-sass.

❯ sudo pacman -S dart-sass
resolving dependencies...
looking for conflicting packages...

Packages (1) dart-sass-1.62.0-1

Total Installed Size:  8.99 MiB

:: Proceed with installation? [Y/n] y
(1/1) checking keys in keyring                    
(1/1) checking package integrity                  
(1/1) loading package files                       
(1/1) checking for file conflicts                 
(1/1) checking available disk space               
:: Processing package changes...
(1/1) installing dart-sass

Bootstrap SASS: Install Dart CSS

Windows user can use chocolatey to install sass.

Compile SASS

Consider compile to css directory.

❯ cd step-04
❯ sass --watch -I sass sass/css:assets/css
[2023-04-20 17:20:59] Compiled sass/css/bootstrap.scss to assets/css/bootstrap.css.
Sass is watching for changes. Press Ctrl-C to stop.

Bootstrap SASS: Compile

Now you should see generated CSS, along with the CSS mapping. The CSS mapping is useful for debugging while inspecting in browser. You can exminae the uncompressed bootstrap CSS here:

❯ tree assets/css
assets/css
├── bootstrap.css
└── bootstrap.css.map

1 directory, 2 files

Bootstrap SASS: Generated CSS

This should be the same as regular official Bootstrap.

2: Example: Altering Bootstrap

This is the basic bootstrap customization.

The Bootstrap Sylesheet

Altering standard Bootstrap is simple. Consider change the behaviour by setting initial variable.

// Variables

$pink:  #e83e8c !default;
$primary:  darken($pink, 10%) !default;

Bootstrap SASS: SCSS: Bootstrap

The Custom Sylesheet

Also add custom stylesheet.

.layout-base {
  padding-top: 5rem;
  padding-bottom: 1rem;
}

Bootstrap SASS: SCSS: Bootstrap

Browser Preview

Screenshot

You can open the file, and check the page in browser. This should be pink now.

Bootstrap SASS: Example: Pink Navigation Bar

The result is not pretty, we are going to fix this.

3: Example Template

Wait, what HTML file do I use in browser? Where’s that document comes from?

Source Code: Step-04

Source code for this chapter can be obtained here:

Templates

Nunjucks

We have two reusable templates, the navbar-button and meta head.

❯ tree -C views
views
├── 041-navbar-minimal.njk
├── contents
│   └── 041-main.njk
├── heads
│   ├── 041-links.njk
│   └── 041-meta.njk
├── layouts
│   └── base.njk
└── shared
    ├── 041-footer.njk
    └── 041-navbar.njk

5 directories, 7 files

Bootstrap5: Directory Structure: Templates

Layout and Blocks

Reusable Parent Template

We have parent, and child.

<!DOCTYPE html>
<html>

<head>
  {% block htmlhead %}{% endblock %}
</head>

<body>
  {% block header   %}{% endblock %}
  {% block content  %}{% endblock %}
  {% block footer   %}{% endblock %}
</body>

</html>

Nunjucks Document Source

{% extends './layouts/base.njk' %}

{% block htmlhead %}
  {% include './heads/041-meta.njk' %}
  {% include './heads/041-links.njk' %}
{% endblock %}

{% block header %}
  {% include './shared/041-navbar.njk' %}
{% endblock %}

{% block content %}
  {% include './contents/041-main.njk' %}
{% endblock %}

{% block footer %}
  {% include './shared/041-footer.njk' %}
{% endblock %}

Bootstrap5: Nunjucks: Base Layout: Parent Template

HTML Head: Reusable Meta

We do not need fancy meta yet. All we need is just title.

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,
    initial-scale=1, shrink-to-fit=no">
  <title>Desperate times, desperate measures.</title>

Bootstrap5: Nunjucks: Heads: Meta

For this chapter, we only need simple navbar and footer. Let’s make it simple generic.

Navigation Bar

  <!-- header -->
  <nav class="navbar navbar-expand-md navbar-dark
      fixed-top bg-primary">
    <div class="navbar-collapse">
      <ul class="navbar-nav mx-2">
        <li class="nav-item">
          <a class="nav-link active"
             href="#">Home <span class="visually-hidden"
            >(current)</span></a>
        </li>
      </ul>
    </div>
  </nav>

Footer

  <!-- footer -->
  <footer class="footer">
    <div class="bg-primary text-light text-center">
      &copy; 2021.
    </div>
  </footer>

Bootstrap5: Nunjucks: Reusable Navigation Bar and Footer

Specific Content

This is our specific content, for our target HTML page.

HTML Head: Assets

Beside the common bootstrap.css, we need this additional main.css compiled by sass, to arrange the layout using vertical margin.

  <link rel="stylesheet" type="text/css" 
    href="assets/css/bootstrap.css">
  <link rel="stylesheet" type="text/css"
    href="assets/css/main.css">

Main Content

Add here is the content, to test how the page work.

  <!-- main -->
  <div class="layout-base">
    <main role="main" class="container">
      <ul class="list-group">
        <li class="list-group-item">
        To have, to hold, to love,
        cherish, honor, and protect?</li>

        <li class="list-group-item">
        To shield from terrors known and unknown?
        To lie, to deceive?</li>

        <li class="list-group-item">
        To live a double life,
        to fail to prevent her abduction,
        erase her identity, 
        force her into hiding,
        take away all she has known.</li>
      </ul>
    </main>
  </div>

Bootstrap5: Nunjucks: Contents: Links and Main

Static Page

HTML Document Target

You can check the compiled result here:

4: Example Custom SASS

Modular Stylesheet

The idea is, to make the stylesheet modular.

Directory Structure

Consider add some stylesheet for our beloved HTML pages.

❯ tree -C sass/css
sass/css
├── bootstrap.scss
├── main
│   ├── _decoration.scss
│   ├── _layout-page.scss
│   └── _sticky-footer.scss
├── main.scss
└── _variables.scss

Bootstrap SASS: Pane: Custom SASS Summary

Custom SASS

For each file, it is still simple. As the site grow, it is going to get more complex.

// Import partials from `sass_dir` (defaults to `sass/css`)
@import 
  "main/layout-page",
  "main/decoration",
  "main/sticky-footer"
;
.layout-base {
  padding-top: 5rem;
  padding-bottom: 1rem;
}
body {
  background-image: url("../images/light-grey-terrazzo.png");
}
/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
}

Browser Preview

Screenshot

Consider have a look again at the page after the tweaks.

Bootstrap SASS: Example: Pink Navigation Bar

Now it looks better.

What is Next 🤔?

We need to create our own custom theme But before we do that, consider have a look at, a ready to use theme.

Consider continue reading [ Bootstrap - Sass - Bootswatch ].