This is me who asked the question. I just found jekyll-theme-tufte, and I guess I could use Convert a Jekyll template to Blot. 😅

Ok… that was tougher than I optimistically thought for a moment. I think it is outside my abilities. /OP

I'll take this as a request for a template! I do convert templates from Jekyll to Blot every so often, and I'll make a note of this one

Thank you! It is really a quite nice template, would also fit Blot very well. :-)

Has anyone got this working? Or have any suggestions on how to implement it? https://edwardtufte.github.io/tufte-css/

From what I remember of Tufte-css it's virtually classless but has a specific spin on "aside" placement of footnotes. I don't think that blot allows to do anything with the footnotes on template side, but it should be possible to use html tags in text files. I want to look into it, and perhaps create a separated long-read template-view for my https://lev.lc/site .

If David please could point to a piece in docs where markup for the footnotes is mentioned

I asked ChatGPT (with Deep Research) to help me and got quite a long way there. Here is the answer, where the first solution did work quite well (even though some style conflicts have to be resolved):

Great! I’ll create a detailed step-by-step guide for integrating Tufte CSS into your Blot.im website. This will include:

1. Understanding Blot.im’s template system and how to modify it.
2. Adding Tufte CSS to an existing template or creating a new template based on it.
3. Adjusting styles to ensure compatibility with Blot.im’s Markdown-based content.
4. Testing and troubleshooting any issues that may arise during implementation.

I’ll get back to you soon with the guide.

Integrating Tufte CSS into a Blot.im Site: Step-by-Step Guide

Integrating Tufte CSS into your Blot.im blog (for example, a site like tormodotterjohansen.se) can give your posts a clean, book-style layout with sidenotes and elegant typography. This guide will walk you through the process in detail. We’ll cover how Blot’s template system works, how to modify or create a template to include Tufte CSS, how to use Tufte’s features in your Markdown posts, and tips to avoid common issues. By following these steps, even a user with limited template experience can apply Tufte CSS to their Blot.im site.

Understanding Blot.im’s Template System

Blot.im uses a templating system (based on Mustache) to control your site’s layout and style. The content of your posts (written in Markdown) is inserted into HTML templates which determine how each page looks (Mustache - Blot) (Reference - Blot). Here are key points to understand:

• Templates and Files: A Blot template is a set of files (HTML, CSS, etc.) that define the site’s structure. For example, templates usually include an index.html (for the homepage or listing posts), an entry.html (for individual post pages), possibly a layout.html or partials, and a style.css for styling. Blot automatically uses these files to render your content. The template files contain Mustache tags like {{entry.title}} or {{{entry.html}}} which Blot replaces with your post’s title, content, etc., when generating pages (Mustache - Blot) (Reference - Blot).

