B-side Theme for Hugo, May 30 2018

Hugo B-side

Hugo B-side is a theme for Hugo using reStructuredText markup to produce a clean column-and-sidenotes style that follows many of the design ideas that have flowed from Edward Tufte's work. This website is implemented using this B-side theme.

Full information about the theme can be found in the repository at Github. A live demonstration site with more information about features and techniques is available.

Responsive 2-column page layout (scales from 300 to 1300+ pixels wide)
Supports all reStructuredText markup features

Including

Images and figures
Sidenotes and citations
Pull-quotes and epigraphs
Sidebars
Admonitions and topics, notably including topics containing the table of contents
Support for inline math and code directives
Tables including all forms of reStructuredText alternative table markup: list-tables field lists even bibliographic fields

With

The ability to place any of these elements in a sidebar that runs the full length of the page.

All of these features and some more are demonstrated in the live demo

Goals

The intent of Hugo B-side is to provide a straight-forward method for authoring content that takes advantage of Tufte's teachings; clean, effective, with intelligent use of space.

The implementation seeks to take full advantage of reStructuredText to enable many of Tufte's ideas in simple "markdown" without the need for codewords or other complications. reStructuredText's base definitions already support many important features: notes and citations, quotes and epigraphs, well featured sidebars, simple and complex tables, code displayes, as well as inline math notations without calling out to MathJax.

B-side was also implemented to take advantage of Hugo's flexibility. For example, use of Hugo's page type variable allows for different layout options (e.g. supporting a page type with one wide single column instead of the theme's default main-plus-side column layout).

Finally, the underlying CSS was crafted to provide responsive display for all reStructuredText markup and directives, specifically both tables as well as lists can have alternative views that are tailored for narrow displays. Additionally, the CSS has definitions that allow options to customize the display to suit Tuftesque tastes, e.g. a "bulletless" class for lists.

Recognition

The layout and style of this theme was originally inspired by Tufte CSS and the other projects following the ideas of Edward Tufte.

The author learned most of what he has learned about Hugo themes by studying the excellent example of the Ananke theme. I am very grateful for the clean implementation and the helpful comments.

Also, many, many thanks to all the folks who make Hugo such an effective tool.