Visual Design Thoughts, #14 revision T7

[@TiddlyTweeter]

I like visual design, especially navigation, almost as much as operetta (https://www.youtube.com/watch?v=-H--Z9UzQYE).

I can't do code, but I can do thought ...

Do we have nice CSS & TOC's & ID's to do this in TiddlyWiki easily?

Best wishes

@TiddlyTweeter

[@TiddlyTweeter]

Repeat for those on email.

[Mat]

Do we have nice CSS & TOC's & ID's to do this in TiddlyWiki easily?

Do what actually? Have the "Open" list to the left of the river? Or what is special?

<:-) 

[@TiddlyTweeter]

Click left. Align any top on click. Menu persists in place.

Excuse me if done. 

I'd need an example in TiddlyWiki as I have not seen one yet. 

I'd be on it like a rabbit if I had.

J, x

[Mat]

@TiddlyTweeter wrote:

Click left. Align any top on click. Menu persists in place.

Cryptic language. But OK; In what way does standard TW not align any tiddler at top when title is clicked and the menu persists?

<:-)

[@TiddlyTweeter]

I won't rise to your cryptic amelioration :-)

In the original example. Menu sticks. All items are expanded already. Click menu and whole river scrolls up and down AND the clicked menu item is styled (highlighted) to give orientation. AND its on the left.

Josiah, x

[Mat]

In the original example. Menu sticks. All items are expanded already.

Then no need for any expanding ToC then; just make it a list.

 

Click menu and whole river scrolls up and down

No prob as long as everything is already opened which is simple if the menu is a list, i.e just use the same list for default tiddlers.

 

AND the clicked menu item is styled (highlighted) to give orientation.

OK... the menu titles could really be buttons that trigger some styling.... or checkbox is probably even better...

 

AND its on the left.

LeftBar could maybe be used as a starting point or maybe it's a bit ambitious.

 

Now, forgive me if this all sounds like I'm about to create this which I'm not because I don't currently have the time to do anything "deeper" in TW (and if I did, I already have several loose ends hanging). But hopefully my probing did help to clarify what you really asked for which should be useful for anyone actually designing it.

<:-)

[Riz]

I like the direction of discussion, even if I don't exactly grasp the advantages of the original post. It is high time to update the default css of tiddlywiki. I suggest rather than building it from scratch up, base it upon an existing css framework like skeleton.css(3kb) - which will give decent typography, convienient grids and responsive layout overall.

[David Gifford]

TiddlyTweeter is asking about the kind of behavior found in this long html I created with StackEdit. http://giffmex.org/experiments/mateo.28.16.20.html Click on any link and it moves up and down the 'story river' to the right section.

I think that is standard TiddlyWiki behavior, right? Thus the puzzled replies.

If the question is whether TiddlyWiki can export to static html and have the same behavior, the question makes more sense, and the answer is now yes, thanks to the recent HTML anchors hack.

I create a long tiddler that transcludes other tiddlers tagged entry and sorted using an 'id' field, using the following.

1. In my case I populate the id fields of the tiddlers tagged 'entry' with numbers, like #00.02. Note there is one hashtag. Those become the ID's used in the tiddler that is exported to HTML

2. Then in the tiddler to be exported I place the following list widget, which transcludes the tiddlers, sorted by the id #, and each is preceded by their html anchor.

```

<$list filter="[tag[entry]sort[id]]"><hr><h1 id={{!!id}}><$view field="title"/></h1><$transclude mode="block"/></$list>

```

3. Then I hand key a TOC with links lke <a href="##00.02">Link text</a>. Note there are two hashtags.

But I imagine step 3 could also be done with a list widget that links to the id's.

4. As for the placement of the TOC, I wanted my HTML's to be more suitable for mobile, so instead of placing the TOC on the left, I placed it at the top and created links to it at the bottom of the text of each transcluded tiddler, so that the user can click a link to return to the TOC from any section.

This is an example of the final html, though the TOC is at the top rather than to the left. http://articulos.giffmex.org/sab/nt3.1juan.exegesis.html

