CSS Framework - need your advises your idea / comments

[Mohammad]

While TW basic edition have enough nice and standard wiki formatting tools (like bold, italic, underline, code block, colors, ...)

It is capable to have extra CSS to do advanced and sophisticate visual elements using CSS. My question is to have a sort of standard CSS

what do you recommend:

1. Use a subset of CSS from a well established available frameworks like bootstrap?
   
2. Develop a framework from scratch?

The next question:

1. from wiki point of view, the final user should be able to develop his/her contents in a simple, straight forward logic (avoiding many ways to do the same thing) do you recommend to have some macro to use the above css framework or you think it is okay to extensively html5 elements?

From user point of view, NOT DEVELOPER, my own idea is to have a small subset of bootstrap css framework, because it mature and well maintained and up to date, but I believe to avoid html tags and syntax as much as possible. I mean the tiddler source should be in wiki syntax in a very simple and clear and easy to understand format.

Cheers

Mohammad

[@TiddlyTweeter]

You may want to look at Thomas Elmiger's BRICKS. Its a TW for assisting development of CSS for TW. Its advantage is Thomas went through all the "classes" and organised them in a way that substantially reduces complexity in CSS development for TW.

You need to be aware that some CSS styling in TW is "dynamic" and involves wiki text. Bricks explains a little about that and how to ensure it works correctly. Once you have a nice design in it you can generate a stylesheet for use in other TW and export it.

FWIW, if you decide to use Bricks best to download and use the whole TW. The reason is the update of styling is dynamic and can get confusing if you mix it in with other style systems. Its a design "package."

source: https://tid.li/tw5/test/bricks.html

discussion: https://groups.google.com/d/msg/tiddlywiki/qZyhuW3_UyQ/huWHUpCmAAAJ

Best wishes
Josiah

[Mohammad]

Thank you Josiah.

Any other comment?

[TonyM]

Mohammad,

I have not had the time to give you a comprehensive response but Just wanted to mention I used the style-sheet from  w3.css quite successfully in one TiddlyWiki but do not recall all the steps I took. There is also a font solution in css for fontawesome found in a plugin you may want to loot at.

Regards

Tony

[TonyM]

Also,

Mario mentions the Pure.CSS frame work in hist videos series https://www.youtube.com/watch?v=BF5-mV9w2Sc&list=PLuiC_HFhI4OyUiDGqvzB64mTQTURABjlW&index=2

Regards

Tony

[Mohammad]

Thanks Tony.
I will take a look.
My own opinion is to use a subset from one of the well established frameworks.
So by now w3.css, Pure CSS and bootstrap are candidates
Mohammad

[PMario]

On Tuesday, June 12, 2018 at 5:00:00 AM UTC+2, Mohammad wrote:

My own opinion is to use a subset from one of the well established frameworks.
So by now w3.css, Pure CSS and bootstrap are candidates

Hi Mohammad,

Jeremy, used an early version of bootstrap for an very early version of tiddlywiki. .. The main problem with those frameworks, is that they are opinionated. ... So if you want to create your own idea, they all step on your feets. ...

That's why it was completely removed. It caused more troubles, than it solved. .. just to let you know!

TW uses normalize.css v3.0.0, which is MIT licensed as a reset module: $:/themes/tiddlywiki/vanilla/reset ... To deal with the different "browser quirks". !!! Check for duplicates !!!

The rest of TW definitiions are defined with base styles. $:/themes/tiddlywiki/vanilla/base 

The other themes are built on top of base and just modifiy aspects, that they want to have different.

TiddlyWikis UI elements are all based on "tc-" prefixed settings. ... To map those tc- settings into other frameworks will be some "heavy duty" ... It's possible, but it will also cause some headaches, here and there.

have fun!

mario

[Mohammad]

Hello Mario,

 I just watching your great videos on Community Communication - proposal

and I learned you propose pure.css.

First thank you for your clarification. I dont want to use a very different one from those used in TW or by TW community. By this I mean I prefer a css framework frequently updated and maintained, as my focus is on application of TW may be as advanced user.

So, I appreciate if you kindly explain me why you have used pure.css and is there any plan to adopt in in TW? If not do you recommend to use it?

Thank you again

Mohammad

[PMario]

On Tuesday, June 12, 2018 at 8:45:36 PM UTC+2, Mohammad wrote:

So, I appreciate if you kindly explain me why you have used pure.css

I used it, because it is simple and doesn't need any javascript to work with it. I did like the landing-page, the photo-gallery and the blog-layout.

and is there any plan to adopt in in TW?

I think, with a bit of work we could modify the e-mail layout, to view tidlers in a completely different way as now. ... With a little bit of js involvde

I'm talking about exported static pages here!!!

 

If not do you recommend to use it?

I want to use it for "TiddlyWiki as a static site generator" as mentioned in the last video. ... But there is some more work needed. I hope I can post the next video soon!

Using pure-css with the TiddlyWiki SPA ... I think it would be possible. ... BUT ... If I would start with a new theme for TW I'd use a grid-based layout, based on native "grid-css"

IMO this would be the most work, but has a lot of potential.

I personally would like to have CSS-based responsive menues for the TW SPA. ...

-mario

[PMario]

On Tuesday, June 12, 2018 at 9:08:36 PM UTC+2, PMario wrote:

Using pure-css with the TiddlyWiki SPA ... I think it would be possible. ... BUT ... If I would start with a new theme for TW I'd use a grid-based layout, based on native "grid-css"

And I would develop it on my own. I think most existing frameworks have no idea, what is needed for TW, because the have been developed for a different target audience. ... They will only step on our feet.

-m

[Mohammad]

Mario,

 Many thanks for your explanation and your efforts.

I will start learning pure.css elements and I hope to see your work out in the near future on this.

Thank you.

[@TiddlyTweeter]

PMario: And I would develop it on my own. I think most existing frameworks have no idea, what is needed for TW, because the have been developed for a different target audience. ... They will only step on our feet.

This is right. I mean PMario is correct to the reality. I DO understand visiting Bootstrap and other CSS ideas is helpful. I really can't see how, in the end, however, their methods are anything but adding complexity you really do not need.

As I mentioned some posts back, I think Thomas Elmiger's BRICKS is helpful as it organises TW CSS classes in a way that makes TW CSS easier to work with.

Fact is a web page, like TW, has styling already and the easiest route is (1) study it; (2) tweak from a foundation of knowledge of (1).

Best wishes
Josiah

[TonyM]

Mario,

Are you aware if, anyone documented the classes used to assist users in CSS customisation of TiddlyWiki elements?

Otherwise I will start one. Derived from $:/themes/tiddlywiki/vanilla/base  

Thanks

Tony

[Jed Carty]

I started some work on this over on inmysocks.tiddlyspot.com but I didn't get too far. I listed all the classes I could find that were in the core at the time with some notes here: http://inmysocks.tiddlyspot.com/#Modifying%20CSS:%5B%5BModifying%20CSS%5D%5D%20%5B%5BBuiltin%20CSS%20Classes%5D%5D