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
On Thursday, October 31, 2019 at 7:57:14 AM UTC-6, Mohammad wrote: > > 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 > <https://groups.google.com/d/msg/tiddlywiki/yVXEzBpfMjw/XsQqcWjaBAAJ> > > For demo see: https://kookma.github.io/Shiraz/#Shiraz%20Flex%20Grid > > demo/advanced/flexgrid/concept > <http://127.0.0.1:9000/#>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 > <https://getbootstrap.com/docs/4.3/layout/grid/>. 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 > <https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background> > 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 nameWidth > flex-col auto > flex-col-1 25% > flex-col-2 50% > flex-col-3 75% > flex-col-4 100% > > > -- 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d3a02757-c7e7-4751-bf9c-806a736ee39a%40googlegroups.com.
