History: Tuften
Preview of version: 2
<a href="dl218?display" class="cboxElement" data-box="box" title="Theme preview"><img src="dl218" class="img-fluid screenshot" alt="theme screenshot"></a>
</div> <div class="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.
</div> </div> <div class="col-sm-6"> <div class="theme_details"> <table class="table table-striped mb-4"> <tr> <td>Author</td> <td>Zukathemes (Gary Cunningham-Lee)</td> </tr> <tr> <td>Author's website</td> <td><a href="https://zukathemes.com" target="_blank">https://zukathemes.com</td> </tr> <!-- <tr> <td>Creation date</td> <td>Zukathemes (Gary Cunningham-Lee)</td> </tr> <tr> <td>Last update</td> <td></td> </tr> --> <tr> <td>License</td> <td>LGPL</td> </tr> <tr> <td>Bootstrap version compatibility<br> Note:<br> Bootstrap 3 ( Tiki 13 18)<br> Bootstrap 4 (Tiki 19 24) </td> <td>Bootstrap 5</td> </tr> <tr> <tr> <td colspan="2"><strong>If adapted from another theme...</strong></td> </tr> <tr> <td>Source theme author</td> <td>Dave Liepmann and other project contributors</td> </tr> <tr> <td>Source theme website</td> <td>https://github.com/edwardtufte/tufte-css</td> </tr> <tr> <td>Source theme license</td> <td>MIT</td> </tr> </table> <h3>Download</h3> <table class="table table-striped margin-bottom-lg"> <tr><td><h4>For Bootstrap 3</h4></td><td class="text-center"><a href=" " class="btn btn-success btn-lg"><i class="fa fa-download"></i> <small>Download</small></a></td></tr></table> <div style="display:none"> <div class="row"> <div class="col-sm-6"><a href="http://themes.tiki.org/Tuften" class="btn btn-primary btn-lg btn-block" target="_blank"><i class="fa fa-laptop"></i> Demo</a></div> </div> <h3>Theme options</h3> <div class="row"> <div class="col-xs-6 margin-bottom-sm"><img src=" " class="img-fluid screenshot" alt="theme screenshot"><br><strong></strong></div><div class="col-xs-6 margin-bottom-sm"><img src=" " class="img-fluid screenshot" alt="theme screenshot"><br><strong></strong></div><div class="col-xs-6 margin-bottom-sm"><img src=" " class="img-fluid screenshot" alt="theme screenshot"><br><strong></strong></div><div class="col-xs-6 margin-bottom-sm"><img src=" " class="img-fluid screenshot" alt="theme screenshot"><br><strong></strong></div><div class="col-xs-6 margin-bottom-sm"><img src=" " class="img-fluid screenshot" alt="theme screenshot"><br><strong></strong></div> </div> </div> </div> </div> </div>