Use Bootstrap Styles

[sbwalker]

This issue is related to #395 but goes deeper into the customization of the UI for Oqtane. One item that became more obvious with the recent focus on Bootswatch themes is that the core framework does not properly utilize Bootstrap styles in all areas. In addition the core framework does not follow best practices in all areas which would allow designers to have control over styling the page output.

Specifically the Oqtane theme controls in Oqtane.Client\Themes\Controls ( ie. menu, logo, etc... )

• should use the standard Bootstrap markup and style specifications.
• should not rely on Blazor component properties to customize CSS classes
• should be wrapped in an outer DIV with an Oqtane specific class so that it is possible for designers to target their customizations at a control level without interfering with global Bootstrap styles ( ie. < div class="oqtane-menu" > ... < /div > ( currently some controls are wrapped in "app-" classes and others are not wrapped at all ).

The Oqtane module controls in Oqtane.Client\Modules\Controls ( ie. action link, permission grid, etc... ) and Oqtane admin modules Oqtane.Client\Modules\Admin should also follow the same approach as above - however they are lower priority as most are not always visible in the main user interface.

The default Oqtane theme(s) should limit the number of style overrides as much as possible so that other standard Bootstrap themes can be applied and have consistent results without requiring modifications.

[sbwalker]

Note that in order to fix the issues above, it will likely introduce some breaking changes for people who have already developed their own Oqtane themes. However they should be easy to resolve by adjusting your CSS. It is important to get this right before we release 1.0 as the UX is foundational to the framework.

[thabaum]

https://github.com/oqtane/oqtane.framework/pull/444

I used only the "form-group" bootstrap class for this PR and was thinking the same terms. Getting an Oqtane specific class that does not in any way refer to the CMS Oqtane would be best. Something more specific to the area of Oqtane.

A class name structure needs created however that follows a naming standard for the CSS classes, one we can all agree on which can be a long discussion. It is better we do it now than later and use whatever CSS naming conventions Microsoft community generally suggests for best practices and long term interest.

I can go with any naming conventions or class names as long as the names make sense to be added for styling sections of Oqtane.

For example the admin area could be the "admin-form" or "admin-table" for selecting ALL tables or forms in the admin area, along with "admin-table-login" or "admin-form-login" for more specific sections within components using the component name at the end to easily know and remember how to style.

My personal preference is lowercase like as follows:

admin-form admin-form-login admin-form-registration .... <section> - <tag> - <component>

Recommending to others to use the section part of the class for module or theme developers to create their own unique namespace.

Additional steps deeper into a form or page I would suggest possibly using an underscore or just keep the dashes going. I like thinking about each place as an object I want to be able to easily know how to connect to using CSS. The more generic and to the point the naming convention the more easier it is to remember.

[sbwalker]

@thabaum can you elaborate on "getting an Oqtane specific class that does not in any way refer to the CMS Oqtane would be best". Currently the core uses "app-" for the class prefix - which is very generic. I was suggesting we change it to "oqtane-" but that is opposite to what you are recommending. So I would like to hear the rationale.

[thabaum]

app- is what I am referring to which would work well. I suppose I am stating that branding should not be used in the naming, instead generic names like app-