A simple flexgrid system for Tiddlywiki

[Mohammad]

This is an attempt to create a simple to understand easy to use flexgrid system for Tiddlywiki.

It uses a four column layout and lets create elegant layout.

This is part of Shiraz plugin

For demo see: https://kookma.github.io/Shiraz/#Shiraz%20Flex%20Grid

demo/advanced/flexgrid/concept

31st October 2019 at 9:13am

advancedflexgrid

Shiraz Flex grid system

Shiraz uses a flexgrid composed of four column system. These were taken from Bootstrap 4.3.1. So for understanding the concept it is recommend to read the Bootstrap grid system. By the way Shiraz Grid system is much simpler and designed to work in Tiddlywiki.

How it works

Shiraz flexgrid system uses a series of rows, and columns to layout and align content. It’s built with flexbox and is responsive.

A good reference to understand flexbox is CSS-Tricks flexbox guide

Grid options

Shiraz flexgrid uses a four column system.

• The flex-row container is a wrapper for columns.
• The flex-col container uses automatic width and is used for creating equal width columns layout.

The below table shows all column classes in flexgrid system.

Class name	Width
flex-col	auto
flex-col-1	25%
flex-col-2	50%
flex-col-3	75%
flex-col-4	100%

[Mohammad]

See how you can create a simple Image gallery using Shiraz flexgrid 

https://kookma.github.io/Shiraz/#examples%2Fadvanced%2Fflexgrid-gallery

--Mohammad

[David Gifford]

Hi Mohammad,

I will definitely be using this one soon. I just added the Flex grid to both the images section of the toolmap, and the Writing and editing - font and paragraph manipulation section

[David Gifford]

Dear Mohammad,

You have used up your free Toolmap entries allowance. To have more of your plugins added to the Toolmap, please subscribe to TiddlyWiki Toolmap Pro, a subscription of only $5 per month.

Just kidding, of course! :-)

On Thursday, October 31, 2019 at 7:57:14 AM UTC-6, Mohammad wrote:

[@TiddlyTweeter]

The "Gallery" is a really good start.

It works well also on my small mobile phone. Very important!

But, TBH, because you can get images to show well at different screen sizes is still not really an online gallery.

A gallery would need to deal with hiding menus and optimizing (through CSS) the presentation of images and hiding everything not needed.

This NOT a criticism!!! This is a great step in its simplicity. But its not a "gallery" yet -- its a good "image viewer".

Very best wishes

TT

[Mohammad]

Hi Dave,

 Thank you! I think the best position is writing and editing and if present layout or multi column layout.

The image gallery is just an example of using flexgrid.

On Thursday, October 31, 2019 at 7:24:11 PM UTC+3:30, David Gifford wrote:

Dear Mohammad,

You have used up your free Toolmap entries allowance. To have more of your plugins added to the Toolmap, please subscribe to TiddlyWiki Toolmap Pro, a subscription of only $5 per month.

Just kidding, of course! :-)

Okay, I will try to post less if not I have to buy a pro subscription :-) :-)

[Mohammad]

Hi Josiah,

 Yes, it is not a true gallery, it actually shows the potential of flexgrid layout for creating gallery!

but it needs much more work to acts like an online gallery!

Thanks for your comments.

--Mohammad

[TonyM]

Mohammad,

I recall in the past you had a method of showing tiddlers as previews where it rendered the tiddler as a thumbnail or image. 

I can't find this can you tell me where I can find it?

I think the preview method would be nice to also add to such grids to act as graphical "links" to content.

Regards

Tony

[Mohammad]

Hi Tony!

It is part of Tiddlyshow!

You can find it under slide thumbnails!

https://github.com/kookma/Tiddlyshow

--Mohammad

[TonyM]

Mohammad,

Thanks for the reference, but I am struggling to extract the thumbnail method for a more generalised tool.

• I would love to use it as an alternative to a regular list such that the thumbnails are a preview to that tiddler. I am not sure how to set the size, columns rows but even a default behaviour would be good.
• Perhaps you would kindly consider extracting a separate macro that allows it to be called multiple times inside any list widget and filter to show a preview for each tiddler. If not by simply providing the filter to the macro and displaying a linked preview to each.
  
• A macro that displayed a preview of a single named tiddler that fit a table cell would be fine.
• Alternatively if you could explain the mechanism to preview a tiddler at a smaller size I would be grateful.

To me this is such a basic user interface feature, I would love to see it in you Shiraz collection.

Thanks in advance

Tony

[Mohammad]

Sure, I will try to publish it as small plugin!

Cheers

Mohammad

[Mohammad]

Tony

In the meantime you can try this:

\define crad-tiddlers(filter)
<div class="card-columns">
<$list filter=<<__filter__>>>
<div class="card">
<div class="card-body text-center">
<$link to=<<currentTiddler>> >
<$transclude tiddler="$:/core/ui/ViewTemplate"/>
<h3 class="card-title"><<currentTiddler>></h3>
</$link>
</div>
</div>
</$list>
</div>
\end

[A Gloom]

You have used up your free Toolmap entries allowance. To have more of your plugins added to the Toolmap, please subscribe to TiddlyWiki Toolmap Pro, a subscription of only $5 per month.

lol

I can't keep up with all Mohammad is creating-- but i'm definitely going to be using Shiraz (named after the city?) for external images and many other things-- I see lots of possibilities with it.

and I like Mohammad's documenting style, how he includes reference sources for the html behind it

[Mohammad]

Hi Gloom,

 I promised to post less :-)

I will add a tiddler regarding the name! 

Shiraz is the name of an ancient city: https://en.wikipedia.org/wiki/Shiraz

--Mohammad

[TonyM]

Mohammad,

FYI

I was at a wedding recently, and there was a very beautiful Woman. We could not work out her ethnicity which seemed to have a lot to do with her beauty. I was forced to ask from where she had come to Australia and she answered "Persia". Of course this seems to be an answer by some to avoid judgement,  we subsequently determined she was from Iran, and I was saddened that she felt she could not say that, sad because she felt so in my own country. My own personal experience of Iranien (?) people in Australia has being nothing but delightful, as one would expect.

I would love to visit Shiraz one day.

I love the Grape as well.

Tony

[Mohammad]

Tony,

Iran, Persika or Persia (the ancient name) are all refer to the same land but at different periods of history!

More info: https://en.wikipedia.org/wiki/History_of_Iran

Shiraz is the city of poem and wine!

Hope some day you could visit Shiraz! :-)

--Mohammad

[A Gloom]

Mohammad,

 I promised to post less :-)

oh no!  you're saving me so much time-- what you're doing, I don't have to figure out myself : )

 

I will add a tiddler regarding the name!
Shiraz is the name of an ancient city

cool

I remember my world history-- the city of poets!

plus I'm incorporating a lot of world history/mythology into my work

but Shiraz the plugin I'm looking to supplement my svg multi-pane external file viewer