CSS and TiddlyWiki - Open discussion

[TonyM]

Folks,

I have being spending a lot of time with CSS on tiddlywiki lately. It is clear I have a lot more to learn even in basic CSS.

I have however noticed this, It seems more often than not people developing html websites etc.. create one page and another page across which they apply css. Most CSS examples seem to relate to these whole HTML pages. Styles typically relate to everything on a specific page and the html body is often involved. And of course css is very powerful and its selectors allow you to address html in so many different ways, be it broadly or specifically. Especially when it comes to screen positions, printing or layouts most examples relate to a whole html page.

Because Tiddlywiki operates around the tiddler, we tend to design our content within tiddlers, and tiddlywiki provides the mechanisms for handling the overall page or screen. Unfortunately as a result there is a mismatch between most of the reference and educational material out there because it refers to whole HTML pages and not the tiddler "space".

I would like to suggest we develop and document some guidelines and techniques for making the most of html and css in the context of a tiddler. We have a lot of great css support tools within tiddlywiki but I believe we need to describe them in relation to standard css and they ways in which the designer can use this in the tiddlywiki platform context, and within its atomic unit the tiddler.

• What do you think? 
• Are you a CSS master with strong tiddlywiki skills?
• Have you any tips to share?

Regards

Tony

[A Gloom]

<< hardly a css master-- my tribal name be Dangerous-- as in "Knows Enough to be Dangerous"

good ideas you bring up-- TW's CSS is very much focused globally (whole wiki).  Custom stylesheet(s) allows me to contain my custom styling (for additional "global" styling) without interfering with the main CSS/stylesheet while a lot of in tiddler <style> sections with unique class names and inline styling gives me freedom to style single tiddlers as neeeded.

[Mat]

LOL! I just posted this which is about a CSS framework that, AFAICT, would fit TW perfectly and, among other things, would address exactly what you bring up. 

IMO, the problem you describe comes from abstractions. The creator of that framework phrases it like so

The more a component does, or the more specific a component is, the harder it is to reuse.

<:-)

[TonyM]

But I have noticed the style sections if displayed apply to the whole window. So its necessary to to ensure they are scoped.

Tony

[Mat]

TonyM wrote:

But I have noticed the style sections if displayed apply to the whole window. So its necessary to to ensure they are scoped.

(who ya talkin' to?)

If the style definitions are atomic/small enough then they don't have to be scoped. I.e the problem with a style made for, say, the sidebar is that it can only be used there but if the style is much less specific then it can be used there but also inside a regular tiddler. No need for scoping. Or do I misunderstand you?

<:-)

[TonyM]

I was replying to gloomy :)

But I can reply to you. I am all for reusable code but we need to support a standard to which we can rely for the tiddler scope, all tiddlers, specific tiddlers or so tagged etc...

Its the middle ground we are after.

Tony

[A Gloom]

But I have noticed the style sections if displayed apply to the whole window. So its necessary to to ensure they are scoped.

True. That why you have to use unique class names for that tiddler-- to keep it from effecting the rest of the window...

<style>

.class_name_for_this_tiddler_only { }

</style>

if you want unique styling for only a single tiddler

and don't use something like this

<style>

p { }

</style>

The big drawback to in tiddler styling is keeping track of it.  With custom stylesheets (tagged $:/tags/Stylesheet) you can have a tiddler list and display them all for trackingand central reference:

<$list filter="[tag[$:/tags/Stylesheet]!prefix[$:/theme]]">

<$link><$view field="title"/></$link> /  <$view field="caption"/><br/>
<pre><code><$view field="text" format="text"/></code></pre>
</$list>

SEE: [[code format display in lists]]

[Mat]

TonyM wrote:

I would like to suggest we develop and document some guidelines and techniques for making the most of html and css in the context of a tiddler. 

Is it not just a matter of specificity and knowing about How to apply custom styles? Or could you give examples of what is missing?

<:-)

[@TiddlyTweeter]

TonyM

CSS in TW is much more logical than is usually the case. 

That is a correlate of it being a framework and THEN Tiddlers that are ALWAYS and ONLY identically structured for their outer "box" in the default.

So there are two aspects.

1 - Normalisation of framework to another style-set

2 - Branching subset CSS at Tiddler level.

I'd say our issue is lack of tools and insight into what is happening in CSS in TW more than anything else.   The actual CSS code in core is extremely clean.

TT

[TonyM]

Folks,

Whilst I am still learning css I do have an understanding of how it works. I can also see various approaches to handling it. Though it is not a simple matter, it can be done this way or that. We need to collate and publish an approach to using it with specific knowledge of how it opprrates. A defacto standard or guide so that new and experienced users of tiddlywiki can quickly tap into the power of css not only for the tiddlywiki platform elements but also to free them creatively to make use of it.

Now I am no css domain expert yet, but some of you may be. we need to suggest a basic standard approach to writing and using css and especially mapping to "tiddlywiki" objects be it tiddlers, view and edit modes, template extensions and the side bar not to mention tapping into existing css, stylesheets and themes.

Its a bit like the other thread on regex. We are soliciting input from those who have the knowledge to publish guidance for those who do not have the same knowledge but share tiddlywiki platform knowledge.

Not withstanding substantial help, generosity and solutions from this community I do sometimes feel we are a little too operational and not strategic enough. This means I feel I still often need to reinvent my own wheels and the only way for me to get, perhaps even just have words to ask for help, I must become an expert in yet another domain.

To prove this, a case in point is my current endeavor to control printing single tiddlers with headers, footers, large tables and more. I aim to share my results and knowledge but its a harder road for me than necessary because we are not so good at making use of our "brains trust" in strategic ways to provide access to simple method for those with less skills.

Do you know what I mean?

regards
Tony