Home

This CSS was created as a means of rapidly changing the layout of Grooper Data Models by using the CSS Class property as shown below

It also starts you off with coloring, hover and click effects, and layout that automatically takes the full width of the DataPanel. Every major component such as captions, page navigators, inputs have been given a flex-order of 1, for designers to easily reorder parts.

.DataTable {
   order: 3;
}

.DataSection > .SomeField > input { 
   order: 0;
}

Usage

You can get started by pasting the contents of the Boilerplate.css 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, this node can be referenced in the Included Style Sheets property of your DataModel.

---

Preview

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:

Caption Spacing

This ensures elements don't fall on the same line as captions when nested, in sections.

Nested Spaces

Sections and Tables will nest and space appropriately, and adjust the margin and padding.

Custom Classes

Special

Class Name	Functionality	DataModel	Section	Table	Field
Column	Changes layout to columns and stacks elements vertically.	✅	✅		✅
NoLabel	Make removes an elements caption or label		✅	✅	✅
NoBorder	Removes the border padding an margin from and element		✅	✅
Blur	Makes a field blur until the cursor is inside the field				✅
Secure	Make all characterers appear as a disc 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				✅
AutoHeight	Makes any scrollable elements grow vertically			✅	✅
Shy	Column Only! field label and input are as far away as possible				✅

Size Classes

Class Name	Functionality	DataModel	Section	Table	Field
Half	Makes an element half the size of it's parent cotainer		✅	✅	✅
OneThird	Makes an element one third the size of it's parent cotainer		✅	✅	✅
TwoThirds	Makes an element Two the size of it's parent cotainer		✅	✅	✅
OneFourth	Makes an element one fourth the size of it's parent cotainer		✅	✅	✅
ThreeFourths	Makes an element one fourth the size of it's parent cotainer		✅	✅	✅
OneFifth	Makes an element one fifth the size of it's parent cotainer		✅	✅	✅
TwoFifths	Makes an element two fifths the size of it's parent cotainer		✅	✅	✅
ThreeFifths	Makes an element three fifths the size of it's parent cotainer		✅	✅	✅
FourFifths	Makes an element three fifths the size of it's parent cotainer		✅	✅	✅