Create a Bootstrap responsive grid

# Plugin Fluidgrid

Introduced in Tiki 17 by Phil Jollans but will probably be backported to Tiki16 at least.

Use this wiki plugin to create a Bootstrap responsive grid (see https://getbootstrap.com/examples/grid/) in Tiki's wiki text areas. That is, rows and columns of text, images, etc. can be created that will be arranged horizontally in wide screens but will respond dynamically in smaller screens so that good visibility of content is maintained.

This is a modern, "best practices" alternative to using the Split plugin, which creates a table for content layout, a deprecated method.

## Parameters

Introduced in Tiki 17.
Preferences required: wikiplugin_fluidgrid

Parameters Accepted Values Description Default Since
(body of plugin) Text to display in a grid. Use "---" to separate the columns and "@@@" to separate rows.
customclass text Add a class to customize the design 17
colsize text Specify all column widths in units which add up to 12 17
devicesize (blank)
sm
md
lg
xl
Specify the device size below which the cells will be stacked vertically sm 17
first (blank)
col
line
Cells specified are ordered first left to right across rows (default) or top to bottom down columns line 17
joincols (blank)
y
n
Merge empty cells into the cell to their left y 17

## Usage

There are two ways to use this plugin:

1. The syntax can be copied from these examples and pasted in the wiki edit text area, or otherwise the syntax can be written by hand following the examples on this page.

Or:

2. Alternatively, as with other plugins, the Help icon (question mark in a circle at the right end of the edit toolbar) can be clicked to open a modal window. Then open the Plugin Help tab and find and click the Split plugin icon. This will open another modal window where the plugin can be configured.

If the second method is chosen, there is another choice in ways to proceed:

1. No table content initially selected (highlighted)
If no text in the wiki edit screen is selected before opening the Plugin Help window, then after entering some configuration details, click the Insert button in the plugin's form. This will paste the opening tag of the Fluidgrid plugin into the editor text area. However, the syntax will be incorrect. Clicking "Insert" will paste the plugin name in lowercase letters, and there will be no parentheses around the parameters. You must change the plugin name to use all uppercase letters, and then put parentheses around the parameters as shown in the examples on this page. Then add the syntax for the rows and columns, and the content, and finally add the closing plugin tag, again in all capital letters, surrounded by curly braces.

2. Some or all table content selected (highlighted)
To save time and simplify editing, you can input some or all of the table's row and column syntax and/or table content, and select this before clicking the Help icon to open the Plugin Help window. Then after making the Fluidgrid module configuration choices in the form, click the "Replace" button, and the plugin's full and correct syntax will be input in the edit screen automatically.

## Examples

### Three rows, two equal-width columns

{FLUIDGRID()}
A1
---
A2
@@@
B1
---
B2
@@@
C1
---
C2
{FLUIDGRID}

produces:

A1
A2
B1
B2
C1
C2

## Three row, four columns

{FLUIDGRID()}
A1
---
A2
---
A3
---
A4
@@@
B1
---
B2
---
B3
---
B4
@@@
C1
---
C2
---
C3
---
C4
{FLUIDGRID}

produces:

A1
A2
A3
A4
B1
B2
B3
B4
C1
C2
C3
C4

## Three rows of four columns, with column size specified.

As per the Bootstrap spec, the column sizes are integers that total 12. The small-screen breakpoint is used (the grid divs have a "col-sm-n" class).

{FLUIDGRID(colsize=>6|2|2|2)}
A1
---
A2
---
A3
---
A4
@@@
B1
---
B2
---
B3
---
B4
@@@
C1
---
C2
---
C3
---
C4
{FLUIDGRID}

produces:

A1
A2
A3
A4
B1
B2
B3
B4
C1
C2
C3
C4

## FLUIDGRID plugin 4X3 with partial column size.

{FLUIDGRID(colsize="1|||5")}
A1
---
A2
---
A3
---
A4
@@@
B1
---
B2
---
B3
---
B4
@@@
C1
---
C2
---
C3
---
C4
{FLUIDGRID}

produces:

A1
A2
A3
A4
B1
B2
B3
B4
C1
C2
C3
C4

## FLUIDGRID plugin 4X3 with customclass

{FLUIDGRID(customclass="wolf")}
A1
---
A2
---
A3
---
A4
@@@
B1
---
B2
---
B3
---
B4
@@@
C1
---
C2
---
C3
---
C4
{FLUIDGRID}

produces:

A1
A2
A3
A4
B1
B2
B3
B4
C1
C2
C3
C4

## FLUIDGRID plugin using column mode

{FLUIDGRID(first=>'col')}
A1
---
A2
---
A3
@@@
B1
---
B2
---
B3
@@@
C1
---
C2
---
C3
{FLUIDGRID}

produces:

A1
B1
C1
A2
B2
C2
A3
B3
C3

## Aliases

### Keywords

Keywords serve as "hubs" for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):

Accessibility (WAI and 508)
Accounting
Articles and Submissions
Banners
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Clean URLs
Communication Center
Compression (gzip)
Content Templates
Contribution
Credit
Date and Time
Debugger Console
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
Draw
Dynamic Content
Dynamic Variable
External Authentication
FAQ
File Gallery
Forum
Friendship Network (Community)
Groups
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management
Karma
Live Support
Logs (system & action)
Look and Feel
Lost edit protection
Mail-in
Map with Mapserver
Meta Tags
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Payment
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profiles
Profile Manager
Report
Toolbar
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Search and Replace
Security
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Stats
Surveys
Tags
Tell a Friend, alert + Social Bookmarking
TikiTests
Theme CSS & Smarty
Trackers
Transitions
TRIM
User Administration including registration and banning
User Files
Watch
WebDAV
Webmail
Web Services
Wiki History, page rename, etc
Wiki Plugin extends basic syntax
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG
XMLRPC