Contents
Kirby Grid Size Field
A simple grid size selection field for Kirby CMS,
Preview
Output
{
“class”: {
“start”: “col-start-4-suffix“,
“end”: “col-end-10-suffix“,
“span”: “col-span-6-suffix“
},
“value”: {
“start”: 4,
“end”: 10,
“span”: 6,
}
}
Installation & Usage
Copy plugin files to your plugin directory.
Blueprint Usage
Add the following blueprint to wherever you would like the grid size field to appear.
width:
label: Grid Width
type: grid
options:
columns: 12
limit: 4
width: 2/2
help: Select the number of columns the grid should span over
Example Blueprint for using with Tailwind CSS
width:
label: Grid Width
type: grid
options:
columns: 12
limit: 4
offset:
start: 0
end: 1
prefix:
start: col-start-
end: col-end-
span: col-span-
width: 2/2
help: Select the number of columns the grid should span over
Frontend Usage
// Outputs the column span value as an integer
$page->field_name()->grid(‘value’, ‘span’)
// Outputs the column start value as an integer
$page->field_name()->grid(‘value’, ‘start’)
// Outputs the column end value as an integer
$page->field_name()->grid(‘value’, ‘end’)
// Outputs the column span value as a class with optional prefix and/or suffix
$page->field_name()->grid(‘class’, ‘span’)
// Outputs the span value as a class with optional prefix and/or suffix
$page->field_name()->grid(‘class’, ‘start’)
// Outputs the span value as a class with optional prefix and/or suffix
$page->field_name()->grid(‘class’, ‘end’)
Options
Option
Required
Default Values
Description
Options
false
columns: 12limit: 0
Set the number of columns in the grid, a limit can also be set to set the minimum size of the selected grid
Offset
False
start: 0end: 0
An offset can be added for use with CSS frameworks such as tailwind where a 12 column grid would end on 13 not 12.
Prefix
False
start: noneend: nonespan: none
Text to be added before the output class
Suffix
False
start: noneend: nonespan: none
Text to be added after the output class