The Grid System
The clariBI dashboard uses a 12-column grid layout. Every widget occupies a rectangular area defined by its column span and row span. Widget configuration is form-based -- you add widgets, configure their settings through forms, and place them in the grid.
| Property | Details |
|---|---|
| Columns | 12 equal-width columns |
| Rows | Unlimited, auto-expanding |
| Min widget width | 2 columns |
| Max widget width | 12 columns (full row) |
| Min widget height | 1 row unit (~100px) |
| Snap | Widgets snap to grid boundaries |
Placing and Reordering Widgets
To add or reorder a widget:
- Enter Edit Mode by clicking the pencil icon in the dashboard toolbar (if not already editing).
- Use the widget configuration form to set the widget's position and size within the grid.
- Widgets are placed in the grid and can be reordered through the layout settings.
Widgets will not overlap -- the grid system automatically manages positioning.
Resizing Widgets
To resize a widget:
- Hover over the bottom-right corner of the widget. A resize handle appears.
- Click and drag to make the widget wider (more columns) or taller (more rows).
- Release the mouse button. The widget snaps to the new size.
Common Size Patterns
| Purpose | Columns | Rows |
|---|---|---|
| Metric card | 3 | 1 |
| Small chart | 4 | 2 |
| Medium chart | 6 | 3 |
| Large chart | 8-12 | 3-4 |
| Full-width table | 12 | 4-6 |
Alignment and Spacing
Widgets align to the grid automatically. The grid includes consistent gutters (spacing) between widgets, so you do not need to worry about manual spacing. The default gutter is 16 pixels.
Centering Widgets
To center a widget that does not span the full width, position it with equal empty columns on each side. For example, an 8-column widget centered in a 12-column grid sits at column 3 (leaving 2 empty columns on each side).
Responsive Behavior
When the viewer's screen is smaller than the design width:
- Tablet (768px-1199px): Widgets that span 6 or fewer columns maintain their relative positions. Wider widgets may reflow.
- Mobile (under 768px): All widgets stack into a single column, in top-to-bottom order matching left-to-right, top-to-bottom reading order from the desktop layout.
You do not need to design separate mobile layouts. The grid adapts automatically.
Undo and Redo
Made a mistake? Use the undo and redo buttons in the toolbar, or press Ctrl+Z (undo) and Ctrl+Shift+Z (redo). Layout changes are tracked separately from widget configuration changes, so undoing a move does not undo a data change.
Saving Your Layout
Layout changes are not saved automatically. Click Save in the toolbar (or press Ctrl+S) to persist your changes. If you navigate away without saving, the dashboard reverts to its last saved state.