Rebar Module System
Overview
Rebar is a comprehensive system for content management with true modularity. It provides the infrastructure for rapid content generation using prebuilt blocks that only require content and configuration.
Fig 1: A text module.
Fig 2: A text module with the "Advanced options" panel expanded.
Module Config Options
Every module comes with configuration options that dictate the style of the infrastructure that wraps its content.
Module ID
Unique identifier for linking purposes, written lowercase with hyphens.
This is a text field for specifying the ID of the module, which is necessary in order to link to it directly.
Spacing
Amount of additional top/bottom space outside/inside the module.
This is a set of four dropdowns for selecting the spacing values (Fig. 3–6).
| Option | Height (rem) | Height (px) |
|---|---|---|
0 | 0rem | 0px |
1 | 0.75rem | 12px |
2 | 1.5rem | 24px |
3 | 3rem | 48px |
4 | 4.5rem | 72px |
5 | 6rem | 96px |
6 | 7.5rem | 120px |
7 | 9rem | 144px |
8 | 10.5rem | 168px |
Outer Top Spacing
Fig. 3: Spacing is applied above the content, outside the bounds of the module.
Outer Bottom Spacing
Fig. 4: Spacing is applied below the content, outside the bounds of the module.
Inner Top Spacing
Fig. 5: Spacing is applied above the content, within the bounds of the module.
Inner Bottom Spacing
Fig. 6: Spacing is applied below the content, within the bounds of the module.
Width
Size of the module relative to the site container.
This is a dropdown field for selecting a width setting (Fig. 7).
| Option | Width |
|---|---|
Auto | Same as site container |
Auto Extended | Same as site container with full-width background |
Slim | Narrower than site container |
Slim Extended | Narrower than site container with full-width background |
Wide | Wider than site container |
Wide Extended | Wider than site container with full-width background |
Full | Full-width |
Fig. 7: Example width options.
Background Color
Color to display underneath the module's content.
This is a category field that pulls from a category group called "Background Colors". The benefit of using a category field is that colors can be added and removed at any time, and every module will automatically have the latest set of options.
Tip: When assigning a background color to a module, select "Width: Auto Extended, Slim Extended, or Wide Extended" in that module's "Advanced options" drop-down menu. This will ensure the background color spans the entire width of the page. (full-width background)
Background Image
Image to display underneath the module's content.
This is an asset field that allows the selection or upload of any image file.
Background Position
Alignment of the module's background image (if present).
This is a dropdown field for specifying how the background image should be cropped.
| Option | CSS value |
|---|---|
Top Left | top left |
Top Center | top center |
Top Right | top right |
Center Left | center left |
Center Center | center center |
Center Right | center right |
Bottom Left | bottom left |
Bottom Center | bottom center |
Bottom Right | bottom right |