Jekyll Bulma - Layout - Index List

   
   
 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: Reponsive column for index and colors in content with Liquid Layout.

Source Code

This article use tutor-10 theme for colors, and additionaly tutor-12 theme for multiline responsive content. We will create it step by step.

1: Colors: Blog Index

How about content?

Previously, we have manage color for parent layout. And we can actually, manage color for its content too.

Partial Liquid: Blog List

This is the Bulma View Part.

To enhance the view, consider give more meta tag details, and separate it into partial.

We have one partial HTML view for this layout.

  {% assign color_main  = page.color_main  | default: layout.color_main %}

  <div class="post-list">
  {% for post in posts %}
    <div class="archive pb-2">
    <div class="meta-item px-2 py-2 hoverable">

      <strong><a class="meta_link {{ color_main }}-text text-darken-3" 
        href="{{ post.url | prepend: site.baseurl }}"
        >{{ post.title }}
      </strong></a>

      {% include index/blog-each-meta.html %}

      <div>{{ post.excerpt }}</div>

      <div class="read-more is-light">
        <a href="{{ post.url | prepend: site.baseurl }}" 
           class="button is-dark is-small {{ color_main }} z-depth-1 hoverable"
          >Read More&nbsp;</a>
      </div>

    </div></div>
  {% endfor %}
  </div>

Partial Liquid: Index/ Blog Each Meta

You might notice on above script:

{% include index/blog-each-meta.html %}

The blog-each-meta partial is a long detail:

  <div class="meta">
    <div class="meta_time is-pulled-left">
      <i class="fa fa-calendar"></i>
      <time datetime="{{ post.date | date_to_xmlschema }}">
      {{ post.date | date: "%b %-d, %Y" }}</time>
    </div>      
    <div class="meta_tags is-pulled-right">
      {% for tag in post.tags %}
        <a class="tag is-small is-dark {{ color_main }} z-depth-1 hoverable"
           href="{{ site.baseurl }}/tags/#{{ tag | slugify }}"
          >{{ tag }}&nbsp;<span class="fa fa-folder"></span>
        </a>&nbsp;
      {% endfor %}
    </div>
  </div> 

  <div class="is-clearfix"></div>

Render: Browser

Open in your favorite browser.

Jekyll Bulma: Blog List

2: Colors: Tag List, Category List.

Partial Liquid: Terms Badge

This is the Bulma View Part.

We can also match the layout color, with the color in view.

  {% assign color_main  = page.color_main  | default: layout.color_main %}

  <div class="field is-grouped is-grouped-multiline">
  {% for item in (0..terms.size) %}{% unless forloop.last %}
    {% assign this_word = term_array[item] | strip_newlines %}
    <div class="tags has-addons">
      {{ $posts := where $value.Pages "Type" "post" }}
      {{ $postCount := len $posts -}}
      <a href="#{{ this_word | slugify }}">
        <div class="tag is-light {{ color_main }} lighten-2 z-depth-1"
          >{{ this_word }} 
        </div><div class="tag is-dark {{ color_main }} darken-2 z-depth-1"
          >{{ terms[this_word].size }}
        </div>
      </a>
    </div>
    &nbsp;
  {% endunless %}{% endfor %}
    <div class="tags dummy"></div>
  </div>

The forloop reference can be read here:

Partial Liquid: Terms Tree

This is the Bulma View Part.

We require different icon for categories and tags. So we can set it in page.term_icon.

  <section class="py-1" id="archive">
  {% for item in (0..terms.size) %}{% unless forloop.last %}
    {% assign this_word = term_array[item] | strip_newlines %}
      <div id="{{ this_word | slugify }}" class ="anchor-target">
        <span class="{{ page.term_icon }}"></span> 
        &nbsp; {{ this_word }}
      </div>

      <div class="archive-list py-1">
      {% for post in terms[this_word] %}
        {% if post.title != null %}
          {% include index/each-post.html %}
        {% endif %}
      {% endfor %}
      </div>

  {% endunless %}{% endfor %}
  </section>

Partial Liquid: Each Post

We are going to use this partial in three places: terms-tree.html, by-year.html, and by-month.html.

  <div class="archive-item meta-item">
    <div class="meta_link has-text-right">
      <time class="meta_time is-pulled-right"
            datetime="{{ post.date | date_to_xmlschema }}">
        {{ post.date | date: "%b %-d, %Y" }}&nbsp;
        &nbsp;<span class="fa fa-calendar"></span></time></div>
    <div class="is-pulled-left">
    <a href="{{ post.url | prepend: site.baseurl }}">
      {{ post.title }}
    </a></div>
    <div class="is-clearfix"></div>
  </div>

Now featuring icon.

Page Content: Categories

---
# decoration
term_icon : fa fa-folder
---

Jekyll Bulma: Categories with Tree Details

Page Content: Tags

---
# decoration
term_icon : fa fa-tag
---

Jekyll Bulma: Tags with Tree Details

Partial Liquid: Terms Tree

This is the Bulma View Part.

