Preface
Goal: Focusing on content page.
This chapter is about, preparing common blog post theme for use later with framework.
1: Prepare
This chapter also summarize what we have done so far.
Directory Preparation
We need a new SASS
section for this post
.
❯ tree sass/css-62
sass/css-62
├── bulma
│ ├── _derived-variables.sass
│ └── _initial-variables.sass
├── bulma.sass
├── fontawesome.scss
├── helper
│ └── _spacing.sass
├── helper.scss
├── main
│ ├── _decoration.sass
│ ├── _layout-content.sass
│ ├── _layout-page.sass
│ └── _list.sass
├── main.sass
├── materialize
│ ├── _color-classes.scss
│ ├── _color-variables.scss
│ └── _shadow.scss
└── post
├── _content.sass
├── _header.sass
└── _navigation.sass
5 directories, 17 files
This only require two new file artefact.
-
_content.scss
-
_header.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
...
// Tailor Made
@import "main/layout-page"
@import "main/layout-content"
@import "main/decoration"
@import "main/list"
@import "post/content"
@import "post/header"
@import "post/navigation"
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 .title
margin-bottom: .25rem
.blog-header .meta
margin-bottom: 2.0rem
.blog-body p
margin-top: 0.5rem
margin-bottom: 0.5rem
.blog-header .title,
.blog-header .subtitle
a
color: map-get($grey, "darken-3")
a:hover
color: map-get($blue, "base")
HTML Content
I know this example is long. this is just a demo of tag elements, along with feather icons.
<main role="main"
class="column is-two-thirds">
<section class="main-wrapper blue">
<div class="blog white z-depth-3 hoverable">
<section class="blog-header blue lighten-5">
<div class="main_title">
<h4 class="title is-4" itemprop="name headline">
<a href="#">Cause You're Different!</a></h4>
</div>
<div class="is-clearfix"></div>
<div class="field meta">
<div class="is-pulled-left">
<span class="meta_author tag is-small is-dark
indigo z-depth-1 hoverable">
<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="is-pulled-left">
<span class="meta-time tag is-small is-dark
green z-depth-1 hoverable">
A few days ago.
</span>
</div>
<div class="is-pulled-right">
<a href="#">
<span class="tag is-small is-dark
teal z-depth-1 hoverable"
><span class="fa fa-tag"></span>
love</span></a>
</div>
<div class="is-pulled-right">
<a href="#">
<span class="tag is-small is-dark
blue z-depth-1 hoverable"
><span class="fa fa-folder"></span>
rock</span></a>
</div>
</div>
<div class="is-clearfix"></div>
</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>
</div>
</section>
</main>
3: Navigation
Blog post navigation along with pagination customization, is also very common. And most CSS framework has built in support to navigation.
Stylesheet
a.post-previous:after
content: " previous"
a.post-next:before
content: "next "
.blog-body .pagination
margin-top: 1rem
margin-bottom: 1rem
HTML Content
Just add navigation code after the article
element.
<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>
<nav class="pagination is-centered"
role="navigation" aria-label="pagination">
<a href="#" class="pagination-previous post-previous"
title="next article name">« </a>
<a href="#" class="pagination-next post-next"
title="previous article name"> »</a>
</nav>
</article>
4: Landing Page
Again, test our single page design, with a more complete landing page.
<!-- main -->
<div class="columns is-8 layout-base maxwidth">
<main role="main"
class="column is-full">
<section class="main-wrapper blue">
<div class="blog white z-depth-3 hoverable">
<section class="blog-header has-text-centered blue lighten-5">
<div class="main_title">
<h3 class="title is-3 is-spaced"
itemprop="name headline">
<a href="#">Your Mission</a></h3>
<h4 class="subtitle is-4">
<a href="#">Should you decide to accept</a></h4>
</div>
</section>
<article class="blog-body has-text-centered"
itemprop="articleBody">
<br/>
<p>
<a class="button is-dark
blue-grey darken-2 hoverable m-b-5"
href="#">Articles Sorted by Month</a>
<a class="button is-dark
blue-grey darken-1 hoverable m-b-5"
href="#">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="justify-content-center">
<img src="images/one-page.png"
alt="business card">
</div>
<p class="lead text-muted">
<span class="fas fa-home"></span>
Whitewood Street, Monday Market,
East Jakarta, 55112, Indonesia.
</p>
</article>
</div>
</section>
</main>
</div>
Landing page is not really blog post post. I just put here just becaue I don’t want to make new article.
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 last part is a bonus. It is more like a javacript tutorial, which use a bunch of Bulma class. Consider continue reading [ Bulma MD - Javascript Toggler ].
Thank you for reading.