AUI library's css changed global style

in AUI’s dist css file, I found that there are lots of css rule that modify element style.
such as:

body,

div,

fieldset,

form,

h1,

h2,

h3,

h4,

h5,

h6,

html,

img,

p,

pre {

margin: 0;

padding: 0

}

In that case, when I import this libray I found that some element’s style changed.

left is normal, right is after import AUI.

how can I resolve this problem to avoid aui’s element selector css influence the webpage css?

Hi @NoTalkly, if you are developing the plugin for Server/DC products, then you don’t need to include the CSS files from AUI’s npm package. The product runtime has all the needed CSS files.

Thanks,
Maciej Adamczak
Atlassian Developer

1 Like

I just want to use AUI to render A label like this. so I import the AUI and get issue information from jira api instead of your metions implementation plan.

I think that AUI componnent library should can import just one of components which developer need. besides,the style rule should alse split to a lot of css file include like common.css, components.css instead of just a full css file.

image

By the way, I found some css rule like that:

image

that means if someone want to import the AUI library, there font color and webpage background change. I think this rule will reduce the desire that developer import this libray to their webpage.

I don’t fully understand what your use case of AUI is. The AUI library is part of the Atlassian ecosystem family. You can use its API and patterns to develop a plugin for Atlassian Server or DC products.

As I mentioned in the previous reply, you don’t need to include any of the CSS files from the AUI NPM package in the Atlassian plugin code. Those styles are provided by the product runtime.

If your usage of AUI is not related to Atlassian products or developing plugins, we can’t help you.

so AUI just created for Atlassian Server or DC products’s plugin ?
I want to transplant some jira’s feature in my webpage for example create or display issue, and I am not good at java.

Hi @liyan03,

AUI was designed and built to be the foundational CSS on a page. This is why it includes a CSS reset and base styles for standard HTML elements. All of AUI’s components and behaviours expect and assume these CSS resets have been made. In this sense, AUI is not a “component library” like Atlaskit or other libraries built to allow importing single components at a time.

As per your request to render a label that looks like a Jira issue link, I’m afraid that AUI does not have a component or CSS in it that would help you do that. AUI is probably not the right library for you to use if that’s what you’re trying to render.

Are you building apps for Server, DC, or Cloud? Depending on which environment you are building for, there may be resources we can point you toward that you can make use of.

Cheers,
Daz

1 Like

nope, I I just want to transplant some jira’s feature in my webpage instead of Server, DC or Cloud.
for example I will display issue like in confluence display.