ssg  
Article Series

Jekyll in General

Jekyll Plain

Where to Discuss?

Local Group

Preface

Goal: Revamp the looks, of current Jekyll layout, with Bootstrap Stylesheet.

Previous Tutorial

This article is direct chain of previous tutorial.

Source Code

This article use tutor-08 theme.

Not a CSS Tutorial

This article is not a CSS tutorial, but rather than applying simple CSS theme, into Jekyll layout. This CSS theme is a based on a SASS theme, that we are going to discuss later.

Layout Preview for Tutor 08

Liquid: Layout Preview for Tutor 08


1: About Bootstrap Stylesheet

Use Stylesheet in Jekyll

In previous articles, we have already refactor pages into a few layouts. All done without stylesheet, so you have understanding of Jekyll layout, without the burden of learning stylesheet.

The Choice

Now it is a good time to give this site a good looks. There are many options for this such as: Bootstrap, Materialize CSS, Semantic UI, Bulma, or even better custom tailor made without CSS Frameworks, or Tailwind CSS.

Prerequiste

Use Bootstrap Stylesheet in Jekyll

My choice comes to Bootstrap and Bulma, because I have already make a few articles about Bootstrap and Bulma, with a lot of details explanation:

This article rely on Bootstrap stylesheet on the article above. You should give a fast reading of above Bootstrap article first, before continue reading this article.

Responsive Design

Our base layout is based on responsive design. This below is general preview of, what responsive page that we want to achieve.

Jekyll: General Preview of Responsive Page Design

Different website might have different preview. Source image is available in inkscape SVG format, so you can modify, and make your own preview quickly.

This responsive design has already discussed in Bulma article series.

Related Article: CSS

I wrote about Bulma Navigation Bar that used in this article. Step by step article, about building Navigation Bar. You can read here:

Reference


2: Prepare: Assets

Directory Tree: Assets

There is no need to change any configuration. Any directory without _ prefix would be rendered. To make your assets tidy, consider put them all in one directory, such as ./assets.

$ tree assets
assets
├── css
│   ├── bootstrap.css
│   └── main.css
├── images
│   ├── light-grey-terrazzo.png
│   └── logo-gear.png
└── js
    ├── bootstrap-navbar-native.js
    └── feather.min.js

3 directories, 6 files

Actually, I made three different javascript choices. jquery, vue, and plain native vanilla. For simplicity reason, and also neutrality reason, for the rest of the chapter, I use plain javascript.

Jekyll: Tree: Assets

Stylesheet: Main

The main.css assets is the only custom stylesheet.

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

.maxwidth {
  margin-right: 0;
  margin-left: 0;
}

@media only screen and (min-width: 1200px) {
  /* Widescreen: */
  .maxwidth {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
  }
}
.layout-base main {
  margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {
  .layout-base main {
    margin-bottom: 0px;
  }
}
.navbar-brand img {
  width: 32px;
  height: 32px;
  margin-top: -10px;
  margin-bottom: -10px;
}

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 */
}

.feather {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: text-top;
}

We have already discussed the stylesheet in Bootstrap article .


3: Layout: Refactoring Base

Put on clothes on HTML body.

We should start over again from the very fundamental layout.

Layout: Liquid Default

<!DOCTYPE html>
<html>

<head>
  {% include site/head.html %}
</head>

<body>
  <!-- header -->
  {% include site/header.html %}

  <!-- main -->
  <div class="row layout-base maxwidth">
    {{ content }}
  </div>

  <!-- footer -->
  {% include site/footer.html %}
  {% include site/scripts.html %}
</body>

</html>

No we have four includes:

  • head,

  • header,

  • footer,

  • script (new).

For flexibility reason, I move two elements to child layout:

  • main, and

  • aside.

Jekyll: Base Layout

Partial Liquid: Head

There is a few additional changes here. Now the header contain stylesheets, meta tag, and icons.

  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>{{ (page.title | default: site.title) | escape }}</title>

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

  <link rel="shortcut icon" type="image/x-icon"
        href="{{ site.baseurl }}/favicon.ico"/>

  <script src="{{ site.baseurl }}/assets/js/bootstrap-navbar-native.js"></script>
  <script src="{{ site.baseurl }}/assets/js/feather.min.js"></script>

We will add meta SEO later. Here we start from simple thing.

