Styling Best Practices, and documentation question

Dash Python
1

Hi there,

I am new to Dash, and am really enjoyed learning it.

One difficulty I have found is navigating some of the documentation.

For instance, the html.h1() method accepts the “style” argument. The documentation doesn’t mention or provide a link to the documentation for style to show what arguments it accepts and what fonts I can use (Never done any frontend development)

I know this is quite basic, like color or font, but It would be nice to see the documentation for it?

Maybe I have misunderstood as style is basically ANY css code, for instance anything from the documentation here:
https://devdocs.io/css

Next I was wondering if someone could provide advice on the styling approach I am considering for quick /nice results:
I came across dash-bootstrap-components, and was quite interested in their themes.

Step 1: Use one of their themes by importing this into the assets folder
Step 2: Create the following folder to override aspects from the theme I want to change:
assets/
|-- typography.css
|-- header.css
|-- custom-script.js
Step 3: Use the style argument for further customization.

Please let me know if this seems like a reasonable approach and if there are any better approaches for beautiful layouts and clean code.

Finally, I liked dash-bootstrap-components layout functionality, where you can use rows and columns to organize your dashboards. From proffesionals/experts using dash, what’s your thoughts on this feature and how do you generally design and layout your dashboards.

I am a Data Scientist and mainly uses PowerBI, and want to master Dash and show my company how this can be a better alternative for Data Science/ML projects. If there are any “best practices” for production level dash aside from the documentation please let me know.

Thanks!

2

I myself am a newbie to Dash or to Front-end in general. However dash bootstrap seems to be a good solution to making a simple app or a demo of a product since it’s easy and is embeddable in Django or Flask. But for production, I would use Django or Django-Dash (even though I am not a Django user).

For styling, the simplest solution is to use bootstrap styling https://hackerthemes.com/bootstrap-cheatsheet/#navbar_fixed-bottom otherwise you might have to know much more in detail about css and js that you end up losing the benefit of using Dash since it is no longer Python only framework.

A much more detailed cheatsheet I found on css js html is https://htmlcheatsheet.com/.

Good luck friend.

3

Thank you for your reply !

Just to confirm when you say bootstrap styling your referring to dash bootstrap components (when building purely dash app, not Django)

And if you want to customize bootstrap themes, for example using a different background colour or font, you would use the assets folder or styling argument within your app?

Thanks once again

4

Yes, that’s totally sensible. BTW did you know there are actually many Bootstrap themes you can choose from, if you’re not trying to do something super specific then you might find that someone has already achieved the look you want. Check out the theme explorer in the dbc docs to get a sense of some of the possibilities.