Bootstrap - Sass - Widget

   
   
 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 Six: Building multicolor widget with flat design.

We can use blog post as an easy example of web page. This blog post is usually consist of main content and aside. In aside elements, you can put a bunch of widgets over there. So what we need to is focusing on development of this various widgets.

1: Chapter Overview

Since I’m not a web designer, I rarely make my own theme. I simply don’t have the sense of art to make the mockup with inkscape. So here is what I do, I make a pure css theme. One of them is this flat design, featuring multicolored widget.

Source Code: Step-06

The source code for this chapter is, available for download at the following link::

The obsolete Bootstrap v4 article:

Responsive Requirement

This article is not a bootstrap tutorial anymore, but more like a custom theme tutorial. Even though the page based on bootstrap.

Custom Class

Yes. I have to do it myself. And it is fun.

Multicolor Requirement

Palette

We can either use Google Materialize Color, or Open Color.

SASS Directory Structure

I believe it’s unnecessary to provide an in-depth analysis of every file, as the code is available for your examination on my GitHub repository.

The only new file is the list.scss.

❯ tree -C sass/css
sass/css
├── bootstrap.scss
├── helper-dark.scss
├── helper.scss
├── main
│   ├── _decoration-dark.scss
│   ├── _decoration.scss
│   ├── _layout-content.scss
│   ├── _layout-page.scss
│   ├── _list.scss
│   ├── _logo.scss
│   └── _sticky-footer.scss
├── main-dark.scss
├── main.scss
├── materialize
│   ├── _color-classes.scss
│   ├── _color-variables.scss
│   ├── _glow.scss
│   └── _shadow.scss
└── _variables.scss

3 directories, 17 files

Bootstrap SASS: SASS Directory Structure

Nunjucks Directory Structure

Rather than providing an exhaustive analysis of each file, I invite you to inspect the code yourself on my GitHub repository.

❯ tree -C views
views
├── 061-responsive.njk
├── 062-blog.njk
├── 063-widget.njk
├── 064-list.njk
├── 065-tags.njk
├── aside
│   ├── 061-aside.njk
│   ├── 062-aside.njk
│   ├── 063-aside.njk
│   ├── 064-aside.njk
│   ├── 065-widget-01.njk
│   └── 065-widget-02.njk
├── contents
│   ├── 061-main.njk
│   ├── 062-main.njk
│   ├── 063-main.njk
│   ├── 064-main.njk
│   └── 065-main.njk
├── heads
│   ├── links.njk
│   └── meta.njk
├── layouts
│   └── base.njk
└── shared
    ├── footer.njk
    ├── navbar-button.njk
    ├── navbar-collapse.njk
    ├── navbar-dark.njk
    ├── navbar-dropdown.njk
    └── navbar.njk

6 directories, 25 files

Bootstrap SASS: Views Directory Structure

Blocks

Nunjucks Document Source

The basic template is similar with previous chapter, except the content block that contain two columns. We have main and aside differently for each page.

{% block content %}
  <!-- responsive colored main layout -->
  <div class="row layout-base maxwidth">
    {% include './contents/061-main.njk' %}
    {% include './aside/061-aside.njk' %}
  </div>
{% endblock %}

Bootstrap5: Nunjucks: Blocks: Responsive

2: Responsive Gap

Let’s take a step forward from our previous chapter and explore multicolored layouts.

Stylesheet

To begin with, we can add padding to our existing layout to create a simple multicolor design.

// layout

.main-wrapper,
.aside-wrapper {
  padding: 0 10px 0 10px;
}

Bootstrap SASS: Custom SASS for Main and Aside

Main and Aside

The basic layout is the same as previous, except with additional colors.

<main class="col-sm-8 px-0">
  <section class="main-wrapper blue">
    <div class="white z-depth-3 hoverable">
      Page Content
    </div>
  </section>
</main>

While the aside is

