Re: [tw5] [semi-off-topic] Magazine layout

[Jeremy Ruston]

Hi Mat

> I think there's a misunderstanding (it could be on my part):  IMO the "outer 
> layout" is very much defined, and static, here. If a user is to add a 
> "sidebar" then this would not be done on this outer level but within the 
> "right" area.
> 
> Referencing the proposal for a new TW layout, it seems to be the same 
> situation: The outer layout is clearly defined with distinct areas for 
> headers, sidebars, rivers etc - i.e if one is to add something it would be 
> done within those areas, not adding a new area. Where would be a good place 
> to discuss this, with regards to your gh proposal? I'm afraid I'd hijack your 
> gh thread if done there.

I think we’re agreeing with each other: we should use the current flexbox 
proposal for the page layout, and then use grid layout within components that 
would benefit from that type of layout. So really the topic is a fairly broad 
exploration of “what can we do with CSS grid layout”, I think, which is pretty 
much what you’ve started here.

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+unsubscr...@googlegroups.com 
> .
> To view this discussion on the web visit 
> https://groups.google.com/d/msgid/tiddlywiki/8be78bd0-9844-4ba3-8416-bb1ec90f51bf%40googlegroups.com
>  
> .

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/7F91B0B0-88E6-4A80-AE6D-806F518F45B5%40gmail.com.

Re: [tw5] [semi-off-topic] Magazine layout

[Ste Wilson]

Ooohhh. That's nice. Even works on mobile! 

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/7db8c1c4-9062-4abf-9e19-f914af682ff2%40googlegroups.com.

Re: [tw5] [semi-off-topic] Magazine layout

[Mat]

Jan wrote:
>
> https://szenio.de/Grid/
>
I hope you like it. 


By mere coincidence did I note the on-hover red toolbar up in the right 
corner and that one is supposed to click the "G" there.
After having done that: Yes! I do like it! ;-)

<:-) 

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/369a0cf1-055b-4cd9-a004-5f9c7c2bcb7f%40googlegroups.com.

Re: [tw5] [semi-off-topic] Magazine layout

[Jan]

Hi Mat,
Thanks for that Layout-Tip.  I was searching for something like that for 
quite some time.

I made a quick attempt to implement that Magazine-Style.
https://szenio.de/Grid/
I hope you like it.

Jan




Am 07.04.2020 um 12:05 schrieb Mat:
C'mon... it's just 20 lines! Shouldn't take more than a few minutes, 
right!


https://css-tricks.com/responsive-grid-magazine-layout-in-just-20-lines-of-css/

<:-)

--
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+unsubscr...@googlegroups.com 
.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/152abd74-5d4a-47e1-8dc8-41979c201e5b%40googlegroups.com 
.


--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/5E8F9060.6050308%40googlemail.com.

Re: [tw5] [semi-off-topic] Magazine layout

[Mat]

@Jeremy - thank you for a great and clear reply! 

I think there's a misunderstanding (it could be on my part):  IMO the 
"outer layout" is very much defined, and static, here. If a user is to add 
a "sidebar" then this would not be done on this outer level but *within* 
the "right" area.

Referencing the proposal for a new TW layout, it seems to be the same 
situation: The outer layout is clearly defined with distinct areas for 
headers, sidebars, rivers etc - i.e if one is to add something it would be 
done within those areas, not adding a new area. Where would be a good place 
to discuss this, with regards to your gh proposal? I'm afraid I'd hijack 
your gh thread if done there.

<:-)


-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/8be78bd0-9844-4ba3-8416-bb1ec90f51bf%40googlegroups.com.

Re: [tw5] [semi-off-topic] Magazine layout

[TonyM]

Jeremy et al,

Of course ultimately such a layout change needs to minimise complexity and 
maximise functionality. If I read Jeremy's flexbox proposal correctly there 
will be a base flexible and responsive layout on top of which we can add 
elements that look like the current layout or more, perhaps to resemble the 5 
column 5 row model I posted in the github thread.

I suppose the main challenge here is keeping existing elements such as top left 
top right above story etc.. Working what ever the ultimate choice.

Is there a way to introduce a new layout as a pluggable layout such as an 
alternate page template? 

What do you think of my desire to be able to reconfigure tiddlywiki layouts to 
appear like any other possible website layout?

It seems to me tiddlywiki as a platform deserves the ability to mimic any 
website and most likely this needs both a flexible underlying layout and the 
ability to introduce other layouts within tiddlers at least, and if we have a 
flexible single tiddler mode the tiddlywiki can use more than one visual  
layout.

Smart people have already done this for specific outcomes like muuri and trello 
lookalikes.

Love your work Jeremy
Regards
Tony

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/876e5686-7a54-4120-b77b-0a2befb8fbd9%40googlegroups.com.

Re: [tw5] [semi-off-topic] Magazine layout

[Jeremy Ruston]

Hi Mat

