I see folks have been sharing some recommended sites. Here is one I found recently:
Heaps of documentation (including MDN and caniuse). It also works offline - quite appropriate for TiddlyWiki.
Cheers
2 Likes
@andrewg_oz this is a great resource and offline is appropriate to tiddlywiki.
I think it would make a lot of sense if we could compile over time reference material that shows how to bring such functionality into tiddlywiki or the alternate methods already available.
For example;
Search for window.name where we can see the JavaScript but it takes additional knowledge to make this usable in tiddlywiki and browsers.
- I have done a little of this myself but mostly as a “script kiddy” modifying others code. Thus I am not an appropriate teacher.
- I am however confident that a set of generic rules, guidance or templates can facilitate people developing new solutions, from many aspect’s of the documentation you provided.
Most of us don’t have the time to go through the learning curve to do fancy CSS. It has a low value to time ratio, for me anyway.
Right.
Earlier in this thread I was trying point at that in TW the threshold of work on CSS is actually MUCH lower than it is for much software. This is because TW’s basic architecture is logically well suited to the use of CSS. It is easier in TW than most elsewhere.
What we lack somewhat, I think, is a few more detailed worked through examples showing how to use it’s existing CSS classes better that an end-user can just use off-the-shelf???
Just a comment
TT
2 Likes
What we lack somewhat, I think, is a few more detailed worked through examples showing how to use it’s existing CSS classes better that an end-user can just use off-the-shelf???
Yes, that’s why I said what I said. I don’t use CSS much, and I don’t have a need to. But we certainly could use more CSS examples in the core TW documentation. I don’t think the TW docs have an example of a custom style name used with the @@ symbols. But I could be wrong there.
Inexperienced users need “tutorial” type documentation to hold their hand, to explain basic concepts, and teach people how this works. Experienced users who need to look up a minor detail need “reference” documentation. Those are 2 different types of documentation with 2 different markets. TW seems to have good reference docs, but could use a bit more “tutorial” type docs.
1 Like
TBH, I think the mechanics are easy once you “get it”. IMO the entire scope of modes of CSS in TW is fantastic! It has so many ways to do CSS it is exceptional!
But I DO think there is a residual issue in more clearly communicating those.
I sorta suspect we need live demo them more???
Okay, I’ll shut up,
TT
pure css gallery Дизайн магазина — on-line каталог
next Цветы on-line — Букеты в Москве
Pure css slider Дизайн магазина — on-line каталог
next pure css gall Интернет-магазин Heeg.html загружается..... — Heeg.html
swiper.js variants js+CSS work both in TW and static cut
https://heeg.ru/test/heeg2_3GS/shop2_3_excel_php10.html#tanu4
https://heeg.ru/test/heeg2_3GS/shop2_3_excel_php10.html#file_send
3 Likes
I would add to it that TiddlyWiki makes it easy to customize the look and style of individual tiddlers.
Once you get the hang of it, you can have global styles using the $:/tags/Stylesheet tag.
One thing that is still difficult to wrap your head around is making layout changes in TiddlyWiki. For example, how do you make the sidebar appear on the left-hand side?
Or how you can pull off the layout on the Timmi website in your wiki.
Similarly, customizing static HTML is another aspect that is not simple or well-documented.
I believe this is the reason we have a much less number of themes than the plugins.
1 Like
Right. Part of the issue on understanding broad CSS layout in TW is that seasoned devs can translate in their heads the CSS code in the Browser “Inspect” to the final code result.
Q: I still think that is maybe a bit more complicated/abstract a process than needed for educating end-users about CSS tweaking?
One way forward might be to have a demo wiki that VISUALLY displays, on click, what the “container CSS classes do”.
By way of example I thought what @BurningTreeC has done for MCL provides a standard approach for his columnisation styling that is illustrative of the benefit of simple live display of what CSS does? See:
MultiColumn Layout — a non-linear personal web notebook (click “Documentation”)
TT
I think layouts could be something that needs an easy to use pass.
I get the concept. Have no clue how to make one. A ‘save layout’ button however…
Save states of different css and plugin configurations… The possibilities!
Right.
The agony of having to define things! 
Given TW is a one file thing it is pretty amazing that it can do what it does!
I was kinda blown away by the Alternative Layout thing.
What is good about it is design freedom with a neat, quick, way to load alternative designs.
You are right, I think, it is not for everyone.
I would never myself attempt it, being an idiot. But folk who do get TW well can, and are, to our benefit.
Just a comment
TT
It’s a missed opportunity, though, that on that tiddlywiki.com page, invoking the keyboard shortcut mentioned right there (ctrl-shift-L ) does not show any actual alternative layouts.
Having one good alternate layout there would spark curiosity for novice-intermediate users – those who will shrug and walk away from the invitation to “go clone a layout and tweak it”, but who might be inspired after seeing what’s possible, and how some of the differences work.
-Springer
7 Likes
I agree with @Springer . Examples are the key to innovation when it comes to Tiddlywiki. If there were an alternate layout example, then it would be much more likely that folks would be inspired to come up with their own.
2 Likes
I would vote perhaps for more than one default layout, if they do not need too many bytes to implement. I would think the following would be demonstrative.
- Layout with standard side bar on left and right available for other content (or hidden)
- Layout with standard side bar on right and left available for other content (or hidden)
2 Likes
See Learn HTML and CSS - Discussion - Talk TW (tiddlywiki.org) for some basic resources on CSS and HTML.
Thanks for this resource and for encouraging the learning of technologies that allow TW users more expressiveness with the platform/tool.
In my case, I have avoided deepening too much in the web technologies, as they appear to me noisy and inelegant: a mashup of ad-hoc tech stacks under pressure to deliver fast with the design and evolution disadvantages of that. You have three separate languages (HTML, CSS, JavaScript) with pretty different syntax, domains, semantics and pragmatics and when they’re not verbose, they have unintended consequences (as has been shown with the weirdness of JS and the non local consequences of changing CSS).
But web is getting better and I think that those of us who have observed from the distance, are now being compelled to look closer. In the case of CSS, I wonder if something an Atomic CSS or things like UnoCSS (and its influences) can be implemented in TW.
I think that the experiments that @telmiger is doing with Tix and the examples, tutorials and invitations that @Mohammad is doing frequently are compelling reasons to imagine a more “atomic CSS” that bring the advantages of such technology in a more coherent way to TW, kind of isolating users of the history design pitfalls of such technologies (in a way is doing this since the beginning by providing this self contained web to express yourself and solve particular issued without all the complexities of the classical web approach).