Rules for AEM front end development | Community
Skip to main content
virginiarcruz
virginiarcruz
Level 2
May 4, 2018

Rules for AEM front end development

  • May 4, 2018
  • 1 reply
  • 5414 views

Folks,

I'm starting now in AEM.

Are there any HTML / CSS / JS rules that should be followed for development?

Any practice that should be avoided?

I ask this because I have observed that in the workflow the static HTML is developed for the product and when it is passed to implement in AEM we have some problems running in static but not working in AEM.

For example: use measures like height: 100vh in css, break in edit mode of AEM.

Are there any rules in this regard to improve the flow of development?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    1 reply

    smacdonald2008
    smacdonald2008
    Level 10
    May 4, 2018

    Here are some thoughts to get you started:

    To develop AEM components - you should use HTL. See - htl-spec/SPECIFICATION.md at master · Adobe-Marketing-Cloud/htl-spec · GitHub

    .

    HTL can include Java side too - see this for an example -  Scott's Digital Community: Creating an AEM HTML Template Language component that uses the WCMUsePojo class

    (different AEM Versions are referenced here)

    When building dialog components - you should Granite Resource types.  Avoid using JSPs and Classic UI data types.

    See this article to learn how to work with HTL and granite data types: Building Experience Manager Components using Granite/Coral Resource Types

    When building AEM sites in 6.3/6.4 - you should use Editable Templates. See this article -- Adobe Experience Manager Help | Creating an Adobe Experience Manager 6.4 website using Editable Templates  (also includes how to handle CSS included in a site - notice the use of a client library)

    When building AEM projects - use Maven and the AEM IDE plug-in tool - details here - see: Getting Started with AEM Sites - WKND Tutorial

    These resources should get you up and running.

      smacdonald2008
      smacdonald2008
      Level 10
      May 4, 2018

      As you are new in AEM - see this resource as well -- Getting Started with AEM-Sites

        smacdonald2008
        smacdonald2008
        Level 10
        May 4, 2018

        As far as CSS rules when using AEM - there is not a document that list which CSS rules should and should not be used.

        Terms & ConditionsAccessibility statement

        Loading footer...