Bulma MD - Blog Post

   
   
 bulma  css  
 frontend  
Article Series

Bulma

Bulma Material Design

Animation Observer

Supplementary Article for Sass.

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

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 .

Bulma MD: Restructure SASS Directory

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"

Bulma MD: Tree and Main SASS

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>
                  &nbsp;
                  <span itemprop="author"
                        itemscope itemtype="http://schema.org/Person">
                  <span itemprop="name">epsi</span></span>
              </span>
              &nbsp;
              </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>
                &nbsp;
              </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>&nbsp;
                      love</span></a>
                &nbsp;
              </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>&nbsp;
                      rock</span></a>
                &nbsp;
              </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>

Bulma MD: Blog Post Header

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">&laquo;&nbsp;</a>

                <a href="#" class="pagination-next post-next"
                   title="previous article name">&nbsp;&raquo;</a>
            </nav>
          </article>

Bulma MD: Blog Post Navigation

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>&nbsp;
                Whitewood Street, Monday Market,
                East Jakarta, 55112, Indonesia.
            </p>

          </article>
        </div>
      </section>

    </main>

  </div>

Bulma MD: Landing Page

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.

Bulma MD: Blog Post Desktop

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.