Preface
Step Seven: Prepare common blog post theme for use later with framework.
This chapter is focusing on parts of blog post.
1: Chapter Overview
This chapter also summarize what we have done so far.
Source Code: Step-07
You can access the source code for this chapter by clicking on the following link:
Related Articles
The obsolete Bootstrap v4 article:
SASS Directory Structure
We need a new SASS section for this post.
❯ tree -C css
css
├── bootstrap.scss
├── helper.scss
├── main
│ ├── _decoration.scss
│ ├── _layout-content.scss
│ ├── _layout-page.scss
│ ├── _list.scss
│ ├── _logo.scss
│ └── _sticky-footer.scss
├── main.scss
├── materialize
│ ├── _color-classes.scss
│ ├── _color-variables.scss
│ └── _shadow.scss
├── post
│ ├── _content.scss
│ └── _navigation.scss
└── _variables.scss
4 directories, 15 filesThis only require two new file artefact.
-
_content.scss
-
_navigation.scss
In real world blogging,
this post section has a more SASS stylesheet document.
I have about five or seven, depend on the framework that I choose.
Main SASS
Of course you have to update your main SASS to reflect the above
// Import partials from `sass_dir` (defaults to `sass/css`)
@import
// Bootstrap Related
"../bootstrap/functions",
"variables",
"../bootstrap/variables",
"../bootstrap/mixins/breakpoints",
// Heeyeun's Open Color
"open-color/_open-color-variables",
// Tailor Made
"main/layout-page",
"main/layout-content",
"main/logo",
"main/decoration",
"main/sticky-footer",
"main/list",
"post/content",
"post/navigation"
;
Nunjucks Directory Structure
Luckily for this chapter, we have common base layout.
I invite you to inspect the code yourself on my GitHub repository.
❯ tree -C views
views
├── 071-post-header.njk
├── 072-post-navigation.njk
├── 073-landing-page.njk
├── 074-javascript-toggler.njk
├── aside
│ ├── 071-aside.njk
│ └── 074-aside.njk
├── blog
│ ├── 071-badge.njk
│ ├── 072-badge.njk
│ ├── 072-navigation.njk
│ └── 074-toggler.njk
├── contents
│ ├── 071-main.njk
│ ├── 072-main.njk
│ ├── 073-cover.njk
│ ├── 073-main.njk
│ └── 074-main.njk
├── heads
│ ├── links.njk
│ └── meta.njk
├── layouts
│ └── base.njk
└── shared
├── 074-footer.njk
├── 074-navbar.njk
├── footer.njk
├── navbar-button.njk
├── navbar-collapse.njk
├── navbar-dropdown.njk
└── navbar.njk
7 directories, 25 files
2: Header
Blog post header customization is very common. I utilize badge (or tag). Luckily most CSS framework, has built in support to display tag.
Stylesheet
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
/*
* Blog posts
*/
.blog-body {
margin-bottom: 1rem;
}
.blog-header {
h1, h2, h3, h4, h5, h6 {
margin-bottom: .25rem;
a {
color: map-get($grey, "darken-4");
}
a:hover {
color: map-get($grey, "darken-1") !important;
}
}
}
.blog-header .meta {
margin-bottom: 2.0rem;
}
.blog-body p {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
Nunjucks: Main
The fundamental structure of the layout remains consistent
with the code from the previous chapter.
Inside that we have blog-header and blog-body.
<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">
...
</section>
<article class="blog-body"
itemprop="articleBody">
...
</article>
</div>
</section>
</main>
Inside that we have blog-header and blog-body.
<section class="blog-header blue lighten-5">
<h4 class="font-weight-bold"
itemprop="name headline">
<a href="#">Cause You're Different!</a></h4>
{% include '../blog/071-badge.njk' %}
</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>
In blog-header element, there is this badge template.
Badge Template
I know this template is long. this is just a demo of tag elements, along with FontAwesome icons.
<div class="clearfix"></div>
<div class="field meta">
<div class="float-start">
<span class="meta_author badge indigo darken-2
white-text z-depth-1">
<span class="fa fa-user"></span>
<span itemprop="author"
itemscope
itemtype="http://schema.org/Person">
<span itemprop="name">epsi</span></span>
</span>
</div>
<div class="float-start">
<span class="meta-time badge cyan darken-2
white-text z-depth-1">
<span class="fas fa-clock"></span>
A few days ago.
</span>
</div>
<div class="float-end">
<a href="#">
<span class="badge teal darken-2
white-text z-depth-1 hoverable"
><span class="fa fa-tag"></span>
love</span></a>
</div>
<div class="float-end">
<a href="#">
<span class="badge blue darken-2
white-text z-depth-1 hoverable"
><span class="fa fa-folder"></span>
rock</span></a>
</div>
</div>
<div class="clearfix"></div>
Preview on Browser
So you can imagine how it looks.
In mobile screen it is simply as below:
While in small desktop, it is shown as below:
That is the first step in blog post.
3: Navigation
Blog post navigation along with pagination customization, is also very common. And most CSS framework has built in support to navigation.
Stylesheet
Bootstrap navigation in bootstrap is harcoded to pagination.
You cannot rename class to navigation.
li.post-previous a:after {
content: " previous";
}
li.post-next a:before {
content: "next ";
}
.blog-body .pagination {
margin-top: 1rem;
margin-bottom: 1rem;
}
Main
We can just put the navigation anywhere in our blog post.
In my case I put the navigation below article in blog-body.
<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>
{% include '../blog/072-navigation.njk' %}
</article>
Navigation Template
In blog-body element, there is this navigation template.
We are going to use bootstrap class here.
<ul class="pagination justify-content-between"
role="navigation"
aria-labelledby="pagination-label">
<li class="page-item post-previous">
<a class="page-link"
href="#"
title="next article name">« </a>
</li>
<li class="page-item post-next">
<a class="page-link"
href="#"
title="previous article name"> »</a>
</li>
</ul>
Preview on Browser
Standard pagination looks.
On portrait mobile phone display, the layout appears as follows:
The layout on landscape mobile phone display is illustrated in the following image:
4: Landing Page
Landing page is not really blog post post. I just put here just because I don’t want to make new article.
Again, test our single page design, with a more complete landing page.
Blocks
Nunjucks Document Source
We do not have aside here. Only single column.
{% block content %}
<!-- responsive colored main layout -->
<div class="row layout-base maxwidth">
{% include './contents/073-cover.njk' %}
</div>
{% endblock %}
Cover Template
Here is the aestethic wrapper for main template.
<main class="col px-0">
<section class="main-wrapper single blue">
<div class="blog white z-depth-3 hoverable">
<section class="blog-header
blue lighten-5 text-center">
<h3 class="font-weight-bold" itemprop="name headline">
Your Mission</h3>
<h4 class="font-weight-normal">
Should you decide to accept</h4>
</section>
<article
class="blog-body text-center" itemprop="articleBody">
{% include './073-main.njk' %}
</article>
</div>
</section>
</main>
In blog-body element, there is this main landing page template.
Main Template
In blog-body element, there is this navigation template.
<p>
<a href="#"
class="btn btn-primary my-2
z-depth-1 hoverable"
>Articles Sorted by Month</a>
<a href="#"
class="btn btn-secondary my-2
z-depth-1 hoverable"
>Articles Sorted by Tag</a>
</p>
<p>
As always,
should you be caught or killed,
any knowledge of your actions
will be disavowed.</p>
<img src="assets/images/one-page.png"
alt="business card">
<p class="text-muted">
<small>
<span class="fas fa-home"></span>
Whitewood Street, Monday Market,
East Jakarta, 55112, Indonesia.
</small>
</p>
Preview on Browser
The landing page on landscape mobile phone screen is illustrated in the following image:
I just keep this article simple.
5: Summary
As a summary, here is the final looks, of our blog post in desktop screen.
What is Next 🤔?
The next part is a bonus. It is more like a javacript tutorial, which use a bunch of Bootstrap class.
Consider continue reading [ Bootstrap - Javascript Toggler ].