How to use Fluid Grids, Grid Cards, and Data Tables
Sitemagic CMS has three types of grids or table structures.
- Fluid Grid which is a kind of responsive table structure.
- Fluid Grid Cards which is much like a Fluid Grid, but with a card like appearance.
- Data Tables are like traditional tables - they are responsive, but do not stack on small screens.
Assuming you have read the
introduction to pages, let's start by diving into the concept of Fluid Grids.
Fluid Grid
The video below perfectly sums up what a Fluid Grid is. It is a table structure that scales to the size of the screen, and eventually stacks content to make it fit on small screens. It has resolution breakpoints that lets us decide when content is stacked.
From the page editor we click the grid button in the toolbar, which is highlighted (but dimmed) in the image below. This will open the dialog that is also shown.
Specify the number of columns and rows you need (you can add more later), and set the Class menu to one of the Fluid Grid options. In the example above, we have selected a resolution breakpoint that causes all the cells to stack on top of each other when the resolution is below 700 pixels.
After adding the grid, use the various grid related buttons on the toolbar to add and remove columns and rows, or to change settings for specific cells. Just hold the mouse above one of the icons to see what the button does.
You can turn a row or a column into a "spacer row" or "spacer column". To turn a column into a spacer column, place the text cursor in the column and click the cell properties button like the image below shows. Set a width for the column, and make sure the Class menu is set to Spacing. Finally make sure the change is applied to all cells in the column by selecting "Update all cells in column" in the menu at the bottom of the dialog.
The procedure is almost the same if you want to create spacing between rows. However, this time we place the text cursor in a row, we apply a height instead of a width, we once again set the Class menu to Spacing, and finally set the menu at the bottom to "Update all cells in row". See the image below for clarification.
Fluid Grid Cards
A Fluid Grid can adapt a different style to make the cells appear as cards. It works exactly like a traditional Fluid Grid, but instead of selecting "Fluid Grid" in the Class menuen when creating a grid, we select "Fluid Grid Cards" along with a relevant resolution breakpoint. In the example below the cards will stack when the resolution is below 700 pixels wide.
Opposite to Fluid Grids, Grid Cards can be styled using the Designer. Everything from text formatting to colors, borders, shadows, and spacing is customizable.
Date Tables
Finally we have traditional tables suitable for structed and often larger amounts of data. Simply select "Data table" from the Class menu when creating the table.