[TW5] Presenting: Bricks Demo – CSS Construction Set + Soft Redesign)

[Thomas Elmiger]

Dear members of the TW community,

Over the last months you haven’t heard much from my side. And possibly I will remain rather quiet for the weeks to come. The TW hours I could find went mostly into this fancy project that has reached demo status now. I release this as is, without warranties and with minimal documentation. I would be very happy if some of you could find some time over the coming weeks to try, test, report bugs and submit feedback of any kind.

Bricks is a set of utilities for webdesigners using cascading stylesheets (CSS). It covers many aspects of TiddlyWiki 5 (TW) and thus is especially useful if you wish to use your skills for TW design.

Bricks Studio Equipment

Bricks offers a collection of stylesheets for TiddlyWiki 5 introducing a refreshingly cool but still familiar touch. Old and new styles are rebased on definitions from tachyons.io wherever possible. Additional tools:

• Stylesheet Manager – a searchable list of stylesheets where you quickly create, edit, activate and deactivate stylesheet tiddlers.
  • Listreveal Plugin – a helper that makes listed tiddlers accessible and editable directly in the list.
    Important: Version 0.3.1 in use here might not be backwards compatible.
• Stylesheet Generator – speed up your wikis and compile your collection of stylesheets into a static document, stripped from comments and most line breaks.

Vanilla Ice Cream – a Soft Design Update

The collection of style-related tiddlers delivered with Bricks has revolutionary things under the hood:

• clearly titled CSS tiddlers you can combine as you like – use only as much code as necessary for your solution
• mobile first design philosophy
• variables for most things based on values from tachyons.io

If this sounds interesting to you, visit https://tid.li/tw5/test/bricks.html for more info and let me know what you think.

Have a good time, explore and build – all the best for the days to come and a happy 2018!

Many thanks and kind regards,
Thomas

[TonyM]

Thomas,

Once again I am impressed with your tiddlywiki contributions. Bricks looks like another that will be in my toolbox. I will review more deeply and respond if I can support your effort.

My use of stylesheets has only recently reached the level I need such tools, so it has come at the right time.

I want to point out your quote "Hey, I made a new design for quotes – get it from the bricks library.

This reusable component approach is exactly what I am trying to do as well with a desire to build an ecosystem of components (above plugins, below editions) that have practical uses for both end users and experts alike.

So my feed back is most likely to be supporting this component method.

Thanks so much for your contributions in 2017 and I look forward to what 2018 offers.

Enjoy the festive season

Tony

[Diego Mesa]

This is wonderful Thomas.

As people make cool stuff, please report back to inspire the rest of us! 

Diego

[BurningTreeC]

Hello Thomas, that's awesome, thanks a lot!

gonna try it out right now

kind regards,

Simon

[Thomas Elmiger]

Hello CSS and design aficionados

There is a new update for my Bricks demos including:

• new palette with better contrast
• Palette Generator – compile your colour values. Use variables for development and fixed colour definitions for production. There is also a hack for the palette editor available to give you better control with variables.
• Layout optimized for Safari Mobile (links do no longer break the width)
  

The Stylesheet Manager comes with a clone button now. And last and least there is a new blockquote design using swiss «guillemets» style.

• Should I make Vanilla Ice Cream a theme for you to download/drag and drop?
• Should the Stylesheet Manager become a plugin?
  

I would be greatful for feedback of any kind – but that can easily wait until next year ;–)

Happy new year to all TW users and many thanks for your support during 2017!
Thomas

Am Mittwoch, 20. Dezember 2017 21:13:58 UTC+1 schrieb Thomas Elmiger:

[Diego Mesa]

Hey Thomas,

Great work as always! I would recommend making the Stylesheet manager a separate plugin - perhaps even part of core? 

Diego

[Thomas Elmiger]

Hi Diego

Thank you for the positive feedback! We will see how many plugins will come out of this ;–)

As it is rather developer oriented stuff, I don’t think it should become part of the core. But I might add a tiddler for the resources section of tiddlywiki.com when it is finished.

Have a nice weekend!
Thomas

[@TiddlyTweeter]

Ciao Thomas

After some fiddling about & experimentation I finally began to get my head around this CSS innovation.

When I first saw it I felt "YES!", after looking into it more I feel "YES" even more.

INTERFACE: The use of List Reveal to assist transfer of items between active and inactive states is simple and intuitive. As I have written before, I think its a brilliant interface. And well used for this.

