Home
This CSS was created as a means of rapidly changing the layout of Grooper Data Models by using the CSS class property of the Data Element as shown here.
You can get started by pasting the contents in the Style Sheet property of your DataModel. Alternatively you can now add resource files to Grooper, and add the Boilerplate.CSS to your Grooper project. as shown.
Then the node can be referenced in the Included Style Sheets property of your DataModel.
By default we start with a flex-row layout, and a nice border with some hover and focus colors.
Out of the box this CSS handles the following challanges for you:
This ensures elements don't fall on the same line as captions when nested, in sections
Sections and Tables will nest and space appropriately, and adjust the margin and padding.
| Class Name | Functionality | Section | Table | Field |
|---|---|---|---|---|
| Column | Changes the layout to columns and stacks elements top to bottom | x | x | |
| Half | Makes an element half the size of it's parent cotainer | x | x | |
| TwoThirds | Makes an element Two the size of it's parent cotainer | x | x | |
| Third | Makes an element one third the size of it's parent cotainer | x | x | |
| Quarter | Makes an element one fourth the size of it's parent cotainer | x | x | |
| Fifth | Makes an element one fifth the size of it's parent cotainer | x | x | |
| NoLabel | Make removes an elements caption or label | x | x | |
| NoBorder | Removes the border padding an margin from and element | x | x | |
| Secure | Makes a field blur until the cursor is inside the field | |||
| Banner | Makes a large, full width, and centered within it's container | |||
| SoftError | Makes the errored state of the field use a soft yellow cholorscheme |