Proposal: Evolution of standard layout options

#1

I’m enjoying following what @BurningTreeC is doing with the new TiddlyFlex - very impressive! That said, it has gone far past what I’m looking for personally, and thus I’m left with trying to figure out how to disable / remove the parts I don’t need. This has happened many times throughout the years, and it makes me think of the new user experience.

One of the neat things about the default empty.html is that it gives you some easy ways to tweak the layout without need for CSS knowledge. The core has the Theme Tweaks area (by the way, I thought I remembered that the default switched from fixed-fluid to fluid-fixed a while ago? Doesn’t seem so):

image
image892×181 7.53 KB

image
image889×464 15.5 KB

As I think about how this could evolve, I started thinking about some of the more common requests and tutorials I’ve seen:

  1. Move the sidebar to the left
  2. Add a sidebar on the other side
  3. Add a top bar (and occasionally a bottom bar).

So, could the standard layout options be improved to:

  1. Allow the above options out of the box but maybe disabled?
  2. Implement them in a way that by default empty.html doesn’t look different (use current settings as defaults - I think a visually simple starting point helps)
  3. Allow for these adjustments without CSS knowledge?

Unfortunately, I don’t have the CSS knowledge to do this - especially not in a robust method. I’ve tried many times over the years but always get stuck by things like sticky titles, overlaps, etc.

Here’s what I have in mind to include in the Control Panel - both a visual guide, and areas for new users to key in values. I went one step further and put boxes for padding in as well, as it is a key part of layout.

image
image839×848 15.2 KB

Layout Settings.json (6.0 KB)

For me, I’m focused on adding the absolute minimal amount of: core overrides, animations, extra features, formatting. The less that’s changed from vanilla/core, the better the compatibility with other stuff.

While the plugin community here is great and I’m very grateful for that, I’m also interested in knowing from the core developers what the vision is in this area, as I’d be much more interested in a small core evolution than a larger 3rd party add-on.

12 Likes
TiddlyFlex - a new Flexbox Layout for TiddlyWiki
#2

Layout can be any full-screen app, see my posts What mobile launcher are you using, how will you design the TW layout launcher? and Do you want your wiki to have 3-10 different layouts?.

So it maybe even doesn’t have the story, the sidebar, and the tiddler view template! But only use tiddler object as the data source.

1 Like
#3

@stobot I support your desired approach here, and I like the idea that the gap between a standard tiddlywiki and any common website layout be but a tweak away.

  • For example a “page header and/or footer” that goes beyond the simple menu bar.

@BurningTreeC’s TiddlyFlex approaches this, but seems to have a slightly different philosophy. I wonder if they can be merged, otherwise once the flex is embedded reverse engineer a little to meet @stobot’s philosophy.

1 Like
#4

I like this! And totally agree in regards to evolving the tweaks options, but keeping the empty.html simple etc. I think epanding the things that can be tweaked, and how - in the default TW file would be cool.

#5
  • This is both relatively conservative in undertaking, and maximally more broadly accommodating.
  • You can omit any of the bars from the start, or later on.
  • It doesn’t have to disrupt the appearance or content of the original TiddlyWiki.
  • It will allow for many users to springboard past essential UI, into a further realm of plugins and customization, sooner rather than after getting burned out.
#6

It’s been a long time since I originally proposed something, but with all of the discussion around 5.4.0 lately I thought it’d be a good time to resurface a slight evolution in the default layout. I think we could make it look the same as it does today (if wanted) while expanding the ability for new users to tweak a bit without any CSS knowledge, adding things like a topbar, bottombar, and leftbar for instance.

Attached is a barely functioning mockup just for illustration purposes. I had to teach myself a small amount of CSS to make this, but I really only went far enough to see if any of the people who really know what they’re doing feel like taking this on.

Attached is a json that you can drag and drop onto an empty.html to play with it, or I recorded a short recording of me walking through install, setup, and playing. It’s named after what I found to be the “standard name” of this layout - Holy Grail Layout - Wikipedia

HGL_202505122140.json (20.2 KB)

Animation

2 Likes
#7

Hey Adam - Nice work !

I think this is appropriate given the discussion on a new layout for TW 5.4.0 ! In particular what you have done is made sure your layout uses a different namespace (i.e. $:/hgl/ ) for every component which is key ( I went through the tutorial Tutorial: a basic alternative layout - and found some remanants of the new layout when reverting to the default one).

I think with TW5.4.0 - both a new layout and the old should be moved to seperate namespaces ( eg $:\core\layouts\classic\PageTemplate & $:\core\layouts\modern\PageTemplate )… possibly moving the old layout to a seperate theme plugin at some stage.

I think your layout config is very cool but the slider mechansim and the listing of every setting is lengthy - your original table looks tighter. You could maybe make your Layout Visual clickable so that selecting a given layout component reveals the tweaks for that part.

Could the layout visual and tweaks be made available to all theme plugins ? I could see moving the layout visual and the tweaks as something to be shown in the layout selection tab (ie so you can see what the layout is that you are selecting ) ? It would mean establishing some standard plugin inclusions for anyone developing a theme where they want to reuse your funcionality (like the $:/hgl/settings tiddler) and maybe system tags to find those inclusions…

:smiley:

#8

Thanks @Christian_Byron, your feedback is valid. That said, the intent was not for me or anyone to build a plugin for layout tweaking, but to start a discussion around how to best evolve TiddlyWiki to be more attractive and flexible for new users without adding a lot of bloat. I think it may be less confusing if I split out a separate post to avoid this confusion.

#9

I’m onboard with that goal - my thought is that there are not many layouts available in either the core or official theme plugins … so it’s something that TW enthusiasts are not doing as the bar is maybe too high …

But your example makes a good approach others could follow and reuse components to also make their layouts flexible.

At the moment the focus on 5.4.0 version means that control panel changes and alternative layouts (aside from the one Jeremy already has planned) are more suited to seperate plugins … happy to help out with building a plugin if needed.

One other thiought - there was a lot of repetition in the code at the moment (eg lots of divs ) - maybe worth while looking at what can be generalised to a repeatable procedure or custiom widget (the new type not javascript) … could you spit the settings out per panel/sidebar and have a widget load those settings for the divs it controls ? … If i get time I’d do a demo to show what i mean…