Or even better we can put in a boxed like section.

  <section class="py-1" id="archive">
  {% for item in (0..terms.size) %}{% unless forloop.last %}
    {% assign this_word = term_array[item] | strip_newlines %}

    <div class="widget white z-depth-1 hoverable m-b-10">
      <div class="widget-header {{ color_main }} lighten-4">

        <div id="{{ this_word | slugify }}" class ="anchor-target">
          <span class="{{ page.term_icon }}"></span> 
          &nbsp; {{ this_word }}
        </div>

      </div>
      <div class="widget-body">

        <div class="archive-list py-1">
        {% for post in terms[this_word] %}
          {% if post.title != null %}
            {% include index/each-post.html %}
          {% endif %}
        {% endfor %}
        </div>

      </div>
    </div>

  {% endunless %}{% endfor %}
  </section>

Jekyll Bulma: Tags with Tree Details (boxed)

You do not need to setup any frontmatter to access page.term_icon.

The color main has been set in terms-badge.

  {% assign color_main  = page.color_main  | default: layout.color_main %}

So you do not need to set the color down, all over again.

3: Colors: Archive By Year, then By Month

Partial Liquid: Archive By Year

This is the Bulma View Part

The liquid logic, is remain the same. But the view, contained in a boxed section element.

  <section class="{{ color_main }} lighten-5 z-depth-1 hoverable
                  px-1 py-1 my-1">
    <div class ="anchor-target archive-year" 
         id="{{ year.name }}">{{ year_text }}</div>

    <div class="archive-list py-1">
      {% for post in year.items %}
        {% include index/each-post.html %}
      {% endfor %}
    </div>
  </section>

Jekyll Bulma: Archive By Year

Partial Liquid: Archive By Month

This is the Bulma View Part

The liquid logic, is remain the same. But the view, contained in a boxed section element.

  <section class="white z-depth-1 hoverable
                  px-1 py-1 my-1">
    <div class ="anchor-target archive-year" 
         id="{{ year.name }}">{{ year_text }}</div>

    {% assign postsByMonth = year.items
              | group_by_exp:"post", "post.date | date: '%m'"
              | sort: 'name'
              | reverse %}

    {% for month in postsByMonth %}

    <div class="py-1">

      {% for post in month.items limit:1 %}
      <div class ="archive-month" 
           id="{{ year.name }}-{{ month.name }}">
           {{ post.date | date: '%b - %Y' }}</div>
      {% endfor %}

      <div class="archive-list py-1">
        {% for post in month.items %}
          {% include index/each-post.html %}
        {% endfor %}
      </div>
    </div>

    {% endfor %}
  </section>

Jekyll Bulma: Archive By Month

4: Responsive: Index

Consider fast forward to tutor-12 theme for multiline responsive content. We need to fast forward, because we need to see the difference.

In Bulma, there is a is-multiline class, that enable each box to flow downward if the page width is not enough. The later image will explain better, than explaining by word.

General Preview

Our base layout is based on responsive design. This below is general preview of, what responsive content that we want to achieve.

Jekyll: General Preview of Responsive Content Design

Source image is available in inkscape SVG format, so you can modify, and make your own preview quickly.

Just keep in mind that, responsive content is different with responsive page. The responsive content is placed inside a responsive page.

Using Multiline Class

Consider this code below:

  <div class="row py-1" id="archive">
  {% for item in (0..terms.size) %}{% unless forloop.last %}
    {% assign this_word = term_array[item] | strip_newlines %}

    <div class="column is-full-mobile
                is-half-tablet is-one-third-widescreen">
      ...
    </div>

  {% endunless %}{% endfor %}
  </div>

This code has:

  • One Column in mobile screen: Full.

  • Two Columns in tablet screen: Half.

  • Three Columns in tablet screen: One Third.

You can make your own arrangement.

Partial: Liquid: By Year

{% assign color_main  = page.color_main
          | default: layout.color_main %}

{% assign postsByYear = posts |
          group_by_exp: "post", "post.date | date: '%Y'"  %}

<div class="columns is-multiline py-1" id="archive">
{% for year in postsByYear %}

  {% capture spaceless %}
    {% assign current_year = 'now' | date: '%Y' %}
    {% assign year_text = nil %}

    {% if year.name == current_year %}
      {% assign year_text = year.name
                | prepend: "This year's posts (" | append: ')' %}
    {% else %}
      {% assign year_text = year.name %}
    {% endif %}
  {% endcapture %} 

  <section class="column is-full-mobile
              is-half-tablet is-one-third-widescreen">

    <div class="widget white z-depth-1 hoverable m-b-10">
      <div class="widget-header {{ color_main }} lighten-4">

        <div class ="anchor-target archive-year" 
             id="{{ year.name }}">{{ year_text }}</div>

      </div>
      <div class="widget-body">

        <div class="archive-list py-1">
          {% for post in year.items %}
            {% include index/each-post.html %}
          {% endfor %}
        </div>

      </div>
    </div>

  </section>

{% endfor %}
</div>

Jekyll: Responsive Content: Multiline Archive by Year

Change: Liquid: By Year

I simply change the section.

