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 Bootstrap 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 p-2 hoverable">
<strong><a class="meta_link oc-{{ color_main }}-9-text"
href="{{ post.url | prepend: site.baseurl }}"
>{{ post.title }}
</strong></a>
{% include index/blog-each-meta.html %}
<div>{{ post.excerpt }}</div>
<div class="read-more">
<a href="{{ post.url | prepend: site.baseurl }}"
class="btn btn-sm my-2
oc-{{ color_main }}-9 oc-white-text
z-depth-1 hoverable"
>Read More </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 float-left">
<i data-feather="calendar"></i>
<time datetime="{{ post.date | date_to_xmlschema }}">
{{ post.date | date: "%b %-d, %Y" }}</time>
</div>
<div class="meta_tags float-right">
{% for tag in post.tags %}
<span class="badge oc-{{ color_main }}-9 z-depth-1 hoverable m-2">
<a class="oc-white-text"
href="{{ site.baseurl }}/tags/#{{ tag | slugify }}"
>{{ tag }} <i data-feather="tag" class="feather-14"></i>
</a></span>
{% endfor %}
</div>
</div>
<div class="clearfix"></div>Render: Browser
Open in your favorite browser.
2: Colors: Tag List, Category List.
Partial Liquid: Terms Badge
This is the Bootstrap 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="py-3">
{% for item in (0..terms.size) %}{% unless forloop.last %}
{% assign this_word = term_array[item] | strip_newlines %}
<span>
{{ $posts := where $value.Pages "Type" "post" }}
{{ $postCount := len $posts -}}
<a href="#{{ this_word | slugify }}">
<span class="badge oc-{{ color_main }}-3 oc-black-text
z-depth-1 hoverable">
{{ this_word }}
<span class="badge oc-{{ color_main }}-7 oc-white-text">
{{ terms[this_word].size }}
</span>
</span>
</a>
</span>
{% endunless %}{% endfor %}
</div>The forloop reference can be read here:
Partial Liquid: Terms Tree
This is the Bootstrap 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">
<i data-feather="{{ page.term_icon }}"></i>
{{ 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">
<i data-feather="chevrons-right"
class="float-left stroke-gray"></i>
<div class="float-left">
<a href="{{ post.url | prepend: site.baseurl }}">
{{ post.title }}
</a></div>
<div class="float-right text-right">
<time datetime="{{ post.date | date_to_xmlschema }}">
{{ post.date | date: "%b %-d, %Y" }}
<i data-feather="calendar"></i></time></div>
<div class="clearfix"></div>
</div>Now featuring icon.
Page Content: Categories
---
# decoration
term_icon : folder
---
Page Content: Tags
---
# decoration
term_icon : tag
---
Partial Liquid: Terms Tree
This is the Bootstrap View Part.
Or even better we can put in a boxed like section.
<div class="py-1" id="archive">
{% for item in (0..terms.size) %}{% unless forloop.last %}
{% assign this_word = term_array[item] | strip_newlines %}
<section class="mb-2">
<div class="widget oc-white z-depth-1 hoverable">
<div class="widget-header oc-{{ color_main }}-1">
<div id="{{ this_word | slugify }}" class ="anchor-target">
<i data-feather="{{ page.term_icon }}"></i>
{{ this_word }}
</div>
</div>
<div class="widget-body responsive-img">
<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>
</section>
{% endunless %}{% endfor %}
</div>
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 Bootstrap View Part
The liquid logic, is remain the same.
But the view, contained in a boxed section element.
<section class="oc-{{ color_main }}-1 z-depth-1 hoverable
p-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>
Partial Liquid: Archive By Month
This is the Bootstrap 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
p-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>
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 Bootstrap, there is a 12 columns grid layout class,
that enable each box to flow downward if the page witdh 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.
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 Grid Class
Consider this code using 12 columns grid class:
<div class="row py-1" id="archive">
{% for item in (0..terms.size) %}{% unless forloop.last %}
{% assign this_word = term_array[item] | strip_newlines %}
<section class="col-sm-12 col-md-6 col-lg-4 mb-2">
...
</section>
{% endunless %}{% endfor %}
</div>This code has:
-
One Column in mobile screen: Full (col-sm-12).
-
Two Columns in tablet screen: Half (col-md-6).
-
Three Columns in tablet screen: One Third (col-lg-4).
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="row" id="archive">
{% for year in postsByYear %}
...
<section class="col-sm-12 col-md-6 col-lg-4 mb-2">
<div class="widget oc-white z-depth-1 hoverable">
<div class="widget-header oc-{{ color_main }}-1">
<div class ="anchor-target archive-year"
id="{{ year.name }}">{{ year_text }}</div>
</div>
<div class="widget-body responsive-img">
<div class="archive-list py-1">
{% for post in year.items %}
{% include index/each-post.html %}
{% endfor %}
</div>
</div>
</div>
</section>
{% endfor %}
</div>
Change: Liquid: By Year
I simply change the section.
<div id="archive">
{% for year in postsByYear %}
<section class="oc-{{ color_main }}-1 z-depth-1 hoverable
p-1 my-1">
...
</section>
{% endfor %}
</div>Into this box frame layout below
<div class="row" id="archive">
{% for year in postsByYear %}
<section class="col-sm-12 col-md-6 col-lg-4 mb-2">
<div class="widget oc-white z-depth-1 hoverable">
...
</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 %}
<section>
<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="row">
{% for month in postsByMonth %}
<section class="col-sm-12 col-md-6 col-lg-4 mt-1 mb-2">
<div class="widget oc-white z-depth-1 hoverable">
<div class="widget-header oc-{{ color_main }}-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>
<div class="widget-body responsive-img">
<div class="archive-list py-1">
{% for post in month.items %}
{% include index/each-post.html %}
{% endfor %}
</div>
</div>
</div>
</section>
{% endfor %}
</div>
</section>
{% endfor %}
</div>
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="row">
{% for month in postsByMonth %}
<section class="col-sm-12 col-md-6 col-lg-4 mt-1 mb-2">
...
</section>
{% endfor %}
</div>
...
</div>Partial: Liquid: Tags Tree
<div class="row py-1" id="archive">
{% for item in (0..terms.size) %}{% unless forloop.last %}
{% assign this_word = term_array[item] | strip_newlines %}
<section class="col-sm-12 col-md-6 col-lg-4 mb-2">
<div class="widget oc-white z-depth-1 hoverable">
<div class="widget-header oc-{{ color_main }}-1">
<div id="{{ this_word | slugify }}" class ="anchor-target">
<i data-feather="{{ page.term_icon }}"></i>
{{ this_word }}
</div>
</div>
<div class="widget-body responsive-img">
<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>
</section>
{% endunless %}{% endfor %}
</div>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 %}
<section class="mb-2">
<div class="widget oc-white z-depth-1 hoverable">
...
</div>
</section>
{% 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 %}
<section class="col-sm-12 col-md-6 col-lg-4 mb-2">
<div class="widget oc-white z-depth-1 hoverable">
...
</div>
</section>
{% endunless %}{% endfor %}
</div>Responsive Tags
You can also examine in figure below, how the each screen suit this multiline layout:
- Mobile (Full): One Column (col-sm-12)
- Tablet (Half): Two Columns (col-md-6)
- Wide Screen (One Third): Three Columns (col-lg-4)
We are done with both theme layout and content layout.
What is Next?
Consider continue reading [ Jekyll Bootstrap - Widget - Simple HTML ].
Thank you for reading.