AEM Custom development requirements

When developing Custom tools/Calculators etc. for AEM, please use the following informations and requirements

  • Always make sure that it is as easy as possible to translate
  • Avoid loading external content as much as possible
  • Make sure it is on a page template that supports custom html

CSS

  • Use styling from Grundfos.com, by reusing their ID/CLASS’s as much as possible
  • All custom CSS ID and CLASS’s must be prefix with brandbox- (example: .brandbox-classname {} ) to avoid conflict with the Grundfos styling.
  • Follow Grundfos CSS coding language
  • CSS must be minified on delivery.
  • Use inline CSS on AEM pages, and external loaded CSS on GPC pages.
    Please note, that product-selection pages can ONLY execute CSS from a stylesheet loaded from Assets:
    Upload CSS file here:
    https://author-grundfos-prod-65.adobecqms.net/assets.html/content/dam/global/html/cssInsert this code in an CUSTOM HTML component on the page:
    <link rel=”stylesheet” href=”https://author-grundfos-prod-65.adobecqms.net/assets.html/content/dam/global/html/css/INSERT-FILE-NAME.css”>
    Remember to publish the CSS file in Assets

 

 

@media queries (Breakpoints)

  • @media(max-width:479px)
  • @media(min-width:480px) and (max-width:767px)
  • @media(min-width:768px) and (max-width:1023px)
  • @media(min-width:1024px) and (max-width:1199px)
  • @media(min-width:1200px)
  • @media(min-width:1536px) (New after reskin)

AEM Grid stylesheet:
https://www.grundfos.com/etc.clientlibs/settings/wcm/design/aembase/grid.min.css

Images/Icons/Infographics

  • All Images must be loaded from the AEM Assets (DAM)
  • Icons/Infographics. which not contains text, can be used as DATA URL images to avoid external load

JAVASCRIPT

  • Pure vanilla Javascript
  • Javascript needs to be embedded into the html – not loaded from external file
  • No jquery, since there is not an option for loading external libraries.

Please note, that product-selection pages can NOT execute javascript at all
Example page: https://product-selection.grundfos.com/products/alpha?tab=explore

Device testing

Make sure to test code in the following browsers both doing development and before final delivery:

Desktop:

  • Google Chrome (Current version + 2 versions back)
  • Microsoft Edge (Current version + 1 version back)
  • Mozilla firefox (Current version + 1 version back)
  • Safari (Current version + 1 version back)
  • Sougou browser (Current version)
  • QQBrowser  (Current version)
  • Yandex.Browser  (Current version)

 

Mobile/tablet:

  • Chrome Mobile (Current version + 1 version back)
  • Safari (iOS) (Current version + 1 version back)