Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-111253

Improve HTML Layout Generation Strategies in DXP

    Details

      Description

      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

        Attachments

          Activity

            People

            Assignee:
            support-lep@liferay.com SE Support
            Reporter:
            jose.balsas Chema Balsas
            Recent user:
            Daniel Lee
            Participants of an Issue:
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:

                Packages

                Version Package