• Built-in Templates: Blot.im provides many built-in templates (e.g., “Blog”, “Essay”, “Magazine”, etc.) that you can use as a starting point (Templates - Blot) (Templates - Blot). If your site is already using one of these, you can fork it to customize it. Forking creates a copy of the template in your account that you can edit. In your Blot dashboard under Settings > Template, select the current template, click Fork, then Install the forked version (it will be named “Copy of ...”). Now you can click Edit and access the source files (How to edit my site's style sheet? - Blot). For example, you can open the style.css or HTML files and modify them.

• Custom Templates (Local or From Scratch): You can also create a template from scratch. Blot offers a “Blank” or “Empty” template which has minimal structure, or you can start by duplicating an existing simple template. Another method is to edit templates locally: you can download a template’s ZIP, unzip it, and place it in the Templates folder of your Blot directory (the folder synced to Dropbox/Git/etc) (Get started - Blot). Blot will detect it and make it available in the dashboard for you to select (Get started - Blot). This is more advanced, but it allows you to use your own editor and even version control. For most users, using the web-based editor after forking a template is the simpler route.

• How Styles are Applied: The template’s CSS (usually a file named style.css) is linked in the head of your pages. Blot automatically serves this file at a URL (accessible via a Mustache tag {{blog.cssURL}} which inserts the correct path with a cache-busting query string (Reference - Blot)). In many templates, the HTML files include a line like <link rel="stylesheet" href="{{blog.cssURL}}"> to load the template’s CSS. Some templates also include additional CSS files (for example, a layout.css for special layout tags) by linking them in the HTML. Keep this in mind, as we may need to add the Tufte CSS here.

Now that you understand the basics, let’s move on to integrating Tufte CSS.

Modifying an Existing Template to Incorporate Tufte CSS

If you’re already using a Blot template and want to add Tufte CSS to it, you can do so by editing that template’s files. The following steps outline how to fork your current template and modify it to include Tufte CSS:

1. Fork Your Template: In your Blot dashboard, go to Settings > Template. If you’re using a built-in template, click Fork to create an editable copy, then click Install to apply the forked version (How to edit my site's style sheet? - Blot). This ensures you’re not editing the original directly (and you can always revert to it if needed).

2. Open the Template Editor: After forking and installing the copy, click Edit to open the template’s source code editor. You will see a list of files (HTML, CSS, etc.) in a sidebar. Locate the main HTML layout files – for a simple blog these might be index.html (for the homepage or list of posts) and entry.html (for individual post pages). Also locate style.css (the main stylesheet).

3. Include the Tufte CSS Stylesheet: There are two ways to integrate Tufte CSS: linking an external CSS file or merging it into your template’s CSS. The easier approach is to link to Tufte CSS as an external stylesheet in your template’s HTML:

   • Obtain the Tufte CSS file. You can use the official CSS via a CDN for simplicity. For example, the CDNJS link is https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css. (Using the minified version is fine for production.)
   • In the <head> section of your template’s HTML (e.g., in index.html and entry.html, or a common header include if your template has one), add a line:

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css" integrity="sha512-..." crossorigin="anonymous">
     

     (You may copy the exact CDN link and integrity hash from the Tufte CSS CDN page for the latest version.)
   • Place this after the existing {{blog.cssURL}} link. By loading Tufte CSS after your main style.css, you ensure Tufte’s styles can override any baseline styles if there’s overlap. (If you prefer to host the CSS yourself, you could upload tufte.css to your Blot folder – e.g., in an _Assets or _static folder – and link it with a path like <link rel="stylesheet" href="/_Assets/tufte.css">. Blot can serve static files from your folder; just use a leading slash for the correct root path (CSS and JS files in folders not working - Blot). Make sure to also upload the et-book font files that come with Tufte CSS if you self-host, as Tufte CSS references them for its typography.)

4. Merge Tufte CSS into style.css (Alternative): Instead of linking a separate file, you could open style.css in the editor and paste the entire content of tufte.css at the end (or use an @import rule). However, be cautious: copying the CSS in will bring in a lot of styles that might override or conflict with your template’s existing CSS. If you choose this method, consider commenting out or removing any conflicting styles in the original CSS. For beginners, the external link method in step 3 is simpler to manage (and easy to disable if something goes wrong).

5. Adjust the HTML Structure (if needed): Tufte CSS has some conventions for markup (like using <section> for grouping content, and particular classes for sidenotes). You don’t have to change your HTML structure, but a few tweaks can help Tufte CSS work as intended:

   • Wrap your post content in an <article> or <section> element. Many Blot templates already use an <article> for each post. If not, you can modify entry.html to wrap the {{{entry.html}}} (the post body) in a section. For example:

     <article>
       <h1>{{entry.title}}</h1>
       <p class="subtitle">{{entry.date}}</p>
       <section>
         {{{entry.html}}}
       </section>
     </article>
     

     This isn’t strictly required, but Tufte CSS documentation notes that enclosing the main text in a section improves sidenote positioning on large screens (Tufte CSS).
   • Ensure that the <head> of your HTML includes the Blot CSS link and now the Tufte CSS link, as mentioned. Also, verify that the <body> or outer container in your template doesn’t have a fixed width that’s too narrow. Tufte CSS uses wide margins for sidenotes on large screens, so a content area that’s about 55% of the page width is typical. If your current template has a very narrow content column, you might want to widen it or remove any width restrictions in style.css.
   • If your template includes any extra CSS or scripts (for example, some templates use a layout.css for special layout tags (Layout tags - Blot)), consider whether you need them. The Blot “layout tags” (like {<<} for margin text) might conflict or be redundant with Tufte’s margin notes. It’s okay to remove the <link> to layout.css or similar in the head if you plan to rely solely on Tufte CSS for styling footnotes/notes. Keeping unnecessary CSS could override or clash with Tufte’s styles.

6. Save Your Changes: After editing the HTML and adding the stylesheet link, save the template files in the editor. Blot will rebuild your site with these changes as soon as you save.

At this point, your site’s pages are loading Tufte CSS. Next, we’ll talk about using Tufte CSS features in your actual content.

Creating a New Template from Scratch (if Needed)

If you prefer not to modify an existing template or if none of the built-in ones fit your needs, you can create a fresh template that integrates Tufte CSS from the ground up. This might be a good option if you want a very minimal design using primarily Tufte’s style. Here’s how you can do it:

• Start with a Blank Template: In the Templates section of the Blot dashboard, find the “Blank” or “Empty” template (Templates - Blot). Install it (you may need to fork it first if the system requires). This provides a bare-bones starting point. The blank template likely contains a simple HTML structure and minimal CSS. Once installed, click Edit > Source code to open it.

• Add HTML Structure: Build out the basic HTML files for your site. For a simple blog, focus on index.html and entry.html:

  • index.html: This can list recent posts with titles and links. For example, it might loop through posts using Mustache tags and output a list of titles with dates.
  • entry.html: This will display a single blog post. You should include placeholders for the post title, date, content, etc. For instance:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>{{entry.title}} – {{blog.title}}</title>
      <link rel="stylesheet" href="{{blog.cssURL}}">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css" />
    </head>
    <body>
      <header>
        <h1>{{blog.title}}</h1>
        {{#blog.menu}}<a href="{{url}}">{{label}}</a> {{/blog.menu}}
      </header>
      <article>
        <h1>{{entry.title}}</h1>
        <p class="subtitle">{{entry.date}}</p>
        <section>
          {{{entry.html}}}
        </section>
      </article>
      <footer>
        <a href="{{blog.feedURL}}">RSS</a> <!-- Example footer links -->
      </footer>
    </body>
    </html>
    

    (This is a simplified example to illustrate the structure.) The key part is linking the Tufte CSS in the head, as shown above. You can also include your own style.css via {{blog.cssURL}} – this will load the style.css file from your template. In that file, you can add any custom overrides (for example, tweak colors or spacing, or add a bit of your own style on top of Tufte’s).

• Include the Required Files: Make sure to have a style.css file (even if it’s initially blank or contains only the basics) because Blot expects one. You can copy some minimal styles from another template or leave it empty to rely entirely on Tufte CSS. Also include a feed.xml template if you want an RSS feed (you can copy it from another template). The Blank template might already include these essential files.

• Integrate Tufte CSS: As with modifying an existing template, ensure the Tufte CSS file is linked. Since you are building from scratch, you have full control: simply include the link tag to the CDN (or host the CSS file and link it). Additionally, copy the et-book font files to a folder (like et-book) in your site and adjust the CSS path if you are self-hosting Tufte CSS. If using the CDN link, the fonts will load from there automatically.

• Use Mustache Tags Correctly: In your new template files, use the correct Mustache tags to insert content. For example, {{blog.title}} for your site title, {{#entries}}...{{/entries}} loop to list posts, {{{entry.html}}} for the full HTML of a post, etc. You can refer to Blot’s template reference for available variables (Reference - Blot) (Reference - Blot). If unsure, it helps to consult an existing template’s code to see how it structures things.

Once your new template files are created and saved, you can upload them to Blot. If you built it via the web editor by modifying the Blank template, just save and use it. If you developed it locally, place the folder in /Templates/ in your Blot folder and then select it from the dashboard (Get started - Blot). You now have a clean slate with Tufte CSS integrated.

Linking and Using Tufte CSS in Blot.im’s Markdown Content

With Tufte CSS included in your site’s template, you need to know how to use its features in your posts. Blot.im’s content is Markdown-based, but Markdown allows HTML snippets, which is how we can apply Tufte-specific styling (like sidenotes and margin notes). Here are tips for using Tufte CSS in your posts:

• Basic Typography and Styles: Simply by including Tufte CSS, your site’s typography and layout will change. Tufte CSS sets a distinctive style for body text, headings, blockquotes, tables, and more. For example, it uses ET Book fonts for a classic look, adjusts heading sizes (<h1>, <h2>, etc.), and styles blockquotes with italics and source attribution. You don’t need to do anything special in Markdown to get these effects – they’ll apply to normal Markdown elements automatically. Write your posts as usual with headings, paragraphs, lists, etc., and then view them to see the new appearance. (Make sure to use top-level # for your post titles in Markdown only if your template doesn’t already insert the title; otherwise you might get two titles. Often, the template uses the file’s Title metadata or first heading. Adjust accordingly so you don’t have duplicate titles.)

• Footnotes to Sidenotes: One hallmark of Tufte’s style is turning footnotes into sidenotes (notes in the margin). By default, if you use Markdown footnote syntax on Blot, it will render as traditional footnotes at the bottom of the post (Markdown - Blot). For example, writing This is a fact[^1] in your text and then defining [^1]: The footnote text. at the end will produce a numbered footnote. Tufte CSS alone does not automatically convert these to sidenotes. To use real sidenotes as in Tufte’s style, you have two options:

  • Manual sidenote markup: Tufte CSS defines a specific HTML structure to create sidenotes. It involves inserting a small reference number (that toggles the sidenote) and the sidenote content in a span with class sidenote. For example, per Tufte’s documentation, you would write something like:

    Here is a fact <label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/> <span class="sidenote">This is the sidenote content.</span> in the text.
    

    This looks complex, but in essence:
    • The <label> and <input> work together to allow the note to toggle visibility on small screens (they are invisible in print/large layout). The for and id attributes must match uniquely (e.g., sn-1, sn-2 for each note) (Tufte CSS).
    • The <span class="sidenote"> holds the note content that will appear in the margin on large screens. (Tufte CSS) You can include this HTML directly in your Markdown file (Markdown will pass it through). When rendered, Tufte CSS will place “(1)” as a tiny reference and the note in the margin. This is how you achieve true sidenotes. It’s a bit of hand-coding, but you might use it for key asides or citations.
  • Inline (margin) notes without numbers: If you want a note in the margin without any number indicator, Tufte CSS calls this a margin note. The process is similar but with slight changes: you’d omit the number and use a symbol (like ⊕) as the toggle on small screens. In HTML, you’d use class="marginnote" for the span, and still include a label/input for toggling (with class="margin-toggle") (Tufte CSS) (Tufte CSS). For example:

    <label for="mn-1" class="margin-toggle">⊕</label><input type="checkbox" id="mn-1" class="margin-toggle"/><span class="marginnote">This is an unnumbered side note.</span>
    

    This would show a ⊕ in the text (which on click shows the note on mobile), but on a wide screen the note just sits in the margin without a numbered reference. (Tufte CSS)
  • Using Markdown footnotes as-is: If the manual HTML approach is too daunting or too much work for every note, you can continue to write standard Markdown footnotes. They will appear at the bottom as usual. You might still get some benefit from Tufte’s typography on those (for instance, the footnotes section text will be styled with Tufte CSS’s font). They just won’t be in the margin. You could also mix approaches: use normal footnotes for most things, and use a manual sidenote for a particularly interesting comment you want in the margin.

  Remember, Tufte’s sidenotes are primarily a visual enhancement. It’s perfectly fine to use the simpler footnotes if you prefer – the content will still be accessible. If you do use the sidenote markup, be careful to ensure each note’s id (and corresponding label’s for) is unique on the page, otherwise toggling might break.

• Other Tufte CSS Features: Tufte CSS provides additional classes you can use in your Markdown (by embedding HTML tags with those classes):

  • Epigraphs: For a stylized blockquote at the start of an article (often italic centered text with a source), you can wrap a quote in <blockquote class="epigraph"> and put the source in a <footer> tag inside it. This might require writing that section in HTML in your Markdown file.
  • New Thought: If you want to start a section or paragraph with a small-caps lead-in (like an initial capital style), wrap the first few words in <span class="newthought">...</span>. For example:

    <span class="newthought">Once upon a time</span>, there was a curious developer...
    

    This will render “Once upon a time” in small-caps and slightly larger text, as per Tufte CSS convention (Official site and release of the Micro.blog Tufte theme - GitHub).
  • Smallcaps and Italics: Tufte CSS might style <abbr> or certain elements as small caps. If you have abbreviations, you can use <abbr title="...">ABC</abbr> and they might get special styling. You can also add a class manually, e.g., <span class="small-cap">text</span> if needed (check Tufte CSS documentation or CSS file for the exact class name, as it may be just using the font-variant: small-caps on certain tags).
  • Figures and Captions: You can use <figure> and <figcaption> to take advantage of Tufte’s figure styling. Tufte CSS has a style for full-width figures (class fullwidth) and for margin figures (class marginfigure possibly). For instance, an image with a caption could be:

    <figure>
      <img src="...image.jpg" alt="Demo" />
      <figcaption>This is a caption for the figure.</figcaption>
    </figure>
    

    By default, figures might behave like block elements. If you want it to span the full page width, add class="fullwidth" to the figure. For a small figure in the margin, you could add class="marginnote" to the figure (and typically such images should be small).

  Whenever you use raw HTML in Markdown, ensure it’s properly closed and nested, as Markdown can sometimes behave unpredictably if the HTML is not well formed. Test each usage to make sure it renders correctly.

• Markdown Extensions vs. Tufte: Blot has some Markdown extensions (like the layout tags mentioned earlier, or math and citation support). Using Tufte CSS doesn’t disable those, but you should decide which approach to use. For example, Blot’s layout tags {<<} can put text in the left margin using the built-in CSS (Layout tags - Blot). If you prefer Tufte’s method with marginnote, stick to one method to avoid confusion. It might be best to not use Blot’s {<<} or {>>} tags if you are doing sidenotes with Tufte, to keep the behavior predictable. Consistency will make maintenance easier.

In summary, link Tufte CSS in your template and then use a mix of standard Markdown and occasional HTML spans/tags to apply Tufte-specific styling in your posts. Start simple – perhaps get the overall typography and look right first, then gradually try adding a sidenote or margin note in one post as an experiment.

Potential Issues and Troubleshooting Tips

Integrating a new CSS framework into an existing template can introduce some challenges. Here are some potential issues you might encounter and how to address them:

• Layout Conflicts: Your original template’s CSS might conflict with Tufte CSS. For example, if the template sets a max-width on content or padding that differs from Tufte’s expectations, the layout may look “off.” If you notice elements not aligning or margins looking strange, inspect the CSS:

  • You can remove or override conflicting rules. In your style.css (which loads before Tufte CSS if you followed our suggestion), you could neutralize some styles. Or, if the problematic styles are in style.css itself, just edit or delete them.
  • Common conflicts might be with margins, line-heights, or list styles. Tufte CSS has its own ideas for those. For instance, if your template had a custom style for <blockquote> or <h2>, you might see a mix of styles. Consider commenting out those parts of the CSS. It’s okay to experiment — you can always revert to your fork’s original or the built-in template if it goes wrong.
  • Also, check if an additional CSS like layout.css is included (for Blot’s special tags) (Layout tags - Blot). If you’re not using those features, you can safely remove that link to reduce interference.

• Typography and Font Issues: Tufte CSS uses ET Book by default. If you linked via the CDN, the font files should load (they’re included on the CDN (tufte-css - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers) (tufte-css - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers)). If you hosted the CSS yourself but forgot the fonts, you’ll notice a fallback font is being used (which may still look okay). If the typography doesn’t match Tufte’s examples, double-check that the fonts are loading. You might use your browser’s developer tools (Network tab) to see if the .woff font files are being fetched or if there are 404 errors. To fix font issues, ensure the et-book font files are present and the paths in CSS are correct. You can also choose not to use ET Book – in that case, consider editing the Tufte CSS (or overriding in your own CSS) to use a web-safe serif font or one of your choosing.

• Markdown Footnotes Rendering: If you use Markdown footnotes in a post and also attempted manual sidenotes, you might end up with both a margin note and a footnote for the same reference. Remember that if you put HTML for a sidenote in the text, do not also include a regular Markdown [^note] for it. Do one or the other to avoid duplication. If you see a footnote number but also a margin note, you may have accidentally left a footnote reference in the text. Remove or comment it out. Conversely, if you expected a sidenote but it’s showing up as a footnote at the bottom, it means the Markdown processor didn’t recognize your HTML as a replacement. This can happen if the HTML isn’t placed correctly. Make sure the sidenote HTML is all in one paragraph and not interrupted by Markdown line breaks that convert to <p> tags in between.

• Mobile View & Responsiveness: On narrow screens (like phones), Tufte CSS hides sidenotes/margin notes by default – they become hidden behind a small icon or number which can be tapped (that’s what the <label> and <input> are for). Test your pages on a phone or by narrowing your browser window. If you see that notes are not accessible or something looks wrong, ensure the markup is correct. Each sidenote’s <input type="checkbox"> should be right after the label and before the span, as shown in the docs (Tufte CSS). If the notes still don’t appear on mobile when tapping the number, it could be an ID mismatch or a missing piece of the structure.

  • Another mobile issue can be overall page width. If you find that the page is too wide on mobile (causing horizontal scrolling), it might be because Tufte’s default margins or wide figure styles are extending off-screen. Tufte CSS is designed to be responsive, so this shouldn’t normally happen, but if you added custom styles or very wide images, it could break. Ensure images have max-width: 100% (the Blank template’s CSS or Tufte CSS likely handles this). If not, add img { max-width: 100%; height: auto; } to your CSS.

• CSS Specificity and Overrides: If you want to adjust something in Tufte’s style – say the color of links or the background color – you can override it by adding rules to your style.css after the Tufte CSS import. Because Tufte CSS is loaded later, your overrides need to be either inline in the HTML (not recommended) or you can simply re-declare them with a stronger selector or !important. For example, Tufte CSS might set a { color: #1560bd; }. If you want a different link color, in style.css add a { color: darkblue !important; } or a more specific selector if needed. Use such overrides sparingly and test them.

• Check for Broken HTML: If after integrating the CSS your page layout is completely broken, it could be a typo or error in the template HTML. One missing closing tag can throw off everything. Go back to the template editor and carefully check the changes you made around the <head> or wrapper elements. Blot’s editor might not automatically highlight errors, so use an HTML validator or compare with the original template to spot differences. Common mistakes include accidentally removing a {{/entries}} in the index loop or not closing a <section> tag.

• Use the Debug Mode: Blot has a debug mode (?debug=true at the end of a URL) that shows the data context for a page (Mustache - Blot). This is more for template logic, but it can help ensure that, for example, entry.html is indeed being used and that your template is active. If your changes don’t appear at all, maybe the template isn’t applied – double-check in the dashboard that your forked/new template is selected as the active one on your site, and not still the old one.

Throughout troubleshooting, make one change at a time and refresh your site to see the effect. Because Blot instantly updates on save, you can iteratively tune the template and content. It’s also wise to keep a backup of your template (you can copy the code out to a text file) before making major changes, so you can restore it if needed.

Testing Changes Before Deploying Them Live

When working on your site’s design, especially if it’s already public, you want to avoid a situation where you accidentally break the site for your readers while making changes. Here are some strategies to test your Tufte CSS integration safely:

• Use Blot’s Preview Features: In the template editor interface, there is an Expand Preview option (eye icon) which shows a live preview of your site with the current template changes. This preview is not permanently applied until you save and exit, so use it to click around and see how things look. Keep in mind that the preview might use sample content if your site is new. If possible, have some test content (or your actual posts) and navigate through them in preview.

• Drafts and Hidden Posts: If you want to test how a complex sidenote or layout will look in a specific post, you can create a draft post in your Blot folder (place it in the Drafts subfolder). Drafts won’t appear to regular visitors. You can then manually navigate to that draft’s URL while logged in (or use the preview link Blot provides for drafts) to see it. This way, you can experiment with Markdown and HTML for Tufte features on a draft post without exposing it publicly. Once you get the format right (say, a series of sidenotes working well), you can copy that into a real post.

• Secondary Test Site (if available): If your Blot.im plan allows multiple sites or if you have a trial site, you could use a separate site as a testing ground. For example, create a new site, maybe at a different subdomain, and use it to install your developing template. Populate it with some dummy posts (even copy some from your main site) and see how the Tufte integration works there. This isn’t always feasible for everyone, but it’s the safest as it separates testing from your live site.

• Local Development Setup: For the more technically inclined, Blot can be run locally on your machine with a development setup (Tutorials - Blot) (this requires Node.js and some setup). If you go this route, you can edit the template on your computer with immediate local preview. However, for most users, the above in-browser methods are easier.

• Gradual Rollout: If you’re unsure about the new design, consider applying the template during a low-traffic time. Since Blot can switch templates almost instantly, you can always switch back to the previous template in a pinch. Keep a copy of your old template or remember which built-in template you used. After integrating Tufte CSS, browse your site thoroughly: check the homepage, a couple of blog posts (especially ones with elements like images, footnotes, code blocks) and any special pages (tags, archive, about page). This ensures nothing critical is broken. It’s a good idea to test on multiple devices or screen sizes – e.g., your laptop and your phone – to see both desktop and mobile behavior.

• Troubleshoot in Real-Time: If you spot an issue while testing (for example, perhaps the margin note overlaps some text), you can often fix it quickly by adjusting the template or CSS and saving. Use your browser’s developer inspector to examine the CSS rules in effect and tweak as needed. Since Blot updates immediately, you can just refresh after each tweak. Just remember to save final changes.

• Backup Your Work: Once you have everything working, download a copy of your template (Blot’s editor has an option to download the template folder as a ZIP). This way, you have a backup of the “Tufte-enabled” template. If you ever need to make big changes or try a different approach, you won’t lose the work you’ve done so far.

By following these testing practices, you can confidently apply the new design. For example, you might first apply the new template only after you’ve seen in preview that all your recent posts look good with the sidenote styling. Should anything go wrong, you can revert quickly, since your old template is still available (forking a template doesn’t delete the original; you can re-install the original from the Templates gallery if needed).

Conclusion: Integrating Tufte CSS into a Blot.im site involves customizing your template to include a new stylesheet and possibly adjusting your content markup for special features like sidenotes. By understanding how Blot templates work and proceeding carefully—forking the template, adding the CSS link, using Tufte’s HTML conventions in your Markdown, and testing thoroughly—you can achieve a Tufte-inspired design even if you’re not deeply experienced in web design. The result will be a beautifully typeset blog with elegant margin notes and a clean layout, combining Blot.im’s simplicity with Tufte’s aesthetic. Happy customizing, and remember you can always ask the Blot community or refer to Blot’s documentation if you get stuck on a particular step! (How to edit my site's style sheet? - Blot) (CSS and JS files in folders not working - Blot)

That is frankly incredible. Some of it is incorrect (e.g. the expand preview feature) but so much isn't! Thanks for sharing