How do I style my own extension with Coral? | Community
Skip to main content
ml38989156
ml38989156
New Participant
December 21, 2018
Solved

How do I style my own extension with Coral?

  • December 21, 2018
  • 3 replies
  • 4672 views

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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by brandon_pack

    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.

    3 replies

    brandon_pack
    brandon_packAccepted solution
    Employee
    January 3, 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.

      Stewart_Schilling
      Stewart_Schilling
      New Participant
      January 3, 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.

        Stewart_Schilling
        Stewart_Schilling
        New Participant
        December 21, 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/javascriptVariable.html

        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>

          Terms & ConditionsAccessibility statement

          Loading footer...