Dave

[Mohammad]

I support Riz idea!

In Shiraz I tried to adopt part of bootstrap css framework! I think TW will be much more powerful then!

--Mohammad

[@TiddlyTweeter]

Mat, Riz, David, Mohammad

Three points...

1 -- I agree my initial post was somewhat a mess :-) I was groping to articulate what I meant.

2 -- What I was trying to get at is that CSS design options are likely best shown VISUALLY. What I mean is that though I KNOW TW does my interest logically, it does not, out of the box, do it visually.

3 -- I think that matters.

I'll comment soon on other issues you helpfully raised.

Best wishes

Josiah

[PMario]

On Thursday, May 16, 2019 at 5:49:58 AM UTC+2, Mohammad wrote:

...

In Shiraz I tried to adopt part of bootstrap css framework! I think TW will be much more powerful then!

 

                              In a Galaxy

                   Far Away and Long Ago

              TiddlyWiki used bootstrap css

BUT it only got in the way and stepped on our feet

have fun!

mario

[@TiddlyTweeter]

PMario wrote from the Death Star...

                              In a Galaxy

                   Far Away and Long Ago

              TiddlyWiki used bootstrap css

BUT it only got in the way and stepped on our feet

I'm no way clear about which/whether a CSS library would work.

My feeling is that TW CSS (code) is largely invisible and that a structured approach is needed. Not least to get it explicated in a useful way.

Are some libraries better? 

That is my question.

My HO.

Josiah

[@TiddlyTweeter]

In the Dev Google I wrote an enthusiastic note about Thomas Elmiger's CSS BRICKS plugin. 

Even if you don't like his library choice I think its a very skilful move towards what a CSS editing environment should look like.

Details: https://groups.google.com/d/msg/tiddlywikidev/fBuS11SOEl8/ewgO0CfsCwAJ

Best wishes

Josiah

 

[@TiddlyTweeter]

Riz

I seen and used your CSS morphs of libraries. Very good.

Right now I sense the issue is about getting some base library that can replace Vanilla, look like it, but have the better layout matrices CSS now inhabits?

(I often feel like the guy who saw but could not do.)

IMO CSS is staring us in the face for getting explicit.

But I slightly worry that 5 solutions will be far worse than one.

Best wishes

Josiah

[TonyM]

Folks,

My 2 cents. The addition of w3cc, bootstrap etc... is trivial, just obtain the desired css file install and tag as a stylesheet. I feel this is adequate to provide a great deal of opportunities to a designer and keeps tiddlywiki open to internet standard solutions and css frameworks out in the wild. I would not like to see any of this openness compromised. We should be careful not to move open standards into our standards where we need to maintain them and they diverge from the originals we based it on. 

However to empower the designer with maximum level of visual design is a good idea. Perhaps if we developed some tiddlywiki editions making use of each popular css framework including the default, explaining how to install and configure (if new releases are available) then providing tip, tricks and templates for each platform. During this process we may very well discover issues, features or tweaks we can place in the core to better support the use of such css frameworks.

I for one are currently using simple html/css tiddlers containing wiki text to present the content of tiddlers more visually. I would like a way to hide what is currently generated by the view template when using such a template, ie programmatically, without trigger or button fold the tiddler.

With my current work I can see I could provide half a dozen different templates for viewing tiddlers that should meet 95% of designer needs, and they can customise them for their own use. These templates may even be designed to handle view edit and selective edit modes. They can automatically present additional fields defined on a tiddler, and draw on detailed field definitions if required.

Regards

Tony

[@TiddlyTweeter]

Ciao TonyM

TonyM wrote:

My 2 cents. The addition of w3cc, bootstrap etc... is trivial, just obtain the desired css file install and tag as a stylesheet.

IMO its not trivial. Its not useful to install css libraries without conversion to TW classes. And that is slog. It is serious work, I think.

I think there is an issue about libraries. Meaning--is one or another a better fit with TW? Better to go with one that is a good fit?

Side thoughts

