[Bug] Bulma minireset.css is breaking formatting in downstream projects

[TimidRobot]

Description

Vocabulary v2020.11.3 CSS is overly generic. It breaks basic formatting. Any HTML that is not explicitly styled (and some that is) looks terrible.

Examples:

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none; 
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,th {
    padding: 0;
}

Reproduction

De-minnify https://unpkg.com/@creativecommons/[email protected]/css/vocabulary.css

Expectation

CSS should be neither overly specific (results in a lot of duplication) nor overly generic (breaks rendering, violates principle of least astonishment).

[brylie]

It breaks basic formatting. Any HTML that is not explicitly styled (and some that are) looks terrible.

Yes, good point.

We traced the issue down to the Bulma framework, which includes a minireset.css and removed the minireset.css included in PR #1023. We can make a Vocabulary release now without the Bulma minireset.css (https://github.com/creativecommons/project_creativecommons.org/issues/173).

There is a longstanding issue in the Bulma project optionally excluding minireset.css from a Bulma builds. We will need to be aware that in projects where we include Bulma via CDN, we may re-introduce the minireset.css.

[brylie]

I suppose the solution we are converging on is, aside from the idea of deprecating Bulma, to only use the Vocabulary project build since it should contain all of Bulma core styles, including our overrides. As mentioned, the next Vocabulary release should exclude the minireset.css.

cc: @MuluhGodson

[MuluhGodson]

Yes that's correct, Vocabulary already has most of the Bulma styles and including those we have overridden. I contacted the author of Bulma if he had any plans of releasing a Bulma build without Minireset.css

[brylie]

OK, cool. I'll prepare the new Vocabulary release today.

[annatuma]

Thanks for the thoughtful response here folks! Looking forward to Vocabulary being more usable (and celebrating a new release).

[brylie]

I made some progress on the Vocabulary release by separating all of the Sass files into a fresh project following the Bulma docs. I'm considering keeping the styles separate with only essential dependencies that are needed to compile Sass to CSS, namely Webpack and the sass package.

There were just too many issues trying to build the styles in the current Vocabulary project. The other Vocabulary dependencies like Storybook, Vue, node-sass, etc. seemed to create enough complexity and deprecation warnings that the Vocabulary, and by extension Chooser, is in a fairly unhealthy state.

[brylie]

@TimidRobot, can you provide some more context of where you are encountering layout issues stemming from Bulma? Then, we may be able to troubleshoot further with that additional information.

[TimidRobot]

can you provide some more context of where you are encountering layout issues stemming from Bulma? Then, we may be able to troubleshoot further with that additional information.

@brylie ~~I don't think Bulma is the issue. It looks like jgthms/minireset.css is the culprit. Excerpt from linked Reproduction CSS:~~

EDIT: re-reading the comments above, I see that Bulma is what is including minireset 🤦🏻

I don't have ready implementation examples. I've mostly worked around the obvious issues with CC Vocabulary classes. However, the CSS examples I showed from the linked Reproduction CSS speak for themselves.

[TimidRobot]

I expect the severity of this issue can be reduced. Once the new CC Legal Tools Data is merged, we can begin triaging display issues and come back to this issue, if needed.

[brylie]

There may be a quick fix. In the CC Legal Tools templates, add a <div class="content">...</div> around the dynamic portion of the code.

Bulma provides the content class as a fallback for parts of the document generated from WYSIWYG editors or other content management processes where adding individual classes on the page elements is not possible.