How do I style my own extension with Coral?

Avatar

Avatar

ml38989156

Avatar

ml38989156

ml38989156

21-12-2018

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?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

brandon_pack

Employee

Avatar

brandon_pack

Employee

brandon_pack
Employee

03-01-2019

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.

Answers (2)

Answers (2)

Avatar

Avatar

StewSchilling

MVP

Avatar

StewSchilling

MVP

StewSchilling
MVP

21-12-2018

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>

Avatar

Avatar

StewSchilling

MVP

Avatar

StewSchilling

MVP

StewSchilling
MVP

03-01-2019

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.