Twitter

Beta version. Last tested on 2017-03-12.

This is a minimalist theme for blogs powered by Jekyll, the static site generator. Bionis focuses on content and clean typography. It is developed with a mobile-first approach, scaling from the small screen to the desktop where it eventually becomes a two-column design.

The colour scheme, also named “Bionis”, is a bold, high contrast design that competently styles everything from plain text to code syntax (see its project page for ports to Vim, Atom, etc.). That makes the overall theme good both for prose and code.

Installation

Bionis is not a gem-based theme, as is to be expected for Jekyll 3.x. The reason is that the whole gem-based-themes system is still in its infancy and seems to lack certain features that can be found in traditional CMSs such as WordPress. Rather than raise expectations and fail to meet them, Bionis is distributed only in source code. The source is a perfectly functional Jekyll scaffold.

Assuming you are okay with that, all you have to do is copy the source into your repository. Then add your content accordingly, which by default, would be under the _posts directory. If you already have an established blog, chances are you have a fully fledged _config.yml, in which case you would probably want to carry over most, if not all, of your configurations.

Explaining the scaffold

Pages and menu

All pages, such as your “about me” and “contact” are under the pages directory. This is a common practice I have developed for my own website (source code on GitLab) to keep things organised. That is especially true at scale.

The actual placement of these pages within the directory is irrelevant, since each item has a specific YAML front matter key which defines its permalink (in the form of permalink: /contact-page-sample/ so that only the slug is there without the root domain).

The pages are linked to from the main navigation menu. That consists of two parts:

the _data/menu.yml file;
the _includes/navigation.html markup.

In the first file, we add the label of the page as we want it to appear on the menu, and then the url slug it points to. Here is how that looks:

# The `name` value shows up in the menu.

- name: About
  url: "/about/"
- name: Contact
  url: "/contact/"
- name: README
  url: "docs"

Then, in the second file where the markup is, we loop through that data to create the menu. Have a look:

{% assign links = site.data.menu %}

<ul>
  {% for link in links %}
  <li>
    <a href="{{ link.url | relative_url }}">
      {{ link.name }}
    </a>
  </li>
  {% endfor %}
</ul>

The same approach is followed for the social links menu. The data to make it is _data/social.yml, while the markup is at _includes/social.html. Supported icons (via _includes/social.svg) are Facebook, Twitter, GitHub, RSS.

For both menus, the order is as defined in their respective *.yml file.

I believe this is fairly straightforward and easy to manage. You can, for example, skip the process of organising your pages in a pages directory or you could name such a folder foo. So long as the menu items are pointing to a valid permalink value that is found in each individual page, the menu will work just fine.

The option of contextual configs

There is another optional benefit to having all your pages in one directory: you can filter them out in your local jekyll serve. The way to do that is create a _config-dev.yml file (or whatever name), where you only specify the overrides to the default _config.yml. There you can add the exclude key and list the items accordingly. That helps speed up things considerably, especially when working on a large site.

The way to load the _config-dev.yml is as follows:

bundle exec jekyll serve --config _config.yml,_config-dev.yml

And if you need a fleshed out sample, here is my _config-dev.yml (sample from 2017-03-12):

limit_posts: 1
incremental: false
exclude:
  - README.md # ------------------ Basis ---------------------------
  - CNAME
  - Gemfile
  - vendor
  - package.json
  - node_modules
  - gulpfile.js
  - .stylelintrc
  - images
  - _archive
  - _trash
  - _layouts/seminar.html
  - pages/certificates
  - pages/docs
  - pages/docs/notes
  - pages/docs/auxiliary
  - pages/indices/blog-archive.html
  - _books # --------------------- Books ---------------------------
  - pages/indices/books
  - pages/indices/books.html
  - _layouts/euhandbook.html
  - _layouts/euguide.html
  - _layouts/sov.html
  - _layouts/print.html
  - _includes/booksnav.html
  - _codelog # ------------------- Code ----------------------------
  - codelog.xml
  - pages/indices/codelog.html
  - pages/indices/code.html
  - _includes/triton-syntax.scss
  - _schemes # ------------------- Schemes -------------------------
  - _includes/main.min.js
  - pages/indices/schemes.html
  - _layouts/scheme.html
  - _data/themes.yml
  - _includes/prot16-packages.html
  - _includes/prot16-palette.html
  - _includes/prot16-codedemo.html
  - _includes/prot16-codeblocks.html
  - _includes/prot16-colourorder.html
  - _includes/prot16-schemesmenu.html
  - _includes/prot16-vim-packages.html
  - _includes/prot16-project-template.md

Stylesheets

The main styles are divided in two parts. The primary bionis.scss styles are located in the _includes directory, while the second one is css/bionis-secondary.css. The first is inlined in the _includes/head.html to improve performance. The second is loaded asynchronously with the help of the loadCSS script.

Again, this is a standard practice that I have carried over from my website. It makes sense when working with multiple stylesheets. Study my source’s _includes/head.html to fully grasp the rationale.

Furthermore, Bionis is packaged with the Fira Sans font family. A fonts directory contains the core files, while the corresponding style sheet, webfonts.min.css is loaded in the HTML head with the help of the Font Face Observer script.

Lastly, there also is a print-only style sheet which is optimised to load only on demand for print operations. It is css/bionis-print.css.

License

Bionis is distributed under the terms of the GNU General Public License Version 3.