NAMINGS: You commented elsewhere that, in some ways, this is likely towards a DEVELOPERS TOOL. Right. But there is one aspect that I think is WEAK for anyone. And its the NAMING of the component CSS Tiddlers. The problem is that you get no clear sense of how the parts relate to the whole. I'm wondering of there could be a caption or some other field that could be used to better indicate how a "CSS part" relates to a whole design?

GENERATION: The generative function looks spot on. To consolidate an output that you can take and use elsewhere.

USAGE: Looking at how I might USE it: I'd most likely run it as a STANDALONE APP. to generate new stylesheets that I then add to other TW (but not the mechanism).

EXAMPLES NEEDED: To help users better grasp how it works I think you need a few more examples. The use of the library that is optimal for responsive design should mean that you can show good performance ACROSS devices. So even, maybe, screen shots of it working on desktop, tablet & smart-phone could help better convey what the overarching final function can look like--which is easing better universal design.

Overall: Looking Good! :-)

Very best wishes
Josiah

[Thomas Elmiger]

Hoi Josiah

Thank you very much for your thoughts and comments. You nailed it! Feedback below. 

Have a nice weekend,

Thomas 

@TiddlyTweeter <tiddly...@assays.tv> schrieb am Sa. 6. Jan. 2018 um 14:26:

INTERFACE: The use of List Reveal to assist transfer of items between active and inactive states is simple and intuitive. As I have written before, I think its a brilliant interface. And well used for this.

Additionally I find it very helpful to open and EDIT directly in the list. This way we can change the live-CSS and SEE the effects immediately. Very efficient. No saving, no reload required. (A little bit dangerous too, you can ruin the layout while typing.)

NAMINGS: You commented elsewhere that, in some ways, this is likely towards a DEVELOPERS TOOL. Right. But there is one aspect that I think is WEAK for anyone. And its the NAMING of the component CSS Tiddlers. The problem is that you get no clear sense of how the parts relate to the whole. I'm wondering of there could be a caption or some other field that could be used to better indicate how a "CSS part" relates to a whole design?

Actually, the new version of listreveal would show the field "caption" of the tiddler when you hover over its name …  but the caption is missing on all but two, I think. Nice, that we feel the same urge about this :)

GENERATION: The generative function looks spot on. To consolidate an output that you can take and use elsewhere.

Right, the part with the dynamic tiddler is a bit heavy – maybe too much for beginners. But I think you wouldn't have to update that one often. 

USAGE: Looking at how I might USE it: I'd most likely run it as a STANDALONE APP. to generate new stylesheets that I then add to other TW (but not the mechanism).

Same here. 

EXAMPLES NEEDED: To help users better grasp how it works I think you need a few more examples. The use of the library that is optimal for responsive design should mean that you can show good performance ACROSS devices. So even, maybe, screen shots of it working on desktop, tablet & smart-phone could help better convey what the overarching final function can look like--which is easing better universal design.

Right. I am playing around with colors and palettes at the moment. When I am done with that, it should be easy to create some cool variants and show them. Stay tuned …

and thanks again for the valuable feedback and opinions!!!

[Thomas Elmiger]

Hi all,

Bricks is freshly updated. Still far from finished, but much better ;–)

Stylesheets were refined, but most effort went into colour handling:

ColorAction plugin – modify colours depending on each other and evaluate their properties and readability. (separate post will follow)
Used in the $:/snippets/currpalettepreview (overrides the core version) this shows also colours defined via variables.

The new Bricks palette editor manages a reduced set of colours, a few more tweaks can be found in the control panel.

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

[@TiddlyTweeter]

Ciao Thomas

A few more comments & queries on Bricks as I get into beginning to use it ...

COMMENTS...

--- I'm in awe of you having worked though so much to get a handle on TW CSS with an applied standard approach. I'm in awe of what you done is because though I knew TW CSS was rich I had NO idea it was so rich.

--- This has highlighted to me that TW CSS (structural application) is both very, very good BUT ALSO complex.

--- Its that complexity of TW CSS that I'm having a hard time navigating around. The way you divide up the sheets is useful. But for practical change I still need to find a way to orientate. What do I change? How do I KNOW what to change? I describe an issue around this for printing below.

--- The Generator is a great thing. (1) you can consolidate and compact (2) then after transfer to the destination TW, safely disable/delete style sheets you don't need and replace with one consolidated one. And (3) this method reduces chances of CASCADE ORDER PROBLEMS which sometimes in TW can be v. confusing.

--- Interesting is the test version of tiddlywiki.com re-factored using your stylesheet and how parts of it DON'T work so well (mainly titles)

