Forms Layout and Styling Standards - spencercrose/klamm GitHub Wiki
The Kiln JSON schema has several properties and layout hints in addition that can affect layout, rendering, or interactivity.
Kiln-Specific Layout and Rendering Properties
| Property | Standard CSS? | Used in Kiln JSON | Purpose/Notes |
|---|---|---|---|
gridColumn |
Yes | Yes | Controls grid-column spanning in React/CSS (e.g., "gridColumn": "span 2"). |
webColumns |
No | Yes | Kiln-only: Used as metadata for web grid layouts, mapped to grid CSS or data attributes. |
printColumns |
No | Yes | Kiln-only: Used as metadata for print grid layouts, mapped to grid CSS or data attributes. |
breakBefore |
Yes | Yes (in pdfStyles) |
Used for page breaks in print/PDF rendering ("breakBefore": "page"). |
display |
Yes | Yes | Can be set to "none" to hide elements in web or print. |
padding |
Yes | Yes | Standard CSS, used in both webStyles and pdfStyles. |
margin |
Yes | Yes | Standard CSS, used in both webStyles and pdfStyles. |
border |
Yes | Yes | Standard CSS, used for styling containers/fields. |
color |
Yes | Yes | Standard CSS, used for text color. |
fontSize |
Yes | Yes | Standard CSS, used for font sizing. |
fontWeight |
Yes | Yes | Standard CSS, used for font weight. |
background |
Yes | Yes | Standard CSS, used for background color or image. |
data-print-columns |
Attribute | Yes (in output HTML) | Not in JSON, but set by Kiln based on printColumns for CSS targeting. |
containerItems |
N/A | Yes | Kiln-only: Used for nesting fields/containers/groups. |
conditions |
N/A | Yes | Kiln-only: Used to control visibility, logic, etc. |