a list of all the in-built css classes?

[passingby]

Where can one look for a list of all the in-built css classes? Like for example tc-btn-big-green or others like this?

[TonyM]

Passingby,

They are all there inside tiddlywiki to be discovered. However I do wish we had it better documented. Some are defined in themes and pallets. If you look at the page and tiddler (view edit) templates you can find what is applied in common situations then use advanced search to find the class definition. All very fiddly. 

https://tid.li/tw5/test/bricks.html can take your css to the next level, and may help you discover classes

I think you can also use the browsers developer tools, inspect to discover what class is applied to what. 

Control Panel > Info > Advanced > Stylesheets also points you to the stylesheets in use and somewhat critically their order, should one override the other.

Remember unless you want a global change, it is best to override a value where you need it not globally. <style>css here<style> works in tiddlers (when I last tried).

Regards

Tony

[Mark S.]

As a first stab, just for fun, here is some code that will list a lot (most?) of the .tc- classes and the tiddlers where they are (probably) defined. 

Note that some classes are defined in multiple places.

The list is probably not complete because it uses "enlist" to split the .tc- classes out of the text, which only works if there is space in front of the ".". For 

a more complete result, I would use something like the 3rd party (PR #2963) regular expression splitter. 

Be sure everything is backed up on your system -- running this takes a wee bit of resources.

-- Mark

\define firstpass() 

<$list filter="[all[shadows+tiddlers]regexp:text[\.tc-]]">

<$list filter="[all[current]enlist{!!text}regexp[^\.tc-]sort[title]]" variable="theclass">

<<theclass>>

</$list>

</$list>

\end

<$wikify text=<<firstpass>> name="sortus">

<$list filter="[subfilter<sortus>sort[]]" variable="theclass">

<$list filter="[all[shadows+tiddlers]search:text<theclass>]" variable="thetiddler">

<<theclass>>: <<thetiddler>> <br/>

</$list>

</$list>

</$wikify>

[passingby]

Hello Mark,

Thanks for this. It gives a lot to explore.

[TonyM]

Mark

I will check this out but have you noticed a way to identify where they are used in the ui?

this seems to be the bigger challenge.

Tony

[Mark S.]

Yes it would be bigger. You would need to strip off the initial period and then use it in a regular expression like:

class=".*<myclass>\b.*"

Where the quotes are literal. I suspect the output would be overwhelming -- certain classes are used in every tiddler. So, maybe what to run on a nearly-empty tw file?

[TonyM]

Mark,

I understand but we could indicate if they relate to page, view or edit templates, or the sidebar which goes a long way to people being able to discover what influences what.

As you say using the empty would be a good start and with a few controls and filters around the way it is listed we could use it to generate a reference work. Then use the reference work to exclude those listed on specific wikis, and show the newly defined classes and uses there of.

Regards

Tony