How to implement Dash app layout similar to dash-bio?

Dash Python
1

Hi all!

I’m new to this forum, sorry if this is posted the wrong place / in the wrong way.

I have been browsing the dash-bio demo apps , and I really like the clean interface with the header, the control box on the left, and the plot to the right, like the manhattan-plot. I’m unfamiliar with css and html, and while the styleguide from @chriddyp is great, I would really like to use a style similar to dash-bio.

  • First of all, would it be OK to use their style directly, only slightly modified?

    • The purpose of my app is for a research project, where I’m to make a web-based application to plot data for research data coming in to a back-end MQTT application I’ve made.
    • It is only intended for closed-research use, and not for commercial purposes.
    • I don’t want to misuse what others have made if there are licenses to follow for styleguides like these. In any case, I would credit the app layout to dash-bio.

  • Second, if I were to use this, or a modification of it, how would I go about it?

    • I see that they have several styles in their github repo, but I’m not quite sure how they load the style for an app; if they load all three base.css, general-app-page.css and specific-plot-style.css (one unique for each plot) for each app, or just a specific one. Can’t seeem to find it exactly.
    • I.e. What is the minimal way to load the css/style into my app for usage?

So, what I’m wondering is how to make the css style of a given dash-bio app available for use in my own app, and if I could use dash-bio style directly, with slight modifications to fit my app better, or if there are licensing issues to be wary of here. Or if anyone has tips on an easy way to sketch out a design like the one at dash-bio and convert it to .css afterwards, I’m all for it :slight_smile:

Picture of the Manhattan-plot (all the other apps follow the same style more or less):

manhattan
manhattan.png1222×690 72.5 KB

2

Hi @coffee! I’m Sham and I’m the main engineer working on Dash Bio.

First of all, would it be OK to use their style directly, only slightly modified?

Everything in the Dash Bio repository is MIT licensed. So this is totally fine!

Second, if I were to use this, or a modification of it, how would I go about it?

All of the stylesheets are loaded for all of the apps. You’ll notice in the stylesheets that they have component-specific selectors (e.g., mol3d-control-tabs for the tabs in the Molecule3dViewer app), so the contents of one app’s stylesheet will not override the others’. App-specific styles include spacing for components and colors for selected tabs/scroll bars/other Dash components. The general-app-page.css provides CSS for the common elements, like the tabs/tab container on the left and the header. Beyond that, I’d recommend following the pattern we have and making a specific stylesheet to use alongside general-app-page.css.

Hope that helps :slight_smile:

1 Like