A multi-part tutorial showing how to use Adobe Experience Manager's (AEM) Style System in conjunction with Core Components and Template Editor to create radically different experiences using only front-end code (CSS and JavaScript).

Overview

This tutorial uses AEM's Style System to style Core Components, using only CSS and JavaScript, to re-create the Dopetrope design at HTML5up.net. Significant development time is saved when only front-end code is required to change the appearance of a component. 

After completing this tutorial you should understand,

  • How to use Experience Manage's Style System to apply new rules.

  • How to define how and when Styles are available to Components.

  • How, when used thoughtfully, the Style System and Core Components supports content-first authoring.

  • How to develop CSS (or LESS) and JavaScript to work with the Style System. 

Upon completion of the tutorial, you will have a home page built completely from AEM Core Components and styled using only front-end code (CSS and JavaScript) to achieve the brand aesthetic defined by the Dopetrope theme, using Experience Manager technologies. 

Note:

This tutorial is designed to work with AEM 6.4.  If you are running AEM 6.3, you will need to be running AEM 6.3.2.0 with FP22818 or newer.    

What we'll create

In this tutorial we'll go setting up and authoring an AEM Page page using only Core Components, using a content-first authoring approach. Once the page is fully composed via the content and components, each will be styled using AEM's Style System to achieve a customized.

The image below shows the initial state as well as the final page state.

start-final

Dopetrope

This tutorial leverages HTML5Up.net's Dopetrope design.  There are two reasons for this, 

  1. HTML5up is unaffiliated with Adobe or Adobe Experience Manager, and thus not predisposed to aligning its templates or design paradigms with patterns of Experience Manager.  This will add some reality to the tutorial, especially as you look to apply the concepts to your websites.
  2. The design is well suited for this tutorial as it is responsive, representative of a modern web aesthetic and generally simple to understand.

Github

This tutorial was originally delivered as a hands-on lab at Adobe Summit 2018.  All of the materials for the tutorial can be found on Github in the Adobe Summit 2018 repo,

GitHub: L725 - Accelerate your development with Experience Manager Core Components 

Any issues or problems with the tutorial please create an Issue on Github.

Resource Index

This tutorial leverages various resources, here's a list of those resources for your reference,

AEM Downloads

If your are running,

  • AEM 6.4 there's nothing additional to download.
  • AEM 6.3 please use these links to download the required packages,

Caution:

FP19008 ensures that the Content Fragment capabilities used in the WKND tutorial work with 6.3 + SP2. FP19008 should only be installed to use the tutorial and not in a production environment. A new feature pack is expected to be released shortly that is fully compatible with 6.3 + SP2.

Tutorial Table of Contents

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy