Improving Tiddlywiki's CSS: Documentation for the css classes used by the core

[Telumire]

Introduction

Several area of improvements have been outlined:

• Documentation for each vanilla classes (ref)
• Introducing CSS variables for the customisable parts of the vanilla stylesheets (ref)

This thread will focus on how we can document the vanilla classes.

Method

How should we create this documentation ? Manually, for each classes, or dynamically, using filters ?
For example, here's a filter I wrote to count the classes used in $:/themes/tiddlywiki/vanilla/base :

\define get-tc-classes()
[get[text]split[{]split[}]split[/*]split[*/]split[,]split[>]split[:]search-replace:g[.tc],[ .tc]split[ ]search[.tc-]!search[<<]!search[>>]!search[""]unique[]]
\end

Number of classes in $:/themes/tiddlywiki/vanilla/base : {{{ [[$:/themes/tiddlywiki/vanilla/base]subfilter<get-tc-classes>count[]] }}} 

Using this filter, 255 unique classes were identified, and from these, I manually identified the following categories :

alert, banner, body, btn, diff, dirty, drag, drop, drop-down, droppable, edit, form, gap, icon, image, link, manager, menu, message, modal, muted, page, plugin, quote, reinstall, row, search, sidebar, site, story, tab, table, tag, tc-sidebar, text-editor, thumbnail, tiddler, title, topbar, type, view-field

Several classes were seemingly single-use, case specific classes :

.tc-first-col-min-width, .tc-list-item-selected, .tc-selected, .tc-binary-warning, .tc-popup, .tc-keyboard, .tc-viewswitcher, .tc-prompt, .tc-chooser, .tc-swatches-horiz, .tc-file-input-wrapper, .tc-colour-chooser, .tc-notification, .tc-vertical, .tc-drafts-list, .tc-control-panel, .tc-check-list, .tc-float-right, .tc-chooser-item, .tc-chosen, .tc-language-chooser, .tc-swatch, .tc-error, .tc-tree, .tc-fill-background, .tc-flex, .tc-flex-column, .tc-word-break

Here's the tiddler I used: Tool to find categories of classes

From there, we could create a form that would generate a documentation tiddler for each category, ask for a description and a name, then for each category of classes, list each classes of that category and describe their use case allong with the relevant snippet of css from the stylesheet.

What do you think of this process ?

[Jermolene]

Thanks @Telumire

how we can document the vanilla classes

Great idea.

From there, we could create a form that would generate a documentation tiddler for each category, ask for a description and a name, then for each category of classes, list each classes of that category and describe their use case allong with the relevant snippet of css from the stylesheet.

That sounds like a good approach.

[AnthonyMuscio]

I just want to add to this endeavour, regardless if the definition is in the vanilla base one key piece of knowledge is where they are "assigned" within the page/story/view template structure, and the hierarchy is critical because that is how we can identify what to redefine in an alternative "theme" or what to use with an alternative story/layout, leverage the tiddler class attribute as one example and add some specificity in addition to the built in data tags such as Mohammad's example here https://talk.tiddlywiki.org/t/style-tiddler-titles-from-color-field/4788/4?u=tw_tones

I will share back as my own work progresses.

Nice start there @Telumire