TW5: responsive tile layout for tiddler story river?

[TheDiveO]

Would it be possible to replace the core TW5 story river with a tile-based variant, including kind of a responsive design? Where tiddlers would be the individual tiles, rendered side-by-side first, then top to bottom. I'm trying to figure out if I can turn TW5 into a poor man's portal page presenting videos to users, where the tiddlers have embedded video players, and the tiddlers can be filtered by certain criteria, etc. Any suggestions as to how such a tile-based story view could be done?

[Martian]

You mean something like this https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html ?

[@TiddlyTweeter]

TW is simply an HTML file. The easiest way to get a tiled layout is to use CSS Flexbox. If that proves not enough then you will have to load a JS Masonry layout (which is not so easy unless you understand how TW handles JS).

once you understand the CSS structure in TW you should be okay. Its VERY modular. Much more logically structured than most web pages.

Best wishes
Josiah

[TheDiveO]

Well, yes. I'm basically asking for how to set up CSS flexbox with the TW5 UI tiddler part rendering tiddlers.

[@TiddlyTweeter]

Ciao TheDiveO

Nobody has yet made a CSS flexbox layout for TW so there are no examples to look at (as far as I know).

I'm pretty sure you would not be able to use the Custom Style mechanism because it relates to styling individual tiddlers, but not outside them. So you would have to create a new "Theme", or radically modify an existing one, to be able to apply flexbox globally.

Best wishes

Josiah

[PMario]

On Wednesday, March 22, 2017 at 1:22:46 AM UTC+1, @TiddlyTweeter wrote:

TW is simply an HTML file. The easiest way to get a tiled layout is to use CSS Flexbox. If that proves not enough then you will have to load a JS Masonry layout (which is not so easy unless you understand how TW handles JS).

IMO no js-library needed in the future anymore. .. Latest browsers support flexbox and css-grid. .. The problem here is, that you limit your user base quite a bit at the moment.

caniuse: flexbox ... see: http://caniuse.com/#search=flexbox
caniuse: grid ... see: http://caniuse.com/#search=grid

Some info about CSS-grid see: https://hacks.mozilla.org/2017/03/a-new-css-grid-demo-on-mozilla-org/ or the live demo: https://www.mozilla.org/en-US/developer/css-grid/

-m