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.
This tutorial is designed to work with AEM 6.4. If you are running AEM 6.3, you will need to be running AEM 188.8.131.52 with FP22818 or newer.
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.
This tutorial leverages HTML5Up.net's Dopetrope design. There are two reasons for this,
- 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.
The design is well suited for this tutorial as it is responsive, representative of a modern web aesthetic and generally simple to understand.
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,
Any issues or problems with the tutorial please create an Issue on Github.
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 Overview
- Part 0 - Setup
- Part 1 - AEM Core Components
- Part 2 - Preparing the Page Template
- Part 3 - Content-first Authoring
- Part 5 - Applying the Basic Dopetrope Style
- Part 6 - Applying the Teaser Component CSS-based Styles
- Part 8 - Exploration of How Other Components Were Styled