Designing a layout from scratch versus using a template

I have been building a Dash app and did the layout by placing a dbc.Card to the left and then a tabs section to the right. This has taken quite a long time and I still need to fix various things like remove the margin/padding on a table, so that the elements are aligned properly.

Both dcc and dbc has elements like the above, but are there also layouts that can be implemented directly? Like a structure that is already set up with a color theme etc so one only needs to place the relevant elements.

An alternative is to look at the example apps, and see how they have done things - and possibly copy paste some key elements. I have tried this, but for some apps I find it quite hard to see how they actually design the layout. One examples is this example app: Clinical Analytics Dashboard
I read through the code, but didn’t find where they actually define the layout - widths and borders.

Hi @plottingly,

the the creation of some basic layouts is something I always wanted pursue, unfortunately I never found the time to do so. I was thinking in something really basic, such as a Navbar, Sidebar, Footer, NavItems or some Basic Grid-like container structure for the page layout.

But it’s quite difficult to define a “basic” layout, because “basic” could mean different things to different people.

@tphil10 curates building blocks which is the only source I know of concerning some basic components/ layouts.

Obviously there is the dash-example-index which in my opinion is less about layout but functionality:

Hi @plottingly

Many of the example apps in the gallery use custom CSS. You can find these files in the app’s assets folder. Here’s the CSS for the Clinical Analysis Dashboard. Unless you are an experienced front end developer, these files are difficult to re-use in your own app.

I think it’s much easier to use the Dash Bootstrap Components Library, or the Dash Mantine Components library. The DBC library is a great place to start because Bootstrap is so popular, and there are a lot of resources and tutorials available. The DBC docs are based on the official Bootstrap docs.

Note that the DBC library has links to 26 different themes. You can take them for a test drive here:

1 Like