Jekyll Bulma - CSS Intro

   
   
 jekyll  bulma  
 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: Revamp the looks, of current Jekyll layout, with Bulma 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 Bulma 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: Bulma, Materialize CSS, Semantic UI, Bulma, or even better custom tailor made without CSS Frameworks, or Tailwind CSS.

Prerequiste

Use Bulma Stylesheet in Jekyll

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

This article rely on Bulma stylesheet on the article above. You should give a fast reading of above Bulma 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
│   ├── bulma.css
│   └── main.css
├── images
│   ├── light-grey-terrazzo.png
│   └── logo-gear.png
└── js
    └── bulma-burger-plain.js

3 directories, 5 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.

html {
  height: 100%;
  overflow-y: auto;
}

body {
  background-image: url("../images/light-grey-terrazzo.png");
  min-height: 100%;
}

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

@media screen and (min-width: 1216px) {
  .maxwidth {
    max-width: 1216px;
  }
}

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

footer.site-footer {
  padding-top: 4rem;
}

.blog-post p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

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

@media screen and (min-width: 769px), print {
  main {
    margin-right: 10px;
    margin-left: 10px;
  }

  aside {
    margin-left: 10px;
    margin-right: 10px;
  }
}

@media screen and (min-width: 1280px) {
  main {
    margin-left: 0px;
  }

  aside {
    margin-right: 0px;
  }
}

We have already discussed the stylesheet in Bulma 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="columns is-8 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 http-equiv="X-UA-Compatible"
        content="IE=edge,chrome=1">
  <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/bulma.css">
  <link rel="stylesheet" type="text/css"
        href="{{ site.baseurl }}/assets/css/main.css">

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

  <script src="{{ site.baseurl }}/assets/js/bulma-burger-plain.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 role="navigation" aria-label="main navigation"
       class="navbar is-fixed-top is-dark maxwidth">
    <div class="navbar-brand">
      <a class="navbar-item"
         href="{{ site.baseurl | prepend:site.url }}">
        <img src="{{ site.baseurl }}/assets/images/logo-gear.png" 
           alt="Home" />
      </a>
      <a class="navbar-item" href="{{ site.baseurl }}/pages/">Blog</a>

      <a role="button" class="navbar-burger burger" ...>
        ...
      </a>
    </div>

    <div id="navbarBulma" class="navbar-menu">
      <div class="navbar-start">
        ...
      </div>

      <div class="navbar-end">
        ...
      </div>

    </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-bulma repository.

Partial Liquid: Scripts

There is nothing here yet.

  {% comment %}<!-- JavaScript at end of body. -->{% endcomment %}

You can have the code here:

  <footer class="site-footer">
    <div class="navbar is-fixed-bottom maxwidth
          is-dark has-text-centered is-vcentered">
      <div class="column">
        &copy; {{ site.time | date: '%Y' }}
      </div>
    </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="column is-full">
    <article class="blog-post box">
      <h4 class="title is-4"
        >{{ page.title | default: site.title }}</h4>
      {{ content }}
    </article>

    <div class="box">
      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 Bulma 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="column is-two-thirds">
    <article class="blog-post box">
      <h4 class="title is-4"
        >{{ page.title | default: site.title }}</h4>
      {{ content }}
    </article>
  </main>

  <aside class="column is-one-thirds">
    <div class="box">
      {{ layout.aside_message }}
    </div>
  </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="column is-two-thirds">
    <article class="blog-post box">
      <h4 class="title is-4"
        >{{ page.title | default: site.title }}</h4>
      <p><strong>{{ page.date | date: "%B %d, %Y" }}</strong></p>
      {{ content }}
    </article>
  </main>

  <aside class="column is-one-thirds">
    <div class="box">
      {{ layout.aside_message }}
    </div>
  </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 Bulma - CSS Layout ].

Thank you for reading.