[#32699] - [4.0b7] bootstrap default-conflicts in template.css: dropdown-menu[style]
- Closed
- 6 Apr 2021
- Medium
- Build: staging
- # 32699
Hey,
I'm working with bootstrap since some years in different CMS and I was happy to see joomla 4 is coming with bootstrap 5. But your way how you are mixing own joomla-styles with the bootstrap-core-styles creates a lot of unnecessary amount of time and lines of code, to get it back to the default-styles.
One of the badest examples is this in the template.css, which creates a conflict with the behavior of the classes .dropdown-menu-start and .dropdown-menu-end. For which reason is it there? This is also in the template.css of the backend... but why:
.dropdown-menu[style] {
right: auto !important;
}
I could count more points like this, to demonstrate it why it makes no sense to mix the bootstrap-styles with the joomla-own-styles. You are destroying on this way so many important bootstrap-defaults. I would prefer you would leave the bootstrap-files separate files and put the joomla-own-styles in another file, located right after the bootstrap-css-files.
for example:
/bootstrap/css/bootstrap.min.css
/css/template.css
/bootstrap/js/bootstrap.bundle.min.js
/js/template.js
On this way everyone can get a better overview between the bootstrap-overrrides and the joomla-own-styles. It would be also easier to update the bootstrap-core-files on the frontend but this mix of the bootstrap-defaults with the joomla-own-shizzle in a single file make it very complicated to build own frontend-templates. For example in the cassiopeia-template there are so many not bootstrap-related styles and overrides, which are creating conflicts with the framework-defaults and if I remove the template.css completely, then a lot of needed joomla-styles for forms etc are gone. This sucks, sorry!
joomla-cms-bot
- | Labels |
Added:
?
|
||
| Title |
|
||||||
dropdown-menu[style] is not in the files inside the scss-folder.
with the joomla-own-shizzle in a single file make it very complicated to build own frontend-templates
Obviously, you never created a Joomla template! How the heck the styles of the default Joomla template will ever affect the CSS of your own template?
Obviously, you never created a Joomla template! How the heck the styles of the default Joomla template will ever affect the CSS of your own template?
The joomla-Styles are overriding the bootstrap-defaults, which is causing conflicts with bootstrap itself. Try a look at here and try to rebuild it with dropdown-menu-end:
https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment
Or let us get a look on the navbar-defaults of BS5 - give it a try with joomla-defaults in the template.css on the frontent and on the backend:
The joomla-Styles are overriding the bootstrap-defaults
It doesn't really matter what is in the demo template that comes with Joomla, create your own and do whatever you like...
It doesn't really matter what is in the demo template that comes with Joomla, create your own and do whatever you like...
Ya for sure I could rebuild the whole joomla frontend-standards with html-overrides for navigations, edit-forms, tabs etc. and with the next joomla-updates it bricks completely and I have to start from scratch... OMG
That’s what the rest of us do, especially all of us that find bootstrap a bad framework and decide to use something better...
I was not able to found the line you mention above neither in atum nor in cassiopeia. Can you please tell me the line number?
Since the standard templates where created before BS5, it can be that some inconsistencies are present. We will be grateful for PRs correcting the scss files.
One of the badest examples is this in the template.css, which creates a conflict with the behavior of the classes .dropdown-menu-start and .dropdown-menu-end. For which reason is it there? This is also in the template.css of the backend... but why:
I think you are very confused.
If you look you will see that template.css is created by compiling various scss files. These scss files are either from bootstrap or from the template itself. The latter either being an override or an addition.
So to put it very simply the template.css of both atum and cassiopeia are created so that they you do NOT load additionally the bootstrap css. Which of course is the correct way so that you can use the variables, mixins, helpers in the way they are intended to be used by bootstrap.
The only use of the dropdown-menu-start that you refer to is directly from bootstrap
I was not able to found the line you mention above neither in atum nor in cassiopeia. Can you please tell me the line number?
Since the standard templates where created before BS5, it can be that some inconsistencies are present. We will be grateful for PRs correcting the scss files.
/templates/cassiopeia/css/template.css line 3255
I think you are very confused.
I know how the scss-compiling works but the cassiopeia is a bad example how a template can have mixed styles. For example: it comes with the bootstrap-grid and also with another grid...why? This is really confusing because I want only get a overview of the joomla-core-styles/scripts to check, which core-stuff is needed besides the BS5-styles. How should I know what is really needed and what is only added for this template? Is this not important to know before I start compiling the files in a new template? cassiopeia is the default-template, which is shipped with this joomla-version and it bricks so many bootstrap-standards by default. How or where can I get a overview?
/templates/cassiopeia/css/template.css line 3255
and it bricks so many bootstrap-standards by default.
Please give an example
Download the Full-Package of the latest 4.0 beta7 pre-release: https://github.com/joomla/joomla-cms/releases/tag/4.0.0-beta7
No thanks - I would much rather work with up to date code. That is already 166 commits behind.
Better to test with the nightly build if you cant work with git. https://developer.joomla.org/nightly-builds.html
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-04-06 21:10:04 |
| Closed_By | ⇒ | neralex |
The effort to remove everything unnecessary in order to create a basis for a clean template is disproportionate to the benefit. It would be much better to start with a minimal set of really necessary styles and scripts, and gradually activate more internal functions, rather than having to start with a completely overloaded system. All local repos removed.
Have you looked at the scss files. It should be pretty obvious which of those are "overriding" bootstrap and which are "joomla"