Best Practices
Block Creation
- Always use native BWEB blocks (wrapper, text, button, listbox) rather than code blocks
- Object properties (htmlProperties, objectProperties, etc.) must be {} never null
- Each block must have a unique and descriptive blockName
Native CSS vs customClass
| Use Native CSS | Use customClass |
|---|---|
| Layout (flex, grid) | Specific Tailwind classes |
| Font size | Gradients, animations |
| Base colors | Combined utility classes |
Rule: prefer native BWEB CSS properties when they exist. Use customClass for everything else.
Naming Conventions
| Element | Convention | Example |
|---|---|---|
| Wrapper | wrapperSectionName | wrapperSupplierList |
| Button | btnAction | btnSaveSupplier |
| Field | fieldFieldName | fieldSupplierName |
| Listbox | listboxName | listboxSuppliers |
| Text | textDescription | textPageTitle |
Block Duplication
To duplicate cards or sections, use the repeat/forEach mechanism on a wrapper. The parent wrapper contains a card template that is repeated for each element in the collection.
Recommended HTML Structure
A typical page follows this structure:
wrapper (main container, max-w-7xl, mx-auto)
wrapper (page header, flex, justify-between)
text (title)
button (main action)
listbox (data)
wrapper (detail section, conditionalDisplay)