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
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.
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.
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 include
s:
-
head
, -
header
, -
footer
, -
script
(new).
For flexibility reason,
I move two element
s to child layout:
-
main
, and -
aside
.
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>
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:
Layout Liquid: Footer
<footer class="site-footer">
<div class="navbar is-fixed-bottom maxwidth
is-dark has-text-centered is-vcentered">
<div class="column">
© {{ 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:
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>
We have two block element
s 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.
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 element
s 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.
What is Next?
Consider continue reading [ Jekyll Bulma - CSS Layout ].
Thank you for reading.