Custom stylesheet overrides base elements in Astrum UI

[henwen]

Background: I have a custom stylesheet added via data.json. As expected, my custom styles aren't applied to Astrum's UI, except in one case –  base element rules (i.e.margin-bottom on p, list-style on ul). If these base element styles are set at all, they're set by the browser ("User Agent Stylesheet"), not Astrum.

Core Issue: If a base element doesn't have any styles set by Astrum, and the custom CSS does, custom CSS for these elements will bleed into the Astrum UI.

I'm pretty sure adding a CSS reset (i.e. normalize) to the project should fix this use.

[RyanHavoc]

@henwen This will always be a challenge. The issue with add a nomalize.css is this will effect the project styles (if normalize.css isn't being used in the project) so you then have the reverse issue.

What we try to do is have a class on every element in Astrum and "reset" on a per element basis. If you could provide us with a list of what elements are being effected by your project base styles that would be helpful. I can then reset them in the Astrum stylesheet?

[henwen]

Thanks for the quick response @RyanHavoc. That's a difficult one indeed. The only elements that are currently causing big issues for me are ul and ol (my lists are unstyled by default).

Alternatively, might help to think of this issue as this user story: As a user of markdown, I expect the outputted html to have the standard visual traits of generated markdown.

Looking at it like that, adding a reset for all elements that can be generated by markdown might be a good way to avoid dealing with pesky, one-off reset requests like mine.

Thanks again, keep up the good work!

[bertvh]

Same issue here. Astrum is my favorite styleguide tool (easy to use, no runtime component, flexible, beautiful). I'm building a styleguide on top of materializecss. Including that lib messes up the whole UI:

)

The proposed solution (reset on each element) would probably work. Any progress there?

[bertvh]

One thing that could really fix this issue is wrapping all astrum-ui specific things in a webcomponent.
I also found this: https://github.com/premasagar/cleanslate

EDIT: experimented with webcomponents.. doesn't work since shadow-dom style isn't applied to the content of a webcomponent tag ().
EDIT 2: Could still work: https://github.com/SC5/sc5-styleguide/pull/280/files

[davidhund]

I, too, was surprised to find that Astrum styles could override my pattern styles and vice versa.
IMO this is a pretty big flaw.

You can remedy this partly by styling Astrum UI very specifically, but better would be to render patterns in an iframe: this iframe would then only load our pattern-specific styles (and scripts).

A good by-product of rendering patterns in an iframe is that we can more easily have responsive patterns, responding to media-queries. At the moment this requires resizing the complete browser window, and even then the Astrum media queries and UI interferes with our patterns.

[RyanHavoc]

@henwen We've made efforts to address this for Astrum 2.0.0 which is now in pre-release, details here: https://github.com/NoDivide/astrum/releases/tag/2.0.0-rc.0 Give it a go, let us know how you get on.