DECONSTRUCTIVE TEST... Just for the fun of it ... I de-activated all styleshets active in the manager to see what would happen. It got close to an unstyled page but the Generator still produced a stylesheet with content. Is that the intended behaviour, that it can includes un-listed rules?

USE CASE - PRINT STYLING QUESTION ... I frequently need to print individual Tiddlers (I do so through "Open in New Window" then print that singular Tiddler). Longer term I want to style the printed versions so they follow a house style. My difficulty is HOW to KNOW which styles need defining for print. They would be anything that could be in a Tiddler. I'm just really hazy on how to do this efficiently? In what ways can Bricks help me isolate ALL, but ONLY, the rules I need to modify?

SUGGESTION... Any chance for a button on the Generated Stylesheet that will create a Tiddler of the Compiled, compacted version so you don't need to copy and paste?

Thank you for making this!

Tschüß
Josiah

Thomas Elmiger wrote:

The new Bricks ...

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

[Thomas Elmiger]

Oh, great, I have users with thoughts!

:–)

@TiddlyTweeter <tiddly...@assays.tv> schrieb am Fr. 26. Jan. 2018 um 11:36:

Ciao Thomas

A few more comments & queries on Bricks as I get into beginning to use it ...

COMMENTS...

--- I'm in awe of you having worked though so much to get a handle on TW CSS with an applied standard approach. I'm in awe of what you done is because though I knew TW CSS was rich I had NO idea it was so rich.

--- This has highlighted to me that TW CSS (structural application) is both very, very good BUT ALSO complex.

--- Its that complexity of TW CSS that I'm having a hard time navigating around. The way you divide up the sheets is useful. But for practical change I still need to find a way to orientate. What do I change? How do I KNOW what to change? I describe an issue around this for printing below.

You are right and the descriptions for the more than 30 stylesheets are still missing ...

And I made it extra complicated by using the tachyons-variables. That's why I would call it a tool for CSS devs at the moment. 

If you are not interested in studying tachyons.io, then you could replace the content of the CSS you would like to adapt with its rendered version to start with. That would remove at least one layer of complexity. 

--- The Generator is a great thing. (1) you can consolidate and compact (2) then after transfer to the destination TW, safely disable/delete style sheets you don't need and replace with one consolidated one. And (3) this method reduces chances of CASCADE ORDER PROBLEMS which sometimes in TW can be v. confusing.

I tried to take other measures like (low) CSS specificity to avoid order problems, but you never know. 

--- Interesting is the test version of tiddlywiki.com re-factored using your stylesheet and how parts of it DON'T work so well (mainly titles)

DECONSTRUCTIVE TEST... Just for the fun of it ... I de-activated all styleshets active in the manager to see what would happen. It got close to an unstyled page but the Generator still produced a stylesheet with content. Is that the intended behaviour, that it can includes un-listed rules?

I will have to look at this. 

USE CASE - PRINT STYLING QUESTION ... I frequently need to print individual Tiddlers (I do so through "Open in New Window" then print that singular Tiddler). Longer term I want to style the printed versions so they follow a house style. My difficult is HOW to KNOW which styles need defining for print. They would be anything that could be in a Tiddler. I'm just really hazy on how to do this efficiently? In what ways can Bricks help me isolate ALL, but ONLY, the rules I need to modify?

Search for "print" in the Stylesheets Manager. I tried to collect all specific print styles in one tiddler, so this would be the right place to add yours. 

SUGGESTION... Any chance for a button on the Generated Stylesheet that will create a Tiddler of the Compiled, compacted version so you don't need to copy and paste?

Hmm, yeah – I like drag n drop too. Should be possible, but is not on top of my list. 

I am working on some new palettes and find still things to tune, sync and optimize along the way …

Thank you for making this!

Thank you for using it and for your helpful feedback! 

Ciao, Thomas

Tschüß
Josiah

Thomas Elmiger wrote:

The new Bricks ...

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

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/qZyhuW3_UyQ/unsubscribe.
To unsubscribe from this group and all its topics, 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/ddcb5760-a065-451f-83ad-d5a6bf631854%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[@TiddlyTweeter]

Ciao Thomas

I have more comments on Bricks. They come slowly as I need work with it first to get as clear as I can.

1 - REDUNDANT SILENT CLONE ON SAVE? -- NEW FEATURE REQUEST

Given that making interventions into StyleSheets may well go WRONG, I was wondering if the save mechanism could silently auto-clone any stylesheet edited in the list to an Archived Version (maybe just the title with modification date added into an archive section)  so you can RECOVER where you were & backtrack if you need to?

