Grid CSS to Create Left Sidebar and a Story River

Tips & Tricks
#1

Refs

[1]. Grid CSS to Create a Vertical Tab Like Structure
[2]. Grid CSS in Tiddlywiki Demystified

Proof of Concept

Following to Ref[1-2] above it is not difficult to create a new layout for Tiddlywiki with left sidebar and customized story river.

img_720_%pn

Experiment

To give a try

  1. Open https://tiddlywiki.com/prerelease
  2. Download hirad-tst.json (1.2 KB)
  3. Drag and drop into https://tiddlywiki.com/prerelease
  4. Open hirad-tst the one just imported!
  5. Close sidebar and see the new layout inside a tiddler
  6. It is a left sidebar with customized story river!

Special thanks to @btheado.

  • This is a very simple implementation!
  • This can be further developed to acts as a new theme
  • It teaches how to use Grids CSS in Tiddlywiki
3 Likes
Gird CSS to Create an Elegant Carousel and Image Slider in Tiddlywiki
#2

I like these solutions in search of a problem. Good stuff, @Mohammad !

#3

Nice @Mohammad and example of a solution inside the box, the tiddler box. It makes it easier to maintain multiple layouts as it is within a tiddler. It seems this kind of approach is ideal for tiddlywiki enthusiasts, I was not sure for end users until you consider this.

In the pre-release the additional support for view edit templating we will be able to switch in / out new templates on a per-tiddler basis without core changes. I can see a custom view template for your example “layout inside a tiddler” to perhaps even disguise that it is in a tiddler, at all. For example your POC could be the content of $:/config/EmptyStoryMessage.

Try it, I did and its interesting, now just add a switcher, one could have a separate tiddler for each project with its own left menu, story river etc… but appear as it it is the actual story.

2 Likes
#4

Just want to add, I could imagine in your POC the Left hand side menu being dedicated to a particular project, including a project switcher and a search restricted by items belonging to that project (perhaps with the help of the Kin filter to rule in a hierarchy not just tiddlers with a particular tag.