<div id="archive">
{% for year in postsByYear %}
  <section class="{{ color_main }} lighten-5 z-depth-1 hoverable
                  px-1 py-1 my-1">
    ...
  </section>
{% endfor %}
</div>

Into this box frame layout below

<div class="row" id="archive">
{% for year in postsByYear %}
  <section class="column is-full-mobile
              is-half-tablet is-one-third-widescreen">
    <div class="widget white z-depth-1 hoverable m-b-10">
      ...
    </div>
  </section>
{% endfor %}
</div>

Partial: Liquid: By Month

{% assign color_main  = page.color_main
          | default: layout.color_main %}

{% assign postsByYear = posts
          | group_by_exp: "post", "post.date | date: '%Y'"  %}

<div id="archive">
{% for year in postsByYear %}

  {% capture spaceless %}
    {% assign current_year = 'now' | date: '%Y' %}
    {% assign year_text = nil %}

    {% if year.name == current_year %}
      {% assign year_text = year.name
                | prepend: "This year's posts (" | append: ')' %}
    {% else %}
      {% assign year_text = year.name %}
    {% endif %}
  {% endcapture %} 

  <div>
    <div class ="anchor-target archive-year" 
         id="{{ year.name }}">
       {{ year_text }}
    </div>

    {% assign postsByMonth = year.items
              | group_by_exp:"post", "post.date | date: '%m'"
              | sort: 'name'
              | reverse %}

    <div class="columns is-multiline py-1">
    {% for month in postsByMonth %}
    <section class="column is-full-mobile
              is-half-tablet is-one-third-widescreen">

      <div class="widget white z-depth-1 hoverable mb-2">
        <div class="widget-header {{ color_main }} lighten-4">

          {% for post in month.items limit:1 %}
          <div class ="archive-month" 
               id="{{ year.name }}-{{ month.name }}">
               {{ post.date | date: '%b - %Y' }}</div>
          {% endfor %}

        </div>
        <div class="widget-body">

          <div class="archive-list py-1">
            {% for post in month.items %}
              {% include index/each-post.html %}
            {% endfor %}
          </div>

        </div>
      </div>

    </section>
    {% endfor %}
    </div>
  </div>

{% endfor %}
</div>

Jekyll: Responsive Content: Multiline Archive by Month

Change: Liquid: By Month

This is a little bit complex.

<div id="archive">
 ...

    {% for month in postsByMonth %}
    <div class="py-1">
      ....
    </div>
    {% endfor %}
  ...
</div>

Into this box frame layout below:

<div id="archive">
  ...
    <div class="columns is-multiline py-1">
    {% for month in postsByMonth %}
      <section class="column is-full-mobile
                      is-half-tablet is-one-third-widescreen">
        ...
      </section>
    {% endfor %}
    </div>
  ...
</div>

Partial: Liquid: Tags Tree

  <section class="columns is-multiline py-1" id="archive">
  {% for item in (0..terms.size) %}{% unless forloop.last %}
    {% assign this_word = term_array[item] | strip_newlines %}
  <div class="column is-full-mobile
              is-half-tablet is-one-third-widescreen">

    <div class="widget white z-depth-1 hoverable m-b-10">
      <div class="widget-header {{ color_main }} lighten-4">

        <div id="{{ this_word | slugify }}" class ="anchor-target">
          <span class="{{ page.term_icon }}"></span> 
          &nbsp; {{ this_word }}
        </div>

      </div>
      <div class="widget-body">

        <div class="archive-list py-1">
        {% for post in terms[this_word] %}
          {% if post.title != null %}
            {% include index/each-post.html %}
          {% endif %}
        {% endfor %}
        </div>

      </div>
    </div>

  </div>
  {% endunless %}{% endfor %}
  </section>

Change: Liquid: Tags Tree

This is also need carefully carved.

  <div class="py-1" id="archive">
  {% for item in (0..terms.size) %}{% unless forloop.last %}
    {% assign this_word = term_array[item] | strip_newlines %}

    <div class="widget white z-depth-1 hoverable m-b-10">
      ...
    </div>

  {% endunless %}{% endfor %}
  </div>

Into this box frame layout below:

  <div class="row py-1" id="archive">
  {% for item in (0..terms.size) %}{% unless forloop.last %}
    {% assign this_word = term_array[item] | strip_newlines %}

    <div class="column is-full-mobile
                is-half-tablet is-one-third-widescreen">
      <div class="widget white z-depth-1 hoverable m-b-10">
        ...
      </div>
    </div>

  {% endunless %}{% endfor %}
  </div>

Responsive Tags

You can also examine in figure below, how the each screen suit this multiline layout:

  • Mobile (Full): One Column

Jekyll: Multiline Tags Tree in Mobile Screen

  • Tablet (Half): Two Columns

Jekyll: Multiline Tags Tree in Tablet Screen

  • Wide Screen (One Third): Three Columns

Jekyll: Multiline Tags Tree in Wide Screen

We are done with both theme layout and content layout.

What is Next?

Consider continue reading [ Jekyll Bulma - Widget - Simple HTML ].

Thank you for reading.