Jekyll Bootstrap - SASS Intro

   
   
 jekyll  bootstrap  sass  
 ssg  
Article Series

Jekyll in General

Jekyll Plain

Jekyll Bootstrap OC

Jekyll Bulma MD

Conclusions

Repository

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Apply SASS in Jekyll using Bulma Open Color.

Source Code

This article use tutor-09 theme.

Layout Preview for Tutor 09

Liquid: Layout Preview for Tutor 09

1: About Bootstrap Stylesheet

Use SASS in Jekyll.

This is basically just changing theme, from using simple CSS theme to customizable SASS theme. We have to start the previous chapter all over again, without liquid relationship, but with complex stylesheet.

The Choice

As default, Jekyll is equipped with SASS converter

There is always a place to enhance this site looks.

Create necessary sass, as you need.
However, still Bootstrap can save you,
from writing a lot of CSS code.

SASS is not the only CSS preprocessor. There are many options for this such as: Stylus, Less, or even PostCSS via PreCSS.

Both Bootstrap and Bulma is using SASS, so jekyll+bootstrap or jekyll+bulma or even jekyll+custom sass, is the easy choice for jekyll’s beginner.

There are other choice as well in the internet, such as jekyll+tailwind, but I never try one.

Prerequiste

Use Bootstrap MD in Jekyll.

This article rely on Bootstrap OC in article below. You should give a fast reading of this Bootstrap OC article first, before continue reading this article.

Reference

SASS in Jekyll

  • Jekyll-v3 is using ruby-sass, and blamed to be the source of sluggish build.

  • Jekyll-v4 is using sassc, and significantly improve build speed.

SASS Format

SASS lang has two dialect, the one with *.sass extension using indentation, and the one with *.scss extension using css like format. Both format supported by Jekyll SASS.

2: Prepare: Assets

With the right configuration, Jekyll can manage SASS. This tutorial using conventinal way, running SASS from CLI.

Directory Tree: CSS

First thing to do is to create sass directory, and fill with required SASS.

$ tree -d _sass
_sass
├── bootstrap
│   ├── mixins
│   ├── utilities
│   └── vendor
└── css
    ├── feather
    ├── main
    ├── materialize
    ├── open-color
    └── post

10 directories

Bootstrap OC has a bunch of SASS. If you take a look closer of the _sass/css, it contains a few separated stylesheet, prepared design to build a blog site.

$ tree _sass/css
_sass/css
├── bootstrap.scss
├── feather
│   └── _icons-feather.scss
├── helper.scss
├── main
│   ├── _decoration.scss
│   ├── _layout-content.scss
│   ├── _layout-page.scss
│   ├── _list.scss
│   ├── _logo.scss
│   └── _sticky-footer.scss
├── main.scss
├── materialize
│   └── _shadow.scss
├── open-color
│   ├── _open-color-classes.scss
│   └── _open-color-variables.scss
├── post
│   ├── _content.scss
│   └── _navigation.scss
└── _variables.scss

5 directories, 16 files

For the detail of what each SASS file artefact do, you can fast reading this article below :

So expect, to face new custom class in example ahead.

Jekyll: Tree: SASS

Calling SASS in Jekyll

With all the complexity above, we can packed all stylesheets, into just three CSS file artefacts.

Consider have a look at the the build destination directory in _site:

❯ tree _site/assets/css
_site/assets/css
├── bootstrap.css
├── helper.css
└── main.css

0 directories, 3 files

And compare, with the source SASS in assets directory.

$ tree assets/css
assets/css
├── bootstrap.scss
├── helper.scss
└── main.scss

0 directories, 3 files

For this to be happened, we set in each SASS file artefact, for example:

---
# Only the main Sass file needs front matter (the dashes are enough)
---

@charset "utf-8";

// Import partials from `sass_dir` (defaults to `_sass`)
@import "css/main";

And so the other two files

---
---
@import "css/bootstrap";
---
---
@import "css/helper";

Jekyll: Assets Tree: SASS

This jekyll-sass-converter will compile them automatically. Now the stylesheet is ready to be used.

3: Layout: Refactoring Base

Wearable Layout

As we did with previous articles. We should start over again from basic layout.

Layout: Liquid Default

No difference here. Just leave this base as it was.

Partial Liquid:

There is no changes here either.

Partial Liquid: Header

The only differences is, I add this class: oc-white z-depth-3 hoverable.

It is still a long header, so again I crop the code. You can get the complete code in the repository.

  {% comment %}<!-- navigation bar -->{% endcomment %}
  <nav class="navbar navbar-expand-md navbar-light fixed-top maxwidth
              oc-white z-depth-3 hoverable">
    ...
  </nav>

Partial Liquid: Scripts

No difference. Just leave this intacts.

Just like header, the only differences is, I add this class: oc-white z-depth-3 hoverable.

  {% comment %}<!-- footer -->{% endcomment %}
  <footer class="footer">
    <div class="maxwidth text-dark text-center
                oc-white z-depth-3 hoverable">
      &copy; {{ site.time | date: '%Y' }}.
    </div>
  </footer>

4: Layout: Home

Consider use home layout` to begin, and all other layout later.

Layout Liquid: Home

As previous, this view is a single column design.

There are a lot of changes in here. Now the layout is using main-wrapper, and inside main-wrapper has blog-header and blog-body.

---
layout : default
---
  <main role="main" class="col px-0">
    <section class="main-wrapper single oc-blue-5">
      <div class="blog oc-white z-depth-3 hoverable">
        <section class="blog-header oc-blue-1 text-center">
          <h2 class="h4 font-weight-bold" itemprop="name headline">
            {{ page.title | default: site.title }}</h2>
        </section>

        <article class="blog-body text-center" itemprop="articleBody">
          {{ content }}
        </article>
        
        <div class="text-muted text-center">
          <i data-feather="home"></i>&nbsp;
          This is a home kind layout,
          to show landing page.
        </div>
      </div>
    </section>
  </main>

There will be double columns design in other layout. Both single column and double columns design, wear the same default parent.

Page Content: Index (Home)

I scrapped all the code, and place a landing page, along with bootstrap buttons.

---
layout: home
---

  <br/>

  <p>
    <a class="btn btn-primary my-2"
       href="{{ site.baseurl }}/by-month/"
      >Articles Sorted by Month</a>
    <a class="btn btn-secondary my-2"
       href="{{ site.baseurl }}/tags/"
      >Articles Sorted by Tag</a>
  </p>

  <p>As always,
  should you be caught or killed,
  any knowledge of your actions will be disavowed.</p>

  <div class="textcenter">
    <img src="assets/images/cards/one-page.png" 
         alt="business card">
  </div>

  <p class="small lead text-muted">    
      Whitewood Street, Monday Market,
      East Jakarta, 55112, Indonesia.
  </p>

Render: Browser

Open in your favorite browser. You should see, a blue colored homepage, by now.

Jekyll: Page Content: Home

Notice that this is a single column page. All other page is double columns, and again, deserve its own explanation.

What is Next?

Consider continue reading [ Jekyll Bootstrap - SASS Layout ].

Thank you for reading.