Bootstrap is being loaded twice

[choldgraf]

I ran into a weird bug and I realized that it was because bootstrap CSS was being loaded twice. Here's a screenshot of the raw HTML for one of our pages:

I believe that the problem is we are manually loading bootstrap from the CDN, and then it seems to also be loaded from calling the {{ css() }} function. Any idea why that function would load bootstrap?

[jorisvandenbossche]

The second highlight shouldn't be bootstrap, it's our custom css that is called "sphinx-bootstrap.css": https://github.com/pandas-dev/pydata-bootstrap-sphinx-theme/blob/master/pandas_sphinx_theme/static/sphinx-bootstrap.css_t

Can you describe the bug you were seeing?
I also ran into a strange loading problem recently (#79)

[choldgraf]

Ah that's a good point, I just saw "bootstrap" in another file and assumed it was being double-loaded.

The problem I ran into was with a button (to close, e.g., a topbar or sidebar). It was a slight modification of this theme's CSS but all the files etc were loaded the same. I found that I needed to click the button twice in order to trigger its behavior. When I looked online a lot of people reported that this happened if you loaded bootstrap twice instead of once, which is why I started looking for other files called bootstrap.

What is sphinx-bootstrap.css_t? And what's the difference between it and custom.css?

[jorisvandenbossche]

What is sphinx-bootstrap.css_t? And what's the difference between it and custom.css?

The _t is because it is "templated". So in principle you can use jinja template variables in the css as well (eg depending on a config option), but since we don't use that, we should remove the "_t".
The two different files is more a historical left-over, no good reason, we should clean it up / give better reasons (both contain custom css for the theme)

[choldgraf]

Ah yeah that makes sense - hmmm, so then I need to figure out why the button behaves differently

[hoetmaaiers]

I made some attempt to restructure the css files into a single scss stylesheet. In this attempt the sphinx-bootstrap.css_t is merged into theme.scss. Still work has to be done in improving selectors and structure in theme.scss. But this refactor process might have a better momentum when implementing the full width idea: #17.

Therefore a smaller PR for style restructuring is over here: #101.

[hoetmaaiers]

This one is solved I believe?

[choldgraf]

yep!