Add custom css

[tcbegley]

This PR adds a pipeline for building Bootstrap and Bootswatch stylesheets with additional styling for Dropdown, DatePickerSingle and DatePickerRange from dash-core-components.

The resulting stylesheets are intended to be a drop-in replacement for the corresponding Bootstrap / Bootswatch stylesheets; they contain all the same styles as Bootstrap / Bootswatch, but will additionally apply consistent styling to any dcc.Dropdown, dcc.DatePickerSingle or dcc.DatePickerRange that is a child of an element with the dash-bootstrap class applied. For example

app.layout = html.Div(
    [
        html.Div(dcc.Dropdown(...), className="dash-bootstrap"),  # styles applied
        dcc.Dropdown(...),  # styles not applied
    ]
)

This is achieved by redefining the classes that currently control styling in dash-core-components. The dash-bootstrap class thus serves two purposes:

1. Making the CSS selectors more specific to guarantee styles are overridden independent of the order in which stylesheets are linked.
2. Allowing users to contain any modifications made by us to Bootstrap CSS to minimise the risk of unintended side-effects / interference.

Included in this PR is a first build of all the stylesheets, plus minified versions.

[tcbegley]

I haven't included any documentation on this yet. Happy to discuss the best way forward on that, and whether this needs to be a bit more mature before it's added to the docs.

[pbugnion]

I think this is great!

My only thought is that I'd probably recommend not bundling the built CSS with the code. I know Bootstrap does, for instance, but this is a bit different -- we can provide a URL to the CSS with dbc.themes and we have control over the CDN, unlike Bootstrap. Finally, we know people will only use our CSS in the context of Dash apps, whereas Bootstrap have to consider a much wider range of cases. Not bundling the CSS will make development much easier (since we avoid complex diffs that have to be committed etc.).

[tcbegley]

Yes, that makes sense, will remove.

[pbugnion]

This looks great! Once this is merged, we can do an initial upload to our CDN and update dbc.themes. Happy to set that up.

[tcbegley]

Happy to set that up.

That would be great 👍

[mdylan2]

Hey guys, this is awesome! I've been looking for a feature like this.

How would I go about adding DBC's style to my DCC dropdown component?

Would I need to have the className = "dash-bootstrap"?

[tcbegley]

Hey @mdylan2

Yes, our modifications only apply inside an element with the dash-bootstrap class applied. Most of the time you'll probably just want to apply this to the top-level div like this:

app.layout = html.Div(
    children=... # layout including dcc.Dropdown go here
    className="dash-bootstrap",
)

Our stylesheet will then tweak the style of the dropdowns and datepickers to be consistent with other Bootstrap form elements.

Before you can do that, you'll need to get your hands on a compiled copy of the CSS. You could do that with sass yourself if you like, compiling the stuff we merged here, but the easiest thing at the moment would probably be to just grab the compiled CSS from this other repo I set up while experimenting (under dist/, you'll find compiled CSS for Bootstrap and all the other Bootswatch themes). Eventually the plan is to make the CSS available through dbc.themes, but we're not quite there yet.

Once you have the CSS downloaded, you need to link it to your app (here's the relevant part of the Dash docs if you're unsure how to do this). Note that these stylesheets replace, rather than supplement, Bootstrap. So once you've linked the local sheet there's no need to also link to dbc.themes.BOOTSTRAP or whatever.

[mdylan2]

Hey @tcbegley

I'm sorry that I took so long to respond to this but thanks a lot for the help! I got caught up fixing other things in my Dash app and haven't had time to implement this thought. I'll definitely give it a shot now.

Also, I noticed that you merged this thread. Does that mean that I can use the dbc.themes.BOOTSTRAP now?

[tcbegley]

Great! Let me know how you get on.

Also, I noticed that you merged this thread. Does that mean that I can use the dbc.themes.BOOTSTRAP now?

Unfortunately not yet, we're still getting that set up and a few other issues have been given priority. Hopefully though we'll get to it in the nearish future.

[luggie]

any news on this in the meantime?

[tcbegley]

Hi @luggie

Your best bet is to check out dash-bootstrap-css.

It's sorely in need of an update, but hopefully helps with some of the things you want to do.

[luggie]

thx @tcbegley
This is not compatible in any way when the dbc.theme changes like implemented here right?

[tcbegley]

I don't see why it wouldn't be compatible with the theme switcher component, you would just need to supply a URL to the dash-bootstrap-css stylesheets, e.g. https://cdn.jsdelivr.net/gh/tcbegley/dash-bootstrap-css/dist/cyborg/bootstrap.min.css

It may clash with the dbc.css stylesheet provided by that project because they attempt to make similar modifications.

I haven't tried it so both of these claims are speculative. Perhaps @AnnMarieW can chime in if I'm wildly incorrect here.

[AnnMarieW]

It would be compatible, and it would actually be a better solution because it would be possible to fine tune the css for each theme. The dbc.css is just the minimal styling designed to work for all themes.

The only issue is that the current dash-bootstrap-css is based on Bootstrap V4 and doesn’t work with the the current dbc version. After an update, this would be the ideal solution. I’d collaborate on this if anyone is interested.