> The OP was not a "protest", I hope that's clear.

Yes indeed!

> Could you point to what is not possible in this w3school example 
>  
> or some other example? I'm thinking that by means of the usual list-by-tags 
> strategy, one should not need to know all the elements in advance so I hope 
> to understand the problem better. 

That’s a good example of a basic grid layout. The critical part is this:

  grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';

As you can, see it’s a visual map of the layout, dividing the area up into a 
6x3 grid, specifying which element occupies each position in the grid. 
Crucially, the spec detects adjacent areas and merges them together, so the 
result looks like this:



The problem is that in order to add a new menu on the right, I’d have to modify 
the grid-template-areas to redraw the grid with a seventh column. There’s only 
one copy of the grid template, so two plugins both trying to add a menu bar 
would fight for which of them gets to specify the grid template.

It’s because the CSS grid layout system is pretty brutal: it doesn’t flow or 
adapt, it’s just a modernised version of the old trick of using tables for 
layout.

In contrast, CSS flexbox works by specifying constraints for the layout, and 
letting the browser engine resolve those constraints to determine the final 
layout. So we can keep adding menu bars and the layout just adapts fluidly.

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+unsubscr...@googlegroups.com 
> .
> To view this discussion on the web visit 
> https://groups.google.com/d/msgid/tiddlywiki/b6bfff59-f6aa-4146-b153-9e4839737701%40googlegroups.com
>  
> .

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/51C91968-3B9D-4A86-8AC1-73D120FB7848%40gmail.com.

Re: [tw5] [semi-off-topic] Magazine layout

[Mat]

Jeremy Ruston wrote:
>
> Over in that thread, I tried to explain why the grid layout isn’t suitable 
> for the main TiddlyWiki layout.
>

The OP was not a "protest", I hope that's clear.
 

> The grid layout requires that all of the elements making up the layout be 
> known in advance, so that one can construct the grid template.
>

Could you point to what is not possible in this w3school example 
 or 
some other example? I'm thinking that by means of the usual list-by-tags 
strategy, one should not need to know all the elements in advance so I hope 
to understand the problem better. 
 
<:-)

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/b6bfff59-f6aa-4146-b153-9e4839737701%40googlegroups.com.

Re: [tw5] [semi-off-topic] Magazine layout

[Jeremy Ruston]

Hi Mat, Tony,

> On 7 Apr 2020, at 23:18, Mat  wrote:
> 
> 
> Well, I didn't really and that's why I threw it out in this silly way. I 
> expect it would take a *lot* of testing and tweaking. Sure, a "magazine 
> layout" would be cool...but I have no idea when to use it and I suspect very 
> few others would. But, it probably caught my attention because of the CSS 
> work Jeremy is considering so maybe the article is useful for inspiration or 
> for triggering toughts like "hm, is there a use case there?”


The article in the OP is describing CSS grid layout, which is intended to serve 
exactly those sort of layouts. Here’s a basic description of its capabilities:

https://developer.mozilla.org/en-US/docs/Web/CSS/grid 


Here’s the GitHub ticket where we are discussing a proposed new layout based on 
the CSS flexbox system:

https://github.com/Jermolene/TiddlyWiki5/issues/4473 


Over in that thread, I tried to explain why the grid layout isn’t suitable for 
the main TiddlyWiki layout. The grid layout requires that all of the elements 
making up the layout be known in advance, so that one can construct the grid 
template. In contrast, the TW layout needs to adapt fluidly as users add and 
remove sidebars, story rivers, menu bars etc.

CSS grid layout is still pretty awesome. As Tony suggests, a particular sweet 
spot might be using it to construct modular layouts within a particular 
tiddler. I’d be interested in using it for tiddlywiki.com’s HelloThere tiddler, 
for example.

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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/823EEDBB-0DC3-49C7-825E-DFD3F5FDC90D%40gmail.com.

[tw5] [semi-off-topic] Magazine layout

[TonyM]

Mat

Thanks for sharing this reference.

How do you imagin implementing this?

I ask because I am interested in both making more interesting tiddlywiki 
layouts and a recent github issue on page layout.

There are great resources out there with css and html which I would like to 
document a work flow process to apply them.

There seems to be a few ways but I am keen even just on a per tiddler basis 
especialy when we have access to open in new window, full screen options etc...

A lot of the html and css available is for one html page at a time so we need 
to make sure vas does not bleed into other parts of the page layout.

Regards
Tony

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/901409ce-a2f5-4fb0-8df9-4e6ffc236707%40googlegroups.com.

[tw5] [semi-off-topic] Magazine layout

[Mat]

C'mon... it's just 20 lines! Shouldn't take more than a few minutes, right!

https://css-tricks.com/responsive-grid-magazine-layout-in-just-20-lines-of-css/

<:-)

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/152abd74-5d4a-47e1-8dc8-41979c201e5b%40googlegroups.com.