Tuften

Status

Open

Theme name

Tuften

Submitter

Gary Cunningham-Lee

Author

Zukathemes (Gary Cunningham-Lee)

Included in Tiki package

Yes

Website

https://zukathemes.com

License

LGPL

Screenshot image

display218

Description (full)

Tuften is a theme for Tiki Wiki CMS Groupware based on Tufte CSS. Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte's books and handouts. Tufte's style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

The idea of the original Tufte CSS was essentially cribbed wholesale from Tufte-LaTeX and R Markdown's Tufte Handout format. The Tuften theme for Tiki is a derivative implementation.

Integrating the Bootstrap CSS framework, the Tufte style has been worked up as the Tuften theme for Tiki Wiki CMS Groupware, with typography and other details implemented by means of appropriate rules and properties in CSS. As for the "sidenotes", Tiki already has a Footnote "wiki plugin", so this was adapted to enable the Tufte sidenotes and margin notes and yet remain functional for the conventional page-bottom footnotes used by Tiki's visual themes other than Tuften.

Fundamentals

Use section tags around each logical grouping of text and headings.

Headings

Tufte CSS uses h1 for the document title, h2 for section headings, and h3 for low-level headings. More specific headings are provided for in Tiki by the underlying Bootstrap framework, but are not supported by Tufte CSS (or the Tuften theme).

In his later books, Tufte starts each section with a bit of vertical space, a non-indented paragraph, and sets the first few words of the sentence in small caps. For this we use a Div wiki plugin with the class newthought The vertical space is accomplished separately, through the section class. The vertical space may be unnecessary when using this technique to replace h2 elements, as in this paragraph. The main thing is to be consistent: don't alternate use of header elements and the newthought technique. Pick one approach and stick to it.

Color

Although paper handouts obviously have a pure white background, the web is better served by the use of slightly off-white and off-black colors. Related colors like panel and panel heading backgrounds are also derived as small incremental changes from the base body background color.

Fonts

In print, Tufte uses the proprietary Monotype Bembo font. A similar effect is achieved in digital formats with the now open-source ETBook, which this theme supplies with a @font-face reference to a .ttf file.

Also notice how Tufte CSS/Tuften includes separate font files for bold (strong) and italic (emphasis), instead of relying on the browser to mechanically transform the text. This is typographic best practice.

Links in this theme match the body text in color and do not change on mouseover or when clicked. These links are underlined, since this is the most widely recognized indicator of clickable text. However, because most browsers’ default underlining does not clear descenders and is so thick and distracting, the underline effect is instead achieved using CSS trickery involving background gradients instead of standard text-decoration. Credit goes to Adam Schwartz for that technique.

Lists

Tufte points out that while lists have valid uses, they tend to promote ineffective writing habits due to their "lack of syntactic and intellectual discipline". He is particularly critical of hierarchical and bullet-pointed lists.

For these reasons, Tufte CSS encourages caution before turning to a list element; also, to visually de-emphasize the list construct, bullet points are removed from unordered lists by default.

Sidenotes

One of the most distinctive features of Tufte's style is his extensive use of sidenotes. Sidenotes consist of 1) a superscript reference number that goes inline with the text, and 2) a sidenote containing content that repeats the superscripted number to reinforce its connection to the text. To add a sidenote, use a Tiki FOOTNOTE wikiplugin where you want the reference to go. In the Tufte style, each footnote has its own footnote area, immediately to the right of the footnote.

In larger viewports, Tufte CSS uses the right margin for sidenotes, margin notes, and small figures.

To reserve the open area for sidenotes and to limit this layout to pages that do in fact have sidenotes, Tiki's "Categories" feature plays a part. A "Sidenotes" category should be created at tiki-admin_categories.php, and the wiki page should be assigned to this Sidenotes category when the page is created or edited to contain sidenotes.

Disclaimer

The Tuften Tiki theme was made following a pretty limited exposure to the examples and discussions of Edward Tufte's ideas about the display of information. Any more knowledgeable Tufte advocates' corrections or suggestions for improvement of the theme are welcome in the Tiki.org themes forum or via this contact form.

Installation

When the theme archive is expanded, its files will be in a directory (folder) that contains all the theme files in their necessary subdirectories. Install the theme by transferring this directory to the Tiki site's "themes" directory. After refreshing the site's Look and Feel admin page, the theme name will appear in the theme selector, and can be selected. Any layout template can be used with this theme.

To reserve the open area for sidenotes and to limit this layout to pages that do in fact have sidenotes, Tiki's "Categories" feature plays a part. A "Sidenotes" category should be created at tiki-admin_categories.php, and the wiki page should be assigned to this Sidenotes category when the page is created or edited to contain sidenotes. (Note that the category name - sidenotes or Sidenotes - must be spelled correctly for the function to work - both capitalized and lower-case spellings are acceptable, to match the category naming practice at the site.)

On tiki-admin.php?page=category, be sure the "Categories used in templates (.tpl files)" checkbox is checked, and in the selector of "Categories to add as CSS classes to <body>", choose your Sidenotes category. This will add the class name to the body tag that's needed to position the content and sidenotes columns.

Description (brief)

Implementing the design principles of Edward Tufte

Bootstrap version compatibility

Bootstrap 5

Live demo

http://themes.tiki.org/Tuften

Theme file package (Bootstrap 3)

 

Theme file package (Bootstrap 4)

 

Theme Option 1 name

Theme option 1 screenshot

 

Theme Option 2 name

Theme Option 2 screenshot

 

Theme Option 3 name

Theme Option 3 screenshot

 

Theme Option 4 name

Theme Option 4 screenshot

 

Theme Option 5 name

Theme Option 5 screenshot

 

In the case of a theme adapted for Tiki

Section for original theme information.

Source theme author

Dave Liepmann and other project contributors

Source theme website

https://github.com/edwardtufte/tufte-css

Source theme license

MIT