<aside class="col-sm-4 px-0">
  <section class="aside-wrapper green">
    <div class="white z-depth-3 hoverable">
      Side Menu
    </div>
  </section>
</aside>

Bootstrap5: Nunjucks: Contents: Main Aside

Preview on Browser

On portrait mobile phone screens, the layout appears as follows:

Bootstrap5: Responsive Multicolor in Mobile Screen

The layout on landscape mobile phone screens is illustrated in the following image:

Bootstrap5: Responsive Multicolor in Desktop

The image below demonstrates my experimentation with glowing dark mode:

Bootstrap5: Responsive Multicolor in Desktop: Dark

I must admit that the dark mode is not good. But I jump into dark mode anyway. So I can customize when I have time.

3: Blog Main and Aside

From simple layout, we can go further to blog layout.

HTML Content

Consider give a horizontal padding px-2 to a content, and see how it looks.

<main class="col-sm-8 px-0">
  <section class="main-wrapper blue">
    <div class="blog px-2 white
        z-depth-3 hoverable">
      <article>
        <h4>Cause You're Different!</h4>
        <p>When you can do the things
          that I can, but you don't, 
          and then the bad things happen,
          they happen because of you.</p>
      </article>
    </div>
  </section>
</main>

Bootstrap5: Nunjucks: Contents: Main

While the aside is

<aside class="col-sm-4 px-0">
  <section class="aside-wrapper green">
    <div class="widget px-2 white
        z-depth-3 hoverable">
      <p>How many times has he been,
      betrayed, disavowed, cast aside?</p>
    </div>
  </section>

  <section class="aside-wrapper teal">
    <div class="widget px-2 white
        z-depth-3 hoverable">
      <p>And how long before a man
        like that has had enough?</p>
    </div>
  </section>
</aside>

Bootstrap5: Nunjucks: Contents: side

On portrait mobile phone, the layout appears as follows:

Bootstrap5: Responsive Multicolor in Desktop Screen

Stylesheet

The very basic part of this multicolor is, adding padding to our previous layout.

// gap main and aside

.blog {
  padding: 0px;
}
.blog-header {
  padding: 5px 10px 5px 10px;
}
.blog-body {
  padding: 5px 10px 5px 10px;
}

Bootstrap SASS: Custom SASS for Widget

And the vertical gap between widget can be solved with :last-child.

// responsive

.main-wrapper,
.aside-wrapper {
  margin-bottom: 20px;
}

.aside-wrapper:last-child {
  margin-bottom: 0px;
}

Bootstrap SASS: Custom SASS for Widget Wrapper

Preview on Browser

The following image displays how the layout appears on portrait mobile phone screen:

Bootstrap5: Responsive Multicolor in Mobile Screen

The following image showcases how the layout appears on landscape mobile phone screen:

Bootstrap5: Responsive Multicolor in Desktop

As can be seen in the following image, I have also experimented with dark mode:

Bootstrap5: Responsive Multicolor in Desktop: Dark

Consider separate design in each multicolor section, so that each have their own header and footer.

Stylesheet

The very basic part of this multicolor is, adding padding to our previous layout.

// gap main and aside

.blog {
  padding: 0px;
}
.blog-header {
  padding: 5px 10px 5px 10px;
}
.blog-body {
  padding: 5px 10px 5px 10px;
}
.widget {
  padding: 0px;
}
.widget-header {
  padding: 5px 10px 5px 10px;
}
.widget-body {
  padding: 5px 10px 5px 10px;
}

Bootstrap SASS: Custom SASS for Widget

HTML Skeleton

