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/5f76035f-c235-4991-a689-ef22c45d3e3a%40googlegroups.com.
