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.


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.


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.