We have many additional element layer here. Each blog and the widget, has header and body.

  • Blog: main.col > section.main-wrapper > div.blog > article.blog-body
    <main class="col-md-8 px-0">
      <section class="main-wrapper blue">
        <div class="blog white z-depth-3 hoverable">

          <section class="blog-header blue lighten-5">
            ...
          </section>

          <article class="blog-body">
            ...
          </article>

        </div>
      </section>
    </main>
  • Widget: aside.col > section.aside-wrapper > div.widget > div.widget-body
    <aside class="col-md-4 px-0">   
      <section class="aside-wrapper green">
        <div class="widget white z-depth-3 hoverable">

          <div class="widget-header green lighten-5">
            ...
          </div>

          <div class="widget-body">
            ...
          </div>

        </div>
      </section>
    </aside>

The compiled HTML can be found here:

HTML Content

Consider give a horizontal padding px-2 to a content, and see how it looks.

<main class="col-sm-8 px-0">
  <section class="main-wrapper blue">
    <div class="blog white z-depth-3 hoverable">
      <section class="blog-header
          blue lighten-5">
        <h4 itemprop="name headline">
          <a href="#">Cause You're Different!</a></h4>
      </section>

      <article
          class="blog-body"
          itemprop="articleBody">
        <p>When you can do the things
          that I can, but you don't, 
          and then the bad things happen,
          they happen because of you.</p>
      </article>
    </div>
  </section>
</main>

Bootstrap5: Nunjucks: Contents: Main

While the aside is

<aside class="col-sm-4 px-0">   
  <section class="aside-wrapper green">
    <div class="widget white z-depth-3 hoverable">

      <div class="widget-header green lighten-5">
        <strong>How many times ?</strong>
        <span class="fa fa-child
          float-end"></span>
      </div>

      <div class="widget-body">
        <p>Has he been, betrayed,
          disavowed, cast aside.</p>
      </div>

    </div>
  </section>

  <section class="aside-wrapper teal">
    <div class="widget white z-depth-3 hoverable">

      <div class="widget-header teal lighten-5">
        <strong>And how long?</strong>
        <span class="fas fa-fingerprint
          float-end"></span>
      </div>

      <div class="widget-body">
        <p>Before a man like that
          has had enough.</p>
      </div>

    </div>
  </section>
</aside>

Bootstrap5: Nunjucks: Contents: side

Preview on Browser

On portrait mobile phone screen, the layout appears as follows:

Bootstrap5: Responsive Multicolor in Mobile Screen

The layout on landscape mobile phone screen is illustrated in the following image:

Bootstrap5: Responsive Multicolor in Desktop

The image below demonstrates my experimentation with glowing dark mode:

Bootstrap5: Responsive Multicolor in Desktop: Dark

5: List Widget

I have four blogs, and each blog contain nine kind of widgets. These two are the basic most widget.

  • List

  • Tags

Consider begin with List.

Stylesheet

I must admit I have difficulties with SVG. Using font such as FontAwesome is easier with CSS. My workaround is grab the chevron-right.svg from feathericons. Then well…. just resize the icon to suit widget looks. Resize and changing color is very easy with inkscape. I just need one for list icon anyway.

ul.widget-list li:hover {
  background: map-get($yellow, 'lighten-2');
}

ul.widget-list {
  padding: 0px;
}

ul.widget-list {
  padding-left: 0;
  list-style: none;
  font-size: 13px;
  margin-left: 20px;
}

ul.widget-list li:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
  color: map-get($grey, 'base');
  margin: 0 5px 0 -12px;
}

ul.widget-list li:hover:before {
  color: map-get($yellow, 'base');
}

Bootstrap SASS: Custom SASS for List

map-get is sass language.

Do not forget to alter the main.scss.

@import 
  ...

  // custom
  "main/layout-page",
  "main/layout-content",
  ...
  "main/list"
;

Bootstrap SASS: Main Custom SASS

HTML Content

Consider this list widget content.

