There's currently too many different ways to do HTML layouts in DXP (see Reference). Many of them deprecated for a while.
The goal of this epic is to analyze existing HTML layout strategies and implement a plan to update them.
Acceptance Criteria
- A document with current strategies to layout elements in DXP
- A set of new and coherent new strategies that includes:
- List of clay:tags that can be used for layouts
- Examples of usages
- Documented guidelines and best practices
- Clay layout utilities
- Clay layout components
- All existing tags that should no longer be used are marked as deprecated including a description on how to migrate to the new utils
Reference
CSS Classes
| Class |
Usages |
| col-* |
198 |
| container-* |
486 |
| row |
105 |
Tags
aui
| Util |
Description |
Usages |
| aui:button-row |
Creates a button row <div> tag to wrap <aui:button /> components and offer additional styling |
228 |
| aui:col |
Creates a column to display content in an <aui:row /> component |
181 |
| aui:container |
Creates a container <div /> tag to wrap<aui:row /> components and offer additional styling |
12 |
| aui:field-wrapper |
Creates a <div /> tag to wrap form fields and offer additional styling |
176 |
| aui:fieldset |
Creates a <div /> tag to group related form elements and offer additional styling |
451 |
| aui:fieldset-group |
Creates a <div /> tag to group fieldset elements and offer additional styling |
98 |
| aui:row |
Creates a row to hold <aui:col /> components |
77 |
liferay-ui
| Util |
Description |
Usages |
| liferay-ui:section |
?? |
103 |
liferay-frontend
| Util |
Description |
Usages |
| liferay-frontend:edit-form |
Creates a form that offers additional styling and custom namespacing |
104 |
| liferay-frontend:edit-form-body |
Creates an edit form body that offers additional styling |
104 |
| liferay-frontend:edit-form-footer |
Creates an edit form footer that offers additional styling |
101 |
| liferay-frontend:fieldset |
Creates a <div /> tag to group related form elements and offer additional styling |
160 |
| liferay-frontend:fieldset-group |
Creates a<div /> tag to group fieldset elements and offer additional styling |
132 |
Epic
Minor