Styling Jira Cloud and Server add-on

Jira Development
, ,
#1

Hello community and team!

We are about to start Jira add-on targeted for Jira Cloud and Jira Server versions and we have doubts what styling/component approach should we use. We know that currently there is AUI and ADG 3.

As per my understanding now AUI is for Server version and for Cloud we are supposed to use new ADG 3. Having two separate styling/component approaches does not suit us. We want to have single version of styles/components and concentrate on implementing of business logic. So as result we have following questions:

  • Is it ok to use either AUI or ADG 3 styles for booth Jira versions? Are there any restrictions on this from Atlassian side?
  • Is it ok to do not use neither AUI nor ADG 3 and come with own styles? Are there any restrictions on this?

Will be very thankful for any comments.

1 Like
#2

Hi @vkrupach!

If I understand you correctly, you want to build your UI once and ship to both Cloud and Server? If so, you’re not alone! There are a number of vendors that do exactly this.

As an example of a vendor shipping to both Cloud and Server from the same codebase, check out a talk from @edave at AtlasCamp a few years ago: https://www.youtube.com/watch?v=xJlwjLSDVMM

If you choose to build your UI using Atlaskit and React, nothing is stopping you from shipping that same UI to Server. Similarly, if you use AUI to build your UI, nothing prevents you from shipping that in your Cloud product, either.

When it comes to the Atlassian Design Guidelines (ADG) and design differences between Cloud and Server, the differences are disappearing over time. The look and feel of Server and Cloud products is aligning. You can see this in the various announcements from the Server products:

If you decide to match the ADG, your product will not look out of place in either Cloud or Server. However, you do not need to use the ADG when building your product – after all, they are “guidelines”, not “rules”.

There are advantages to using either AUI or Atlaskit in your UI layer. Most notably, as they are in use by the core Atlassian products themselves, they receive updates and improvements from Atlassian staff. They both implement the ADG, so you would also save time interpreting and implementing those.

I hope this helps clarify things for you.

Cheers,
Daz

2 Likes
#3

Hi @daz!
Thank you very much for the detailed clarifications! I guess we will base our styling on ADG 3 reduced UI pack as it looks more modern.

1 Like