<aside class="col-sm-4 px-0">   
  <section class="aside-wrapper green">
    <div class="widget white z-depth-3 hoverable">

      <div class="widget-header green lighten-5">
        <strong>Isle of Friends</strong>
        <span class="fa fa-child
          is-pulled-right"></span>
      </div>

      <div class="widget-body">
        <ul class="widget-list">
          <li><a href="http://epsi-rns.github.io/"
            >Linux/BSD Desktop Customization
            </a></li>
          <li><a href="http://epsi-rns.gitlab.io/"
            >Web Development Blog
            </a></li>
          <li><a href="http://oto-spies.info/"
            >Car Painting and Body Repair.
            </a></li>
        </ul>
      </div>

    </div>
  </section>
</aside>

Bootstrap5: Nunjucks: Contents: side

Preview on Browser

The following image displays how the layout appears on portrait mobile phone screen:

Bootstrap5: List Widget in Mobile Screen

The following image showcases how the layout appears on landscape mobile phone screen:

Bootstrap5: List Widget in Desktop

As can be seen in the following image, I have also experimented with dark mode:

Bootstrap5: List Widget in Desktop: Dark

6: Tags Widget

Other basic widget example is the tags widget.

Stylesheet

No need additional stylesheet. We can use ready to use bootstrap class, and also the fontawesome icon.

Blocks

Nunjucks Document Source

For this demo, I also refactor the HTML element, for further use. So we need a different content blocks.

{% block content %}
  <!-- responsive colored main layout -->
  <div class="row layout-base maxwidth">
    <main class="col-sm-8 px-0">
      {% include './contents/065-main.njk' %}
    </main>

    <aside class="col-sm-4 px-0">
      {% include './aside/065-widget-01.njk' %}
      {% include './aside/065-widget-02.njk' %}
    </aside>
  </div>
{% endblock %}

Bootstrap5: Nunjucks: Blocks: Responsive

HTML Content

Consider this list widget content.

<section class="aside-wrapper cyan">
  <div class="widget white z-depth-3 hoverable">

    <div class="widget-header cyan lighten-4">
      <strong>Categories</strong>
      <span class="fa fa-folder
        is-pulled-right"></span>
    </div>

    <div class="widget-body">
      <a href="#">
        <span class="badge text-dark
          cyan lighten-3 z-depth-1 hoverable">
        mission&nbsp;
        <span class="fa fa-folder"></span>
      </span></a>&nbsp;
      <a href="#">
        <span class="badge text-dark
          cyan lighten-3 z-depth-1 hoverable">
        accomplished&nbsp;
        <span class="fa fa-folder"></span>
      </span></a>&nbsp;
    </div>

  </div>
</section>

Bootstrap SASS: Custom SASS for Widget

And also the second widget.

<section class="aside-wrapper teal">
  <div class="widget white z-depth-3 hoverable">

    <div class="widget-header teal lighten-4">
      <strong>Tags</strong>
      <span class="fa fa-tag
        is-pulled-right"></span>
    </div>

    <div class="widget-body">
      <a href="#">
        <span class="badge text-dark
          white z-depth-1 hoverable">
        command&nbsp;
        <span class="fa fa-folder"></span>
      </span></a>&nbsp;
      <a href="#">
        <span class="badge text-dark
          white z-depth-1 hoverable">
        agent&nbsp;
        <span class="fa fa-folder"></span>
      </span></a>&nbsp;
      <a href="#">
        <span class="badge text-dark
          white z-depth-1 hoverable">
        duty&nbsp;
        <span class="fa fa-folder"></span>
      </span></a>&nbsp;
    </div>

  </div>
</section>

Bootstrap SASS: Custom SASS for Widget

Preview on Browser

In portrait mobile phone screen it is simply as below:

Bootstrap5: Tags Widget in Mobile Screen

While in landscape mobile phone, it is as shown as below:

Bootstrap5: Tags Widget in Desktop

And again also experiment with glowing dark mode.

Bootstrap5: Tags Widget in Desktop: Dark

I wish somebody could pointing me out to make nice looking dark mode.

What is Next 🤔?

The next part is about content, the blog post and its decoration.

Consider continue reading [ Bootstrap - Sass - Blog Post ].