[Bug]: DNN 10 breaks DNN UX Guide formatting

[stephen-lim]

Is there an existing issue for this?

• [x] I have searched the existing issues

What happened?

I understand the DNN UX guide is outdated if compared to newer standards like Bootstrap, however, it is still published online as The standard used by DNN and has been used in many 3rd party modules. DNN 10 should strive to ensure compatibility with the DNN UX standards to allow 3rd party modules developers time to migrate to a different framework. We're seeing a lot of broken formatting in our modules that previously followed the DNN UX guide.

Steps to reproduce?

1. Go to https://uxguide.dotnetnuke.com/UIPatterns/SimpleFormDemo.html
2. Open developer tool and select the form demo and copy the rendered HTML from the developer window. We want the section of the rendered HTML and not the HTML from the View Markup tab since we don't need any of the ASP tags.
3. Go to DNN 10 and create a plain Test page.
4. Add a HTML module and paste the copied HTML into the source view.
5. Notice many of the HTML elements look very different and "broken" compared to the demo.

Current Behavior

HTML formatting rendered is broken compared to what is shown on the DNN UX demo site.

Expected Behavior

DNN 10 should strive to provide backward compatibility at least with its own previous published standards to allow developers the time to migrate to a different framework (e.g Bootstrap).

Relevant log output

Anything else?

No response

Affected Versions

10.0.0 (latest v10 release)

What browsers are you seeing the problem on?

Chrome

Code of Conduct

• [x] I agree to follow this project's Code of Conduct

[mitchelsellers]

This is a very interesting, and slight unfortunate situation that we should take into consideration.

We, as in the open source community, have no control over that published guidance, nor that website. The invidiauls that control that site also do not participate with us in conversation.

Those standards have fallen out of line for quite a while, it isn't just 10.x that did this

@dnnsoftware/approvers we should maybe revisit/discuss this a bit strategy wise.

[david-poindexter]

Well, I am pretty sure the rework effort for default.css tried to maintain compatibility with the DNN 6 UI/UX guide. I'll defer to @valadas here.

[jeremy-farrance]

Just adding an opinion.

If work is done to fix things like this (style guide standards from 10+ years ago?), we should consider doing it as "off by default" and you can turn it on if you need it. So the solution might be to add a per-portal setting named something like "DnnNNCompatility" and when on, it loads an additional CSS file that adds the missing styles. But again, is off by default.

This could become a really useful dumping ground for CSS compatibility tricks. As a bonus, lets say the included CSS is a file name compatibility.css and exists in the root of each Portal - AND - you can edit it in PB/Settings/Custom CSS (which would need a dropdown to switch between Default.css and the new one(s)).

Honestly, we've been working on a new theme for DNN for our work as an agency and having junk/poor CSS in play makes modern theming harder. I'd really like to see DNN avoid retaining or reintroducing ANY CSS styles from prior to 2019.

This would allow us to keep the really necessary stuff separate from the CSS styles needed by older sites/themes/modules and other edge cases.

[valadas]

I can confirm that some efforts were made on my part to keep compatibility at least for now with the UX/UI pattern. That was probably missed and we should fix it.

That being said, this was a step-1 and I do love the idea of separating and optionally load the UI/UX pattern but that can only be done when we ourselves don't use it in all of the platform too which is currently not the case.

[valadas]

I would also like to separate everything jquery-ui specific and only load it if jquery is loaded ;)