Josiah

[TonyM]

Josiah,

You say without conversion to TW classes.  Is this because you want to change fundamentally the way tiddlyWiki works?. 

I use the css in these frameworks to craft content within my tiddlers typically using html with wikitext embeded to generate lists and columns or display a value. 

On a current project I am building html templates for the display of content in a given tiddler. For example I have a tiddler type of Office, with a couple of dozen fields, and I use vanilla html/css to structure the way the tiddler content is displayed through a template. It appears such html and css rich templates embeded with wikitext can be considered equivalent to HTML pages, such pages can be designed with elements from any css platform with few limits that wikitext can usually overcome. HTML Layouts can be found all over the net that can get such a page started.

I would like to know what you are doing that you want to convert to tw classes?

Regards

Tony

[Jeremy Ruston]

I’m keen to introduce a new default theme as part of a future v5.2.x version of TW5. I’d definitely be wanting to use an off-the-shelf framework, and tend to favour the simpler ones that focus on typography, such as Tachyons (https://tachyons.io/).

As others have suggested, I’d also be keen to package up some or all of the popular CSS frameworks such as Bootstrap and Semantic UI as optional plugins.

The trouble, of course, is that each framework has different expectations of the classes that will be used to implement components. For example, Bootstrap needs the classes .btn and .btn-success to be added to a stock HTML button, while Semantic UI expects the classes .ui and .button.

So, it’s not practical for the core to include classes for all the available frameworks. So, if a user were to choose to import the Semantic UI framework plugin they would be able to make their own freshly written buttons use the correct styles, but the existing buttons used by the core would stay with their default styling.

There is a potential solution: the core could use tiddlers to map the names of UI components to the classes that should be assigned. For example, somewhere there might be a declaration like this that says “give components of type “button” the CSS classes ban and btn-success:

button: btn btn-success

Then the core would define buttons like this:

<button class={{$:/config/ui/component-classes/button}}>

Then, the Semantic UI plugin would change the value of $:/config/ui/component-classes/button to be “ui button”.

There might be concern about performance, but transcluded attributes are pretty efficient, it’s just one extra lookup over a string value. Anyhow, it’s not something I’ve had a chance to explore yet, but I’m keen to do so for v5.2.x

Best wishes

Jeremy.

-- 
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8c74e6a1-4906-471e-a19f-c497b27a4806%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[PMario]

On Sunday, May 19, 2019 at 3:37:42 PM UTC+2, Jeremy Ruston wrote:

I’m keen to introduce a new default theme as part of a future v5.2.x version of TW5. I’d definitely be wanting to use an off-the-shelf framework, and tend to favour the simpler ones that focus on typography, such as Tachyons (https://tachyons.io/).

As far as I can see, tachions grid is based on float: left. ... Which is imo out of date if you want to start a new UI system. It depends on well defined clear-fixes, which make it hard for most users to do things right.

just a thought.

-mario

[Jeremy Ruston]

Hi Mario

As far as I can see, tachions grid is based on float: left. ... Which is imo out of date if you want to start a new UI system. It depends on well defined clear-fixes, which make it hard for most users to do things right. 

Yuck. One problem is that the average lifetime of things like CSS frameworks is only 2-5 years, and TW5 has already been around for a lot longer than that. There’s a danger that anything that we adopt will become abandoned and unmaintained. That’s part of the motivation for the idea of translatable CSS classes above.

Best wishes

Jeremy

[PMario]

On Sunday, May 19, 2019 at 6:23:17 PM UTC+2, Jeremy Ruston wrote:

...

Yuck. One problem is that the average lifetime of things like CSS frameworks is only 2-5 years, and TW5 has already been around for a lot longer than that. There’s a danger that anything that we adopt will become abandoned and unmaintained. That’s part of the motivation for the idea of translatable CSS classes above.

Yes. That's exactly, what I want to point out. ...

All major browsers adopted the CSS grid now. So we should think about the possibilities we have here.

In my video series about the "Script TODO Manager" I did discuss this topic in more detail. Including some infos about a CSS-Grid-Playground using TW.

video 04: Script ToDo Layout and Styles .. The first 9 minutes discuss a very basic, dynamic list layout in a table-like view.

video 8: Script Todo Manager - grid layout moar basics ... This video shows a more complex input element, plus some more basics, TW as a CSS playground and why I'm so exited about the CSS-grid.

The full series can be found at: INTRO: A script and todo manager workflow / UI experiment + video howto's This intro also contains links to the json files, shown in the videos.

As mentioned in video 8. I wanted to play with the basic possibilities of CSS-grid. ... With TW we have the possibility to use transclusion to manipulate CSS creation parameters. As discussed in Jeremy's response above.

To create a layout like this for TW, we would need to identify the different elements, that make up the existing TW UI. (As I showed in the video for 2 elements). ...

There is 1 major element, which I didn't touch in the video. ACCESSIBILITY and aria-labels needed for screen readers.

have fun!

mario

[@TiddlyTweeter]

Jeremy Ruston wrote:

...

Yuck. One problem is that the average lifetime of things like CSS frameworks is only 2-5 years, and TW5 has already been around for a lot longer than that. There’s a danger that anything that we adopt will become abandoned and unmaintained. That’s part of the motivation for the idea of translatable CSS classes above.

 PMario (PM) wrote:

Yes. That's exactly, what I want to point out. ...

All major browsers adopted the CSS grid now. So we should think about the possibilities we have here.

 

I'm no CSS expert. But I'd like to comment that CSS3, on introduction, was a defining moment. 

Future CSS will likely modularise. CSS4 likely won't be one thing--rather its likely to scale off 3 in several directions. 

Aligning with the full remit of CSS3 would ensure longevity. I'm not sure even popular frameworks fully use it yet?

I agree with PM in concern that some approaches are better than others for TW. That some libraries may not be ideal. 

I'd say there are TWO issues ...

  1 -- what is a library approach that stays open enough?

  2 -- the importance of making the existing CSS easier to understand. (I sort of suspect if we had easier insight into our own CSS a swathe of obstacles would disappear).

        I mean there is NO list of classes in a form a designer can use yet?

AND I want to comment ...

  3 - we DO have CSS skilled people ... like Riz, Telmiger, J.D., BTC and others who may have thoughts worth hearing.

Best wishes

Josiah

[Mohammad]

Hi Jeremy,

I strongly support this! Having css frameworks in TW can boost it and lets easily adopt it for different uses like elegant web pages.

Like Mario, I recommend a more up to date CSS even the lifetime of them are around 5 years.

--Mohammad

On Sunday, May 19, 2019 at 6:07:42 PM UTC+4:30, Jeremy Ruston wrote:

I’m keen to introduce a new default theme as part of a future v5.2.x version of TW5. I’d definitely be wanting to use an off-the-shelf framework, and tend to favour the simpler ones that focus on typography, such as Tachyons (https://tachyons.io/).

As others have suggested, I’d also be keen to package up some or all of the popular CSS frameworks such as Bootstrap and Semantic UI as optional plugins.

The trouble, of course, is that each framework has different expectations of the classes that will be used to implement components. For example, Bootstrap needs the classes .btn and .btn-success to be added to a stock HTML button, while Semantic UI expects the classes .ui and .button.

So, it’s not practical for the core to include classes for all the available frameworks. So, if a user were to choose to import the Semantic UI framework plugin they would be able to make their own freshly written buttons use the correct styles, but the existing buttons used by the core would stay with their default styling.

There is a potential solution: the core could use tiddlers to map the names of UI components to the classes that should be assigned. For example, somewhere there might be a declaration like this that says “give components of type “button” the CSS classes ban and btn-success:

button: btn btn-success

Then the core would define buttons like this:

<button class={{$:/config/ui/component-classes/button}}>

Then, the Semantic UI plugin would change the value of $:/config/ui/component-classes/button to be “ui button”.

There might be concern about performance, but transcluded attributes are pretty efficient, it’s just one extra lookup over a string value. Anyhow, it’s not something I’ve had a chance to explore yet, but I’m keen to do so for v5.2.x

Best wishes

Jeremy.

On 18 May 2019, at 05:42, TonyM <anthon...@gmail.com> wrote:

Josiah,

You say without conversion to TW classes.  Is this because you want to change fundamentally the way tiddlyWiki works?. 

I use the css in these frameworks to craft content within my tiddlers typically using html with wikitext embeded to generate lists and columns or display a value. 

On a current project I am building html templates for the display of content in a given tiddler. For example I have a tiddler type of Office, with a couple of dozen fields, and I use vanilla html/css to structure the way the tiddler content is displayed through a template. It appears such html and css rich templates embeded with wikitext can be considered equivalent to HTML pages, such pages can be designed with elements from any css platform with few limits that wikitext can usually overcome. HTML Layouts can be found all over the net that can get such a page started.

I would like to know what you are doing that you want to convert to tw classes?

Regards

Tony

On Saturday, May 18, 2019 at 3:46:45 AM UTC+10, @TiddlyTweeter wrote:

Ciao TonyM

TonyM wrote:

My 2 cents. The addition of w3cc, bootstrap etc... is trivial, just obtain the desired css file install and tag as a stylesheet. 

IMO its not trivial. Its not useful to install css libraries without conversion to TW classes. And that is slog. It is serious work, I think.

I think there is an issue about libraries. Meaning--is one or another a better fit with TW? Better to go with one that is a good fit?

Side thoughts

Josiah

-- 
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.

[Mohammad]

More input:

 While I tried to adopt several parts of Bootstrap in Shiraz plugin, but I think Bulma (https://bulma.io/) may be a better choice as it is lighter 100% modular and JS free!!

I would like to recommend the below page describes the pros and cos of most popular CSS framework.

https://geekflare.com/best-css-frameworks/

--Mohammad

On Sunday, May 19, 2019 at 6:07:42 PM UTC+4:30, Jeremy Ruston wrote:

I’m keen to introduce a new default theme as part of a future v5.2.x version of TW5. I’d definitely be wanting to use an off-the-shelf framework, and tend to favour the simpler ones that focus on typography, such as Tachyons (https://tachyons.io/).

As others have suggested, I’d also be keen to package up some or all of the popular CSS frameworks such as Bootstrap and Semantic UI as optional plugins.

The trouble, of course, is that each framework has different expectations of the classes that will be used to implement components. For example, Bootstrap needs the classes .btn and .btn-success to be added to a stock HTML button, while Semantic UI expects the classes .ui and .button.

So, it’s not practical for the core to include classes for all the available frameworks. So, if a user were to choose to import the Semantic UI framework plugin they would be able to make their own freshly written buttons use the correct styles, but the existing buttons used by the core would stay with their default styling.

There is a potential solution: the core could use tiddlers to map the names of UI components to the classes that should be assigned. For example, somewhere there might be a declaration like this that says “give components of type “button” the CSS classes ban and btn-success:

button: btn btn-success

Then the core would define buttons like this:

<button class={{$:/config/ui/component-classes/button}}>

Then, the Semantic UI plugin would change the value of $:/config/ui/component-classes/button to be “ui button”.

There might be concern about performance, but transcluded attributes are pretty efficient, it’s just one extra lookup over a string value. Anyhow, it’s not something I’ve had a chance to explore yet, but I’m keen to do so for v5.2.x

Best wishes

Jeremy.

On 18 May 2019, at 05:42, TonyM <anthon...@gmail.com> wrote:

Josiah,

You say without conversion to TW classes.  Is this because you want to change fundamentally the way tiddlyWiki works?. 

I use the css in these frameworks to craft content within my tiddlers typically using html with wikitext embeded to generate lists and columns or display a value. 

On a current project I am building html templates for the display of content in a given tiddler. For example I have a tiddler type of Office, with a couple of dozen fields, and I use vanilla html/css to structure the way the tiddler content is displayed through a template. It appears such html and css rich templates embeded with wikitext can be considered equivalent to HTML pages, such pages can be designed with elements from any css platform with few limits that wikitext can usually overcome. HTML Layouts can be found all over the net that can get such a page started.

I would like to know what you are doing that you want to convert to tw classes?

Regards

Tony

On Saturday, May 18, 2019 at 3:46:45 AM UTC+10, @TiddlyTweeter wrote:

Ciao TonyM

TonyM wrote:

My 2 cents. The addition of w3cc, bootstrap etc... is trivial, just obtain the desired css file install and tag as a stylesheet. 

IMO its not trivial. Its not useful to install css libraries without conversion to TW classes. And that is slog. It is serious work, I think.

I think there is an issue about libraries. Meaning--is one or another a better fit with TW? Better to go with one that is a good fit?

Side thoughts

Josiah

-- 
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.

[PMario]

On Monday, May 20, 2019 at 4:49:00 PM UTC+2, Mohammad wrote:

Hi Jeremy,

I strongly support this! Having css frameworks in TW can boost it and lets easily adopt it for different uses like elegant web pages.

Like Mario, I recommend a more up to date CSS even the lifetime of them are around 5 years.

CSS grid is a generic option, that is relatively new. ... The lifetime of CSS grid will definitely be longer than 5 years.

Major browser vendors removed the (experimental) vendor-prefix they used for a long time, in October 2017. ... Removing the vendor-prefix is similar to declare it production-ready, in "browser speak".

-m

[Thomas Elmiger]

Hi folks,

This is going in a direction I like! I should go to bed, so I'll try to keep my input short for this time. And I am writing this from my memory, there might be errors.

What I borrowed from tachyons.io for https://tid.li/tw5/test/bricks.html (warning: not cleaned up) is mainly its measurement system: As I didn’t want to redefine all TW classes, standard tachions measures (sizes, distances) were put into TW variables and used in my collection of stylesheets – preserving and revising much of the original TW style in the first round. I did still want TW to resemble itself. Many users are used to how TW looks since several years. No need to scare them/to make them re-learn stuff they know.

What I learned: Using these variables adds a layer of complexity to styling TW via stylesheets. And I am afraid that mapping TW classes, like Jeremy suggests, would also add a layer of complexity to theme (or skin or design) develoment. On the other hand: TW configuration via control panel already adds a layer of complexity ... maybe we could reduce there if we had more and bettter themes to choose from.

To optimize performance for my themes on https://tid.li/tw5/themes.html, I made generators to render CSS and colour palettes into mostly static files.

What I was not able to do: There are colour names (white, grey, black, ...) built into TW already somewhere. Also these definitions sbould be made more accessible/updateable/replaceable for designers who would like to apply other colour schemes. I was not able to replace the coulour definitions for named colours, I had to add.

I also invented new tools to opitmize colour handling and contrasts, but that’s another story.

I am very busy at the moment, but feel free to ask if someting is unclear. I can imagine that my concepts sometimes are hard to grasp ;–)

All the best,

Thomas

[TonyM]

Thomas,

If I understand correctly colour names come from a html / css standard - see here https://www.w3schools.com/cssref/css_colors.asp

If you wanted you could make a table or index mapping names to hex values.

Then of course there are set of names that are defined in tiddlywiki for particular elements, like "primary". 

Regards

Tony

[Thomas Elmiger]

Tony,

I assume you are right, the built-in colours of TW seem to stem from this standard. They can be found in
$:/core/modules/utils/dom/csscolorparser.js

BUT: tachyons.io uses other definitions for a colour palette conaining identical names ... see http://tachyons.io/#style and scroll down.

So there IS already a mapping, but it is in the core and thus I see no way to replace it in connection with a theme/skin/design system.

Cheers,

Thomas

[TonyM]

Thomas,

Looks to me like this aspect of the TiddlyWiki UI is not as amenable to "hacking" or modification as are other parts. Perhaps modifying this to allow overriding should be the first step?

Regards

Tony