Bootstrap - Sass - Bootswatch

   
   
 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 a ready to used Bootstrap SASS theme.

Working with theme is fun.

Bootstrap v4

The obsolete Bootstrap v4 article series is also available.

Official Site

There is a ready to used Bootstrap theme named Bootstrap Swatch.

Or the source code, if you prefer:

Bootswatch 5 provide 25 ready to be used theme for bootstrap5 while Bootswatch 4 only provide 21 theme for bootstrap4.

Bootstrap SASS: Bootswatch: Folder

Preview in Browser

Generating bootswatch theme with SASS is easy. We can also combine with our own custom CSS.

Then I can just make screehost of all themes.

Bootstrap SASS: Bootswatch: PReview

And compile it as GIF animation with GIMP.

Bootstrap SASS: Bootswatch Animation

So you can have the idea about the theme with just one this image.

1: HTML Preparation

This article is integral part of previous article. You should read previous article before continue.

Templates

Nunjucks

We can use previous templates with a few exceptions.

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

So the only things that different is the head links, and main content.

Nunjucks Document Source

So the code should be shown as below:

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

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

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

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

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

Specific Content

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

HTML Head: Assets

We are going to replace the bootstrap.css, with bootswatch5 compiled by sass.

  <link rel="stylesheet" type="text/css" 
    href="assets/css/bootswatch5.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 active">
        <h4>Your Mission!</h4></li>

        <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>

Static Page

HTML Document Target

You can check the compiled result here:

Bootstrap SASS: Bootswatch Compiled HTML

Now that the HTML document is ready, we need to build the stylesheet using SASS.

2: Bootstrap Swatch

By altering bootstrap variable, we can change the looks of bootstrap. And we can also change further with SASS, as shown in bootswatch example.

Consider examine at one example theme. The Cerulean theme.

Directory

We need only two files for each theme.

❯ tree -C sass/bootswatch5
sass/bootswatch5
├── cerulean
│   ├── _bootswatch.scss
│   └── _variables.scss
├── cosmo
│   ├── _bootswatch.scss
│   └── _variables.scss
├── cyborg
│   ├── _bootswatch.scss
│   └── _variables.scss
├── darkly
│   ├── _bootswatch.scss
│   └── _variables.scss

Bootstrap SASS: Bootswatch Tree

The Sylesheet

Original Code

Consider have a look at the original code:

By altering bootstrap variable, we can change the looks of bootstrap.

// Cerulean 5.2.3
// Bootswatch

$theme: "cerulean" !default;

//
// Color system
//

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

...

Bootstrap SASS: SCSS: Variables

Along with this code, we can go further.

// Cerulean 5.2.3
// Bootswatch


// Variables

$text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;

:root {
  color-scheme: light;
}

...

Bootstrap SASS: Bootswatch

Ypu can examine the altered variable by yourself.

The Sylesheet: Using Bootswatch

Now for use with our project, adapt with our directory structure.

@import
    "../bootswatch5/cerulean/variables",
    "../bootstrap/bootstrap",
    "../bootswatch5/cerulean/bootswatch"
;

Consider compile

$ dart-sass --watch -I sass sass/css:assets/css --style=compressed --no-source-map
Sass is watching for changes. Press Ctrl-C to stop.

Compiled sass/css/bootswatch.scss to assets/css/bootswatch.css.

Bootstrap SASS: SCSS: Bootswatch5

Prepare The Head

Consider the <head> elemento of our last example, instead of using the bootstrap.css, change it to bootswatch.css theme.

<head>
  ...

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

The Document: Example

The looks of the theme in browser for cerulean theme, would looks like below.

Bootstrap SASS: Bootswatch Theme

What is Next 🤔?

We need to create our own custom theme with custo page layout. In order to do this, we need to make our theme is responsive. So that later we can free playing, added decoration and so on.

Consider continue reading [ Bootstrap - Sass - Responsive ].