2 -  CASCADE QUESTION

Looking at the order in List-Reveal for Bricks its alphabetical, right? And the Generator follows the same order?

In other words YOU already made sure that no style group you split it into overlaps? Every style is only found ONCE? Right?

I do think that practically folk will want to adopt the overall scheme and THEN add a "tweaking stylesheet". HOW will they know WHERE to place so that a cascade that has overrides works?

Maybe this issue is simply about documenting the Generation Order? In practice I think it might matter.

By way of background I can't see many people wanting to go through the very careful development process you went though. They are more likely to just want to add an "overrides" section to what you did?

3 - GENERATE & REPLACE all the stylesheets with the ONE generated.

In your comments you remark this is for mainly developers. I agree and disagree. I agree that getting into the full detail of all those stylesheets is beyond me and not something I want to do either.

YOU just DID it, so why would I not trust your result to be a ground-zero? I would.

But its not beyond me to know a few things I want to tweak.

In practice this means ... I'd generate a consolidated stylesheet from what you made? Put at place one in the ListReveal? Add a second SS with my modest Tweaks that OVERRIDE previous entries in the cascade?

MY QUESTION: Will that work when I Re-Generate? Will the overrides I added hold?

4 - Its a mystery to me to understand how "Bricks" SS know they are Bricks? They don't carry that tag? Are you filtering on paths? This is likely my idiocy :-).

5 - I'm a bit unclear how I create a NEW SET.

6 - One of the INTERESTING things for me is your quite radical design where the live SS form the very interface. I like that. Very much. Live means live. But you can't start from zero (as I commented before in a previous post there seem to be some residual rules that probably need shutting off). I simply think this needs documenting. I'm a bit hazy on this.

I like it because its radical AND contiguous with extant methods. In practice it means, I can add a few changes to an otherwise optimised, compact, responsive CSS set to deliver a better TW.

Thankyou!

Best wishes
Josiah

[@TiddlyTweeter]

Footnote on point 1.

"Clone" is the wrong word. What I meant was SILENT BACKUP of the PREVIOUS version.

Best wishes
Josiah

[Thomas Elmiger]

Hi Josiah

You inspired me to write an FAQ for the next version of bricks – does this answer your questions?

(Well, I know it doesn’t answer all of them as I have one question myself.)

Kind regards

Thomas

===

Frequently Asked Questions

I miss something, should I post a feature request?

Check two things first: a) Does your wish concern the very core of bricks – that would be managing CSS for TW5? Some issues might seem related, but are not at their heart. b) Is it already present here or in TiddlyWiki itself or in a plugin available elswhere? A user asked, if we could make backups so developers could return to the previous version if something went wrong. This concerns the subject of backups, not CSS. And there are solutions available, e.g. the clone-button in the Stylesheet Manager or the official SaveTrail plugin. If you are not sure, feel free to ask!

How about the Briks Stylesheets cascade?

The list of Bricks in the Stylesheet Manager is alphabetical. That doesn’t say that TW processes them in the same order. But it should not be that relevant: Most elements are covered in just one or two tiddlers (e.g. one for screen display and one for printing). Additionally most definitions use low CSS specificity to avoid order problems. So in most cases you will find all relevant definitions in the same one tiddler and if you want to change something, the best place to do this will be right there.

How about the order in generated stylesheets?

The generator processes all stylesheets in alphabetical order. As stated above, that should not influence the result as I tried to omit redundancy. Definitions that are loaded later should not overwrite the ones that were loaded before as they cover different elements or different aspects of elements.

Should tweaks be collected in one additional stylesheet tiddler?

No. It is recommended to add tweaks in the stylesheet that covers the element, component or function that you want to change. Maybe you invent something that could be useful for others and we could offer your solution as an alternative or a replacement of an existing Brick. Let me know if you have someting that should be in the Bricks library!

How many stylesheets should I generate?

Just two: one for the dynamic parts based on wikilogic and one for all the rest. See Wikilogic Tiddler Transformation for details. No need to separate originals from the stuff you developed. Just keep your Bricks in your development library so you can come back and optimize later if necessary.

How does the Stylesheet Manager know what tiddlers are Bricks?

It doesn’t. It is a stylesheet manager and as such lists all stylesheets tagged $:/tags/Stylesheets (additionally they must contain the text entered in the search field).

I'm a bit unclear how I create a NEW SET.

What is a new set?

Can I start from zero?

You can set all stylesheets to inactive and then reactivate one after the other, check and optimize. That’s what I did in one of many rounds of optimisation.

===