[tw5] TiddlyWiki CSS Designer application: now available to play with

Now that I’ve settled on a name for this thing and have enough “eat one’s own dog food” sample classes in there to demo how things work and (maybe) give an inkling about where I’m heading with this…

Find the TiddlyWiki application here: TiddlyWiki CSS Designer

Previous related threads:

4 Likes

I like where this is going.

Visual tools like this, and mario’s color palette previews, should prove to make relatively common user customizations easier to perform. Depending on how this project evolves, I think it would be a good idea to have a version of this tool formatted as a Control Panel tab.

1 Like

Just uploaded the latest version.

I’ll be slowly adding some CSS documentation in there, so that this app not only helps to design CSS, it also helps to learn CSS (consciously or subconsciously? Sneaky sneaky?)

For those who want to treat this app like a plugin to be included in however many TW instances, I think we’ll have to identify the minimal number of tiddlers needed. Might be messy, might not be messy: I don’t know.

Note that we can enter some sample text for a simple preview the element/widget, and we can also enter some more complex wikitext for a more in-depth preview.

Here, I’ve created a tiddler and I’m transcluding it in the complex preview, so that I can see how the details element (based on cDeets) looks with the summary element (based on cDeets_S).

That complex sample shows in the editor for both of those classes.

Note the “information” buttons here and there. Learn about a thing by clicking right there where that thing is.

Find the TiddlyWiki application here: TiddlyWiki CSS Designer

Starting setup of CSS attributes for the “hover” state.

Anybody wanting a nice consolidated view of things CSS can do, the CSS Class Editor will eventually be a matrix that shows a substantial number (if not most, if not all) of the things that can be done with CSS.

Find the TiddlyWiki application here: TiddlyWiki CSS Designer

  • Very early beginnings of a user guide.
  • Add the data tiddler link for each class in the Classes Manager, to make it easy to drag those data tiddler classes to your TiddlyWiki instance(s), when using the TiddlyWik CSS Designer as a standalone app.

2 Likes