[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/

<:-)

[Joshua Fontany]

Ha great - more neat CSS to check out. Thanks. ;)

[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

[Mat]

TonyM wrote:

How do you imagin implementing this?

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?"

<:-)

[TonyM]

May

Perhaps the magazine layout could work with the muuri plugin?

I will see if I can use it in a tiddler.

Regards
Tony

[Jeremy Ruston]

Hi Mat, Tony,

On 7 Apr 2020, at 23:18, Mat <matia...@gmail.com> 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

[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. 

 

<:-)

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

[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

[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.

<:-)

[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

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

[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! ;-)

<:-) 

[Ste Wilson]

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

[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+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8be78bd0-9844-4ba3-8416-bb1ec90f51bf%40googlegroups.com.