Partial Liquid: Header

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

  <nav class="navbar navbar-expand-md navbar-dark maxwidth fixed-top bg-dark">

    <a class="navbar-brand"
       href="{{ site.baseurl | prepend:site.url }}">
       <img src="{{ site.baseurl }}/assets/images/logo-gear.png"
            alt="Home" />
    </a>

    <ul class="navbar-nav mr-auto">
      ...
    </ul>

    <button class="navbar-toggler" type="button" 
        ...>
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarCollapse">

      <ul class="navbar-nav mr-auto">
        ...
      </ul>

      <form class="form-inline mt-2 mt-md-0">
        ...
      </form>

    </div>
  </nav>

Jeykll: Navigation Bar: Header

This is an example of header using plain . You can switch to jquery or vue with example, in html-bootstrap repository.

Partial Liquid: Scripts

Since we use feather icons, we should put this snippets at the bottom.

  {% comment %}<!-- JavaScript at end of body. -->{% endcomment %}
  <script>
    feather.replace()
  </script>

You can have the code here:

  <!-- footer -->
  <footer class="footer">
    <div class="maxwidth bg-dark text-light text-center">
      &copy; {{ site.time | date: '%Y' }}.
    </div>
  </footer>

4: Layout: Home

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

Layout Liquid: Home

This is a single column design.

liquid’s template inheritance in jekyll, set in frontmatter.

---
layout : default
---

  <main role="main" 
        class="col p-4 bg-warning">
    <header>
      <h2>{{ page.title | default: site.title }}</h2>
    </header>
    <article>
      {{ content }}
    </article>
    <div class="text-muted text-center">
      This is a home kind layout,
      to show landing page.
    </div>
  </main>

Page Content: index

It is the same old story.

---
layout    : home
---

To have, to hold, to love,
cherish, honor, and protect?
  
To shield from terrors known and unknown?
To lie, to deceive?

To live a double life,
to fail to prevent her abduction,
erase her identity, 
force her into hiding,
take away all she has known.

Render: Browser

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

Well, I cut the content a little to make this screenshot below:

Jeykll: Page Content: Home

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


5: Layout: Page, Post

Our Page Kind, and Post Kind is simply, a double columns version of above layout.

Layout Liquid: Page

---
layout: default
aside_message : This is a page kind layout.
---

  <main role="main" 
        class="col-md-8">
    <section class="p-4 bg-warning h-100 rounded">
      <header>
        <h2>{{ page.title | default: site.title }}</h2>
      </header>
       <article>
        {{ content }}
      </article>
    </section>
  </main>

  <aside class="col-md-4">
      <section class="p-4 bg-dark text-light h-100 rounded">
      {{ layout.aside_message }}
    </section>
  </aside>

Jekyll: Extending Default: Page

We have two block elements here:

  • main,

  • aside.

Page Content: pages/about

No difference with previous chapter.

---
layout    : page
title     : Rescue Mission
---

This was not a rescue mission!

Let me put to you like this.
If the secretary wanted me out of there,
then things are really bad out here

We can say that this content wear page layout.

Render: Browser

Open in your favorite browser. You should see, a black and white about page, by now.

Jekyll: Page Content: pages/about

Layout Liquid: Post

---
layout: default
aside_message : This is a post kind layout.
---

  <main role="main" 
        class="col-md-8">
    <section class="p-4 bg-warning h-100 rounded">
      <header>
        <h2>{{ page.title | default: site.title }}</h2>
        <p><strong>{{ page.date | date: "%B %d, %Y" }}</strong></p>
      </header>
      <article>
        {{ content }}
      </article>
    </section>
  </main>

  <aside class="col-md-4">
      <section class="p-4 bg-dark text-light h-100 rounded">
      {{ layout.aside_message }}
    </section>
  </aside>

We also have two block elements here:

  • main,

  • aside.

Post Content: winter.md

No difference with previous chapter.

---
layout  : post
title   : Surviving White Winter
date    : 2016-01-01 08:08:15 +0700
tags      : ['sleepy', 'husky']
---

It was a frozen winter in cold war era.
We were two lazy men, a sleepy boy, two long haired women,
a husky with attitude, and two shotguns.
After three weeks, we finally configure javascript.

But we lost our beloved husky before we finally made it.
Now, every january, we remember our husky,
that helped all of us to survive.

Render: Browser

Open in your favorite browser. You should see, a black and white post, by now.

Jekyll: Post Content: _posts/winter


What is Next?

Consider continue reading [ Jekyll Bootstrap - CSS Layout ].

Thank you for reading.