Styleguides / Pattern library / Component documentation

[jonathanb_1]

Has anyone had any experience of setting up a styleguide / pattern library / component documentation which is used alongside an implementation of AEM?

It would be capable of consuming the AEM components whilst providing documentation and support materials for developers and authors. Something like this http://www.philips.co.uk/componentlibrary/home.html. This could be done as a PDF or other document but these will often fall out or sync and are not updated.

Any ideas?

[smacdonald2008]

Most AEM components now should be done via HTL. I would start with the HTL spec: 

https://github.com/Adobe-Marketing-Cloud/htl-spec

Here is the HTL docs: 

https://docs.adobe.com/docs/en/htl/overview.html?wcmmode=disabled

The docs provide overview information that you would find in typical pattern docs. 

We have a lot of end to end example articels on building components with HTL. For example - to learn how to build a HTL component that contains a Java backend that uses WCMUsePojo -see:

https://helpx.adobe.com/experience-manager/using/first_htl_WCMUsePojo.html

From that article - there are links to a lot of other material including 2 ATCE sessions. 

Now if other communtyu members wrote some blogs/docs on component dev - please post here too. 

Hope this helps... 

[jonathanb_1]

Thanks for those, I don't think they're quite what I'm looking for.

By a pattern library / styleguide I mean something like these:

• https://standards.usa.gov/
• http://www.bbc.co.uk/gel/guidelines/category/design-patterns
• http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

Something that can be used as a reference resource for authors or developers which lists out available components, shows examples of their usage and notes about how they are authored. It would be ideal if it used the actual components of the production website so any changes are always in sync.

Thanks

[smacdonald2008]

In AEM, there is documentation about Components and development in the docs: 

https://docs.adobe.com/docs/en/aem/6-2/develop/components.html

We have many articles that show you step by step how to code specific example components.  

You will find a lot of end to end articles here on AEM component development -- 

https://helpx.adobe.com/experience-manager/topics/how-to.html

[smacdonald2008]

In addition to the doc topics and component articles - there is also plenty of reference material too: 

https://docs.adobe.com/docs/en/aem/6-2/develop/ref.html

[fatbaldboy]

Hi Jonathanb - did you get anywhere with this?

I'm looking at the same issue.

Trying to create a kind of 'playbook' for components that someone in UX (or anyone I guess) that'll be considering the creation of a page might use as a reference to help make decisions.  Very much a reference tool.

At the moment we're considering recreating the components in within a design package: this (as you can imagine) has both up and downsides.

[jonathanb_1 · Accepted solution]

Hi,

Didn't get very far with it. I don't think there is much out of the box that can help with this. I think it will be building something custom that pulls out any components and implements some of the AEM apis to gather information about usage.

[smacdonald2008]

Correct - such functionality would need to be built and not offered ootb.