This is a 359B CSS framework can be used in TW and exported html page
lit (ajusa.github.io)
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).
This is an interesting position because you then go on to suggest using CSS frameworks.
- I believe TiddlyWiki should work without knowing HTML, CSS, JavaScript, so if we implement some of these other CSS frameworks they need internal configuration support that does not demand the user/designer code CSS - even if advanced users do code their own CSS.
I think a key value of TiddlyWiki is its use of HTML, CSS, JavaScript because these are global internet technology standards, web technologies. Apart from the compatibility, longevity, and resources available for each of these, “TiddlyWiki’s use of” and “compatibility with” these technologies is an opportunity to start a journey of self empowerment.
- If someone were to give you a short list of what to invest time in, these three would be in it.
*Although tiddlywiki attempts to empower people without insisting on these.
Whilst this may be a valid complaint it can be extended to “The Internet is noisy and inelegant”, but then it is also very broad and complex, so I am not sure the internet will ever be “Quiet and elegant” 
I do like the possibilities of adding css frameworks to tiddlywiki but are ideally extension’s or integrated.
My suggestion of web frameworks is related with keeping incidental complexity at bay and favoring modularity. Atomic CSS tries to do that (and so does UnoCSS), but my suggestion is not about bringing a complete particular CSS framework inside TW, but the ideas of (a more) Atomic CSS into TW, so it continues to help its users to keep complexity at bay, including the incidental one related with the way the web evolved by mashing together ad-hoc standards.
My way to reconcile myself with the web and take for my advantage its ubiquity while lowering its incidental complexity is thinking in HTML, CSS and JavaScript as “compilation targets” instead of a development platform. Having some languages are transpiling to JS, but you keep the semantics of Clojure, Smalltalk or Lua, helps on that front and I hope the web become a more multilingual programming place.
I enjoy that TW allows me to use web technologies in a “reactive” way, only when the provided experience falls short. For most of our PKM needs, we can use TW combined with Pharo, without touching CSS or JS (or barely so). At some point I would like to make the programming of TW extensible with languages like Lua or ideas from Atomic CSS, so TW continue be a way to explore how diverse technologies and ideas keep incidental complexity at bay, while making learning the web a more pleasant experience and a path to go beyond it (while JS is a good language limited to the web, it’s pretty bad at machine “learning”/training, statistics, data science, etc)
My hope for web technologies is more about them becoming melodic and elegant, as oppose to the noisiness and inelegance of its ad-hoc evolution/collage. Current web tech as “compilation” targets shows a path forward. 
1 Like
For those who don’t know much about CSS, I use a lot of CSS in my TiddlyWikis. Go to the More tab > System tab of my sidebar here Documenting TW — a non-linear personal web notebook
Take a look at the tiddlers at the top of that tab, the ones that start with $:/.giffmex/.Stylesheet/…
Grab any of them that you like.
6 Likes
- I do not know these, sorry.
Personal knowledge management (PKM)
- I tend to think of this as Knowledge and Information management and GTD/tod/task/project tools
TW combined with Pharo TiddlyWikiPharo and critical code/data literacy curriculum
- I am afraid I don’t know enough here
- Your post sounds very interesting, but was hard for me to understand
Interesting to read your perspective @Offray “same, same, but different”
This is a simple example of using tailwind css, but I found that svg is always on a single line, this must be a problem caused by tailwind, but since I seldom use tailwind css before, I can’t find the reason for this problem (could it be that css is Is it polluted)
Yes, at the beginning I used tailwindcss by manually building css, but that was too troublesome, and finally I decided to import tailwindcss (v3.3.1) directly through CDN, and I can also directly modify tailwind in tailwindcss. config.js for personalized configuration，I like the typography plugin of tailwindcss the most, because it is very friendly to typography，tailwindcss-with-typography.min.js has a size of about 434kb，I’m not sure if everyone will like this way (using tailwindcss framework at tiddlywiki) @Mohammad
1 Like
Great job!
Yes 434kB is a big size for TW, but the CSS only part is fine!
As Shiraz is based on Bootstrap (around 96kB, the Bootstrap part is around 35kB), I got used to it, but I see increasing use of TailWind around the web!
If want to reduce the final css size, you can only use purge, and the way of using cdn in tiddlywiki is just for convenience, and you don’t need to build it at any time