Why Not Use More CSS in TiddlyWiki?

,
#13

Ciao @Mohammad

I wanted to come back to this thread and make a wider comment.

You are absolutely right that TW is excellent for CSS use. There are numerous ways to use CSS in TW.

I know no other software that is so flexible on CSS application!

What is my point?

Well I think the visual design side of TW is somewhat underdeveloped.
That is likely because so far there have not been that many new designs that were documented???

I think it could be very interesting to see more examples of radical use of CSS in TW.
That is not for @jeremyruston per se to document, rather just someone good at CSS design and familiar with TW.

One of the interesting things in TW is it is inherently recursive … i.e. we can make wikis that show how those wikis make themselves.

Clearly it would be possible to create a special TW for showing how to optimise use of CSS with it.

Just a comment
TT

#14

Hello Mohammad,

Is it possible you share the css for your simple image galley example that looks very good?

BR,

Eskha

#15

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
#16

@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.
#17

Hi @Eskha

You can find it here
CSS Only image gallery (codepen.io)

#18

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.

#19

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
#20

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
#21

See https://tiddlywiki.com/#Styles%20and%20Classes%20in%20WikiText

1 Like
#22

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

#23

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
#24

Thank you @Mohammad.

#25

This is a 359B CSS framework can be used in TW and exported html page
lit (ajusa.github.io)

3 Likes
#26

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
#27

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

#28

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!

#29

Right.

The agony of having to define things! :slight_smile:

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

#30

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
#31

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
#32

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