Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

How do I style my own extension with Coral?

Avatar

Avatar
Validate 1
Level 1
ml38989156
Level 1

Likes

4 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Boost 1
View profile

Avatar
Validate 1
Level 1
ml38989156
Level 1

Likes

4 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Boost 1
View profile
ml38989156
Level 1

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
Seeker
Employee
brandon_pack
Employee

Likes

30 likes

Total Posts

40 posts

Correct Reply

10 solutions
Top badges earned
Seeker
Unlock
Publish 1
Ignite 1
Give Back 3
View profile

Avatar
Seeker
Employee
brandon_pack
Employee

Likes

30 likes

Total Posts

40 posts

Correct Reply

10 solutions
Top badges earned
Seeker
Unlock
Publish 1
Ignite 1
Give Back 3
View profile
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
Springboard
MVP
StewSchilling
MVP

Likes

334 likes

Total Posts

272 posts

Correct Reply

84 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Establish
Contributor
View profile

Avatar
Springboard
MVP
StewSchilling
MVP

Likes

334 likes

Total Posts

272 posts

Correct Reply

84 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Establish
Contributor
View profile
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
Springboard
MVP
StewSchilling
MVP

Likes

334 likes

Total Posts

272 posts

Correct Reply

84 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Establish
Contributor
View profile

Avatar
Springboard
MVP
StewSchilling
MVP

Likes

334 likes

Total Posts

272 posts

Correct Reply

84 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Establish
Contributor
View profile
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.