Highlighted

What is the process for a HTML developer to style core components?

ramesisv

28-10-2019

Hi,

We are about to start styling core components and I am trying to find a process to do so.  Reading this article https://helpx.adobe.com/experience-manager/6-5/sites/authoring/using/style-system.html#UseCase​​ shows that the following tasks happen outside of AEM which makes sense to me.

  • The web designer creates different visual variations of a component.
  • The HTML developer is provided with the HTML output of the components and the desired visual variations to implement.
  • The HTML developer defines the CSS classes that correspond to each visual variation and are to be inserted on the element wrapping the components.The HTML developer implements the corresponding CSS code (and optionally JS code) for each of the visual variations so that they look as defined.
But I cannot find an example or instructions on how to setup a development environment for this.  Where do I get the baseline AEM CSS/JavaScript needed to render the Core Components?   Do I just go to the component sample page and manually download what I need?  For example if I wanted our html developer to style an AEM  button I would tell them go here https://opensource.adobe.com/aem-core-wcm-components/library/button.html​ then grab the mark up and download the CSS and JS referenced by the page and then style it?

I would think there is a github project or some export feature in AEM where I can extract the html, css and JavaScript assets needed so that I can give them to the HTML developer.
Thank you in advanced
Ramesis