How do I style my own extension with Coral?

[ml38989156]

Hello,

I've created my own extension, she's working very well, I'm very proud of her, but she's a bit...  Ugly.

How can I integrate Coral UI with my extension so that I can design my interface is in keeping with the rest of Launch?  Is there a CDN I can use?

[Stewart_Schilling]

You can just view frame source on the view of an extension that uses Coral.

Such as:

https://assets.adobedtm.com/extensions/EP9f64ab5391d540b0bb8658a244bbeb36/dist/dataElements/javascri...

This has the following in the head :

<link rel="stylesheet" href="//assets.adobedtm.com/activation/reactor/coralui/3.17.0/css/coral.css">

<script src="https://use.typekit.net/buj6cmr.js"></script>

<script>try{Typekit.load({ async: true });}catch(e){}</script>

[Stewart_Schilling]

Did this answer your question?  If so, please mark it as correct.  If you are still stuck, let me know and I'll see if I can help.  We at Search Discovery are using Coral UI for styling on all three of our Launch extensions.

[brandon_pack · Accepted solution]

Just as a side note, Adobe is moving from Coral to a new, but similar, specification called "Spectrum" which is what the Launch UI now uses.   The CSS has been open-sourced if you want to use anything from it.  In the futurte JS and other components will be open-sourced as well:  GitHub - adobe/spectrum-css: The standard CSS implementation of the Spectrum design language.