Archives des css | dash-resources.com

A guide to beautiful Dashboards (basic design principles)

Fran — Sun, 09 Feb 2025 15:26:47 +0000

So you’ve started building dashboards with Dash Plotly. Bravo! But you soon realize that even if it is easy to build dashboards, it is somehow not easy to make them look good. So how do you design a beautiful dashboard with Dash?

Table of Contents

Introduction
Pick a font
Pick colors correctly
Beware of the hierarchy
Space things out!
Keep things homogeneous
Remember to style charts too
Use pre-made components
- See also:
Conclusion

In this tutorial, I’ll give you tips and advices to keep in mind to create visually appealing dashboards and Dash apps, to increase the usability and aesthetics of your project.

Introduction

Let’s be honest: most dashboards are functional but completely fail in terms of UI/UX (user interface/user experience). And that’s normal—most of us are data analysts, data scientists, or Python developers, and UI/UX is not our job.

If you are building a dashboard for your own use or designed for technical people, you might not care about aesthetics. But if you want people outside your team to engage with and use the amazing dashboard that you made, you should invest time in making your dashboard visually appealing.

Can you even look at this dashboard ? It’s really hurting the eyes.

This is even more true if you are creating an app used by non-technical people (not in your field) or if you are developing a SaaS product for a broader audience with Dash.

Fortunately, by following a few rules, you can significantly improve your skills in building beautiful dashboards and apps. Let’s dive in.

Pick a font

The harsh truth: the lack of a personalized font is one of the common traits of ugly dashboards. That’s why I put it at the top of this list. You’ll never see a professional-looking app that sticks to “Times New Roman” (i.e., the default font in most web browsers).

This doesn’t mean this font should never be used, but it means that default fonts quickly show that no effort was put into aesthetics. So, setting a proper font is a real quick win.

The same dashboard, but we changed font: it looks instantly different.

Serif fonts often imply tradition and formality (Times New Roman is widely used in newspapers and books, and there’s nothing wrong with that if your app is focused on reports, articles, or anything content-heavy). But usually, dashboards benefit from sans-serif fonts for a cleaner, more modern look.

Recommended fonts are the basic ones:

Arial, Open Sans, Verdana, Helvetica Neue.

If you need more stylish and trendy fonts, here are some great options:

Roboto (modern and widely used in web design)
Lato (clean and friendly, great for dashboards)
Montserrat (sleek and professional)
Inter (highly readable and trendy for UI design)

If you need more inspiration, you can explore Google Fonts or Adobe Fonts to find stylish options that fit your dashboard’s aesthetic. But being too exotic is not a good idea either.

Note: You should always set a font because otherwise, your app might look different on various devices (Windows, Mac, Linux, etc.) and browsers, which may pick different default fonts.

Pick colors correctly

No colors is terrible

Colors help with contrast, and contrast is absolutely necessary if you want to ease the eye. A dashboard with no contrast is hard to read, making users tire quickly. If everything looks the same, users won’t know where to focus.

Using just black and white or a single muted color can make your app look dull and unstructured. Instead, introduce some contrast using different shades and tones, but in a subtle way. Use colors to differentiate sections, highlight key metrics, and guide user attention effortlessly.

Too many colors is terrible

On the flip side, throwing in too many colors makes everything look chaotic. Too much contrast can make your dashboard overwhelming and confusing. A rainbow-colored dashboard is not visually appealing—it’s distracting.

Go easy on gradients. Too many gradients will make your app look like outdated WordArt! Use soft gradients sparingly—to highlight a few buttons or text, but not everywhere. Stick to a defined color palette and ensure your colors complement each other.

Importance of color choice

Colors enhance the appearance of your app but also improve user experience: you can emphasize the importance of a button by its color alone, meaning the user instantly understands its significance.

People also associate certain colors with specific actions—red buttons usually indicate critical actions, while blue or black buttons tend to be more neutral. Green often signals success, and yellow can be used for warnings.

Just like fonts, using default colors (100% red, 100% green, or 100% blue) will make your dashboard look unpolished. Instead, pick variants of these colors—softer shades, deeper tones, or slight variations.

Our dashboard after changing the colors for softer colors. We also got rid of contrasts problems like a dark text on a dark button and removed old-looking gradients.

Pro tip: If you don’t know what colors to use, you can rely on predefined color palettes from Mantine, Bootstrap, or websites like Flat UI Colors.

Also remember that users have different visual impairments (e.g., color blindness). Learn more about it here: coloring for colorblindness.

Beware of the hierarchy

Hierarchy isn’t just about making titles bigger —it’s about creating a natural flow for the eyes. When someone looks at your dashboard, they should naturally understand what’s important and what’s secondary.

A simple but effective approach is to stick to 3-4 text sizes for your entire app. Your main title should be the biggest (around 32px), followed by section titles (24px), and then your regular text (14-16px). Don’t go smaller than 12px – nobody likes squinting at tiny text!

Now titles are bigger, as well as the most important data (sales, revenue, profit). The “Recent activity” section is larger and the text below is smaller.

But size isn’t everything. You can also create hierarchy through weight (bold vs regular) and color intensity. Just like in a newspaper, the most important stuff should catch your eye first.

Think about it: when you look at a well-designed website, you instantly know where to focus, right? That’s good hierarchy at work.

Space things out!

Let your components breathe:

Add margins around text and padding inside buttons.
Text should not be stuck to the border of its container—use proper padding and margins.

The easiest way to handle spacing is to pick a basic unit (like 8 pixels) and use multiples of it. Put a little space between related items (8px), more space between different elements (16px), and even more space between major sections (24px or 32px).

Now we can breathe! We added space between each section along with borders. We also fix alignment of the info icon, of the logout button and of the activities. The main buttons are spaced gracefully too, as well as the main data.

Remember: white space isn’t wasted space. It’s like the margins in a book – without them, everything would be a mess and hard to read. Give your components some breathing room. Your users’ eyes will thank you.

Keep things homogeneous

In art, proportions are an integral part of the works of the greatest masters. Many sculptures and paintings, for example, use the golden ratio.

The same applies to interfaces: consistency is key to making dashboards look polished and professional.

But what does this mean in practice?

Apply the same margins and padding throughout, ensuring a balanced layout while respecting hierarchy.
Stick to 2-3 main colors with one accent color for emphasis. Example: if you use blue buttons, don’t randomly switch to green unless it serves a purpose.
Keep shapes and styles uniform—rounded buttons should stay rounded, and shadows should be consistent across cards.

We homogenized the buttons, so that only the most important (export data) stands out. By their size and color, the user now guesses instantly what are the most importants buttons.

Small details make a big difference!

Remember to style charts too

By default, Plotly charts do not inherit the styles of your app. So, be sure to at least set the font style and colors to match your dashboard.

Also, tweak chart elements like gridlines, legend placement, and axis labels to keep the same spacing you used before (to keep things homogeneous!).

We changed the color and the font familiy of the plotly chart to use the same as the rest of the dashboard. You will often need to hardcode the values in Python, in the figure configuration / layout parameters.

Another pro tip: If your dashboard has multiple charts, keep them consistent in terms of styling. Same font, same color scheme, same layout rules—it all helps with clarity and makes your dashboard look like a professionally designed tool.

Use pre-made components

Last but not least: you should use component libraries like Dash Bootstrap Components (DBC) or Dash Mantine Components (DMC). These libraries come with a lot of default CSS rules and choices, a technic known as a CSS reset.

These rules ensure that HTML elements are correctly placed, well-spaced, have the right font sizes, and maintain a consistent, homogeneous style. Exactly everything we did before, so it will make you gain time.

We applied the Mantine components styles to our dashboard: buttons are different, and containers have some remarkable shadow. The good thing is that we don’t need all the previous steps to get to this one.

However, these component libraries are popular which is a good and a bad thing:

The good: people like them. Remember, users don’t want anything too crazy—they prefer familiar, intuitive designs. They will like your design because they are used to it.
The bad: all websites look the same. However, with the choices you have (layout, colors, fonts, etc.), you can still make your dashboard unique while keeping it aesthetically pleasant.

My 2 cents: I always use at least DBC or Mantine in my Dash projects, whether I create custom components or not, because they bring a CSS reset and a lot of CSS utils.

Conclusion

Let’s wrap this up with an important reminder: these aren’t strict commandments set in stone. Think of them more as helpful guidelines that, when mixed and matched thoughtfully, can lead to visually appealing dashboards. You don’t need to follow every single rule.

The best way to improve your design skills is to experiment and stay observant. Pay attention to the apps and tools you enjoy using. What makes them pleasant to work with? How do they handle fonts, colors, and spacing? Take inspiration from what works well in your favorite applications.

And here’s a final thought: people tend to find “normal” things beautiful.

You don’t need to reinvent the wheel or create the most unique dashboard ever seen. Aim for clean, familiar, and professional rather than wildly original.
A “dash” of creativity is great, but remember that if your dashboard looks too exotic, it might end up being harder to use!

The goal is simply to create something that looks professional and is pleasant to use.

Follow these guidelines, trust your eye, and you’ll be well on your way to creating dashboards that both you and your users will enjoy.

I hope you liked this guide and learn. This is part of my Dash plotly Course, be sure to check it out if you want to learn more about building dashboards.

If you have any question, join us on the dedicated topic on Plotly’s forum: here.

L’article A guide to beautiful Dashboards (basic design principles) est apparu en premier sur dash-resources.com.

Improving Dash DataTables: Simple CSS Tweaks

Fran — Sun, 19 Jan 2025 12:06:50 +0000

The Dash DataTable is a powerful component to display tabular data. However, I’ve always felt it didn’t seamlessly integrate with the applications I was developing.

In this article, I’ll show you how you can improve the user interface and user experience (UI/UX) of a DataTable by tweaking some parts using CSS ( interactive app below )

Table of Contents

1 – Add Bootstrap styles
2 – Improve the header
3 – Striped rows
4 – Hover effect
5 – Row selection
How to modify styles yourself
How to reuse this code
Conclusion

Let’s dive in!

1 – Add Bootstrap styles

First things first: the DataTable’s basic styles don’t integrate well with an app. The main reason is that many styles, such as the font-family, are hardcoded.

If you work with Dash Bootstrap Components, this becomes obvious. Let’s take a simple app as an example:

import pandas as pd
import numpy as np
import dash_bootstrap_components as dbc
from dash import Dash, html, Input, Output, dash_table

# Create sample data
np.random.seed(42)
size = 20
df = pd.DataFrame({
    "id": range(size),
    "x": np.random.normal(0, 1, size),
    "y": np.random.normal(0, 1, size),
    "category": np.random.choice(["A", "B", "C"], size)
})

# Initialize the Dash app
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# Define the layout
app.layout = html.Div(
    [
        # Data table
        html.Div(
            dash_table.DataTable(
                id="table",
                columns=[
                    {"name": i, "id": i, "deletable": True, "selectable": True} for i in df.columns
                ],
                data=df.to_dict("records"),

                # Enable multi-row selection and paging
                filter_action="native",
                sort_action="native",
                sort_mode="multi",
                column_selectable="multi",
                row_selectable="multi",  
                page_action="native",
                page_size=10,
            ),
            id="table_container",
        )
    ],
    className="container"
)

# Run the app
if __name__ == '__main__':
    app.run_server(debug=True)

Illustration: the default DataTable is looking a bit “raw” compared to modern themes like Bootstrap.

The solution is to overwrite the DataTable’s styles with Bootstrap styles. Fortunately, Ann Marie Ward, a major Dash contributor, has already created a solution for this here ( thank you Ann if you see this ).

Her CSS stylesheet includes styles to apply Bootstrap themes to Dash components, such as tables and buttons, for a consistent appearance. We’ll download it (link), and save into into the assets folder at assets/dbc.css.

Then, we just need to add the dbc CSS class to a container div wrapping our DataTable:

# Data table
html.Div(
    dash_table.DataTable(
        # ...
    ),
    id="table_container",
    className="dbc"  # we added the dbc class
)

Illustration: the DataTable now has a Bootstrap theme, which integrates better in apps. But the pagination style is incorrect.

As you can see, the table now inherits the Bootstrap styles. However, the pagination remains untouched.

Unfortunately, there is no option to dynamically set the className of the buttons to Bootstrap’s btn, btn-outline-primary, and btn-sm. But we can copy their styles (e.g., from the Bootstrap documentation) and apply them to the four pagination buttons (.first-page, .next-page, .previous-page, .last-page):


/* reset font styles on pagination buttons */
.dbc .dash-table-container .previous-next-container .page-number,
.dbc .dash-table-container .previous-next-container .page-number .current-page-container input.current-page {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    min-width: auto !important;
}

/* apply the same styles as .btn, .btn-sm, .btn-outline-primary */
.dbc .dash-table-container .previous-next-container {
    button {
        &.first-page,
        &.last-page,
        &.previous-page,
        &.next-page {
            display: inline-block;
            font-weight: 400;
            text-align: center;
            vertical-align: middle;
            user-select: none;
            padding: 0.25rem 0.5rem;
            margin: 0 0.25rem;
            font-size: 0.875rem;
            line-height: 1.5;
            border-radius: 0.2rem;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            color: var(--bs-primary);
            border: 1px solid var(--bs-primary);
            background-color: transparent;

            &:hover {
                color: var(--bs-white) !important; /* override dbc.css */
                background-color: var(--bs-primary);
                border-color: var(--bs-primary);
            }

            &:focus {
                box-shadow: 0 0 0 0.25rem var(--bs-primary-rgb, rgba(13, 110, 253, 0.25));
            }

            &:active,
            &.active {
                color: var(--bs-white);
                background-color: var(--bs-primary);
                border-color: var(--bs-primary);
            }

            &:disabled,
            &.disabled {
                color: var(--bs-primary);
                background-color: transparent;
                border-color: var(--bs-primary);
                opacity: 0.65;
                pointer-events: none;
            }
        }
    }
}

CSS rules are applied by order of importance (priority) to an element. The more you add precision to the selection, the more weight the rule has:

/* a rule targetting a button */
.dash-table-container button { ... }
/* equivalent, but more precise (more weight): */
body .dash-table-container .previous-next-container button {...}

That’s why sometimes we see a long selector definition, and sometimes not —because in some cases, it’s too complex to increase the weight of a rule. Then !important keyword enable us to override some CSS properties without having to make a stronger rules.

Good to know: It’s better to avoid !important whenever possible because each use makes future overrides more complex. Imagine if the creators of Bootstrap had used !important everywhere—overriding their styles would have been a nightmare!

Now let’s visualize the result:

Illustration: we now have proper Bootstrap buttons.

We now have a Bootstrap-styled DataTable. Much better!

2 – Improve the header

There are a few things I don’t like about the default DataTable header, but thankfully, everything is fixable with CSS.

First, the header row should be highlighted:

/* make the heading bold and with a gray background */
.header-style .dash-table-container th {
    background-color: var(--bs-gray-200) !important;
}

.header-style .dash-table-container th .column-header-name {
    font-weight: bold;
}

.header-style .dash-table-container th input::placeholder {
    /* overrides back a style set in dbc.css */
    background-color: transparent !important;
}

If you are not familiar with CSS variables, take a look at this documentation. They allow using the Bootstrap without hardcoding them. It is useful for themes like dark/light themes that will only require a change of variable value.

Second, the icons in the header are not uniformly sized, vertically aligned, or evenly spaced. Let’s fix that:

/* better homogeneous styling of buttons */
.header-style .column-actions {
    /* let us breath! */
    gap: 0.4em; 
    margin-right: 0.5em;
}

.header-style .column-actions > span {
    /* align components vertically */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-style .dash-table-container th input[type="radio"],
.header-style .dash-table-container th input[type="checkbox"] {
		/* fix inconsistent color and size */
    width: 1rem;
    height: 1rem;
    opacity: 0.6;
}

.header-style .dash-table-container th input[type="radio"]:checked,
.header-style .dash-table-container th input[type="checkbox"]:checked {
		/* when checked, reset opacity */
    opacity: 1;
}

Finally, clicking on the case-sensitive filter (aA) causes the column width to change. Adding a transparent border of the same size resolves this issue:

.header-style .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter input.dash-filter--case--insensitive {
    /* avoid column width size change when clicking */
    border-style: solid;
    border-width: 2px;
    border-color: transparent;
}

Remember the CSS weights for rules? The definition above is long on purpose: thanks to this, I don’t need to add !important.

Here is the result:

Illustration: a DataTable with a better looking header.

At this point, there are two types of people: those who notice the differences and those who don’t. If you don’t, I don’t blame you—you live in a much simpler world than I do!

If you do notice the differences, you may experience the satisfaction of seeing these buttons properly arranged.

3 – Striped rows

Displaying striped rows can make the table easier on the eyes. It’s a tiny detail, but combined with other enhancements (like mouseover color), it improves the overall user experience of your app.

Striped rows for the DataTable can be achieved in Python, but a simple CSS snippet will also do the job:

/* Alternating row background */
.striped-style .dash-table-container td:not(.cell--selected) {
    background-color: transparent !important;
}

.striped-style .dash-table-container tr:nth-child(odd) {
    background-color: var(--bs-gray-100) !important;
}

.striped-style .dash-table-container tr:nth-child(even) {
    background-color: var(--bs-body-bg) !important;
}

Illustration: striped lines help visualizing many rows.

The CSS property :nth-child is the key here, as it allow selecting either odd or even rows tr. The cells td are made transparent as the background is changed at the row level.

4 – Hover effect

Adding a hover effect is a simple trick to enhance interactivity, even for static tables. It implicitly signals to the user that the table is interactive.

Here’s the CSS to add a hover effect:

/* Hover row background */
.hover-style .dash-table-container tr:hover td:not(.cell--selected)  {
    background-color: var(--bs-gray-200) !important;
}

The background is applied to all cells expect selected cells (i.e., active cells), using td:not(.cell—selected).

Illustration: row hover is a simple trick to make a table look like “interactive”.

The hover color is slightly darker (—bs-gray-200 instead of —bs-gray-100) to remain visible even on striped rows.

5 – Row selection

By default, clicking on a cell highlights it. However, in most cases, it’s more intuitive to highlight the entire row. It is also helpful to emphasize rows selected via the left checkboxes. Let’s address this.

This code is slightly more complex:

We style rows that have the .cell--selected class. This includes rows selected via checkboxes or mouse clicks.
To avoid overlapping borders, we use the adjacent sibling selector (+) to remove duplicate borders. For example, instead of |X||X|, we get |X|X|.

/* apply style to selected cell */
.selection-style .dash-table-container tr:has(td.cell--selected) td.cell--selected {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    border: 1px solid var(--bs-primary) !important;
    outline: none !important;
}

/* apply styles to the other cells of selected rows */
.selection-style .dash-table-container tr:has(td.cell--selected) td {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    border: 1px solid #d0d0d0 !important;
}

/* remove border between selected cells (vertically) */
.selection-style .dash-table-container tr:has(td.cell--selected) + tr:has(td.cell--selected) td.cell--selected {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    border-top: none !important;
}

/* remove border between selected cells (horizontally) */
.selection-style .dash-table-container tr:has(td.cell--selected) td.cell--selected + td.cell--selected {
    border-left: none !important;
}

/* apply style to checked rows */
.selection-style .dash-table-container tr:has(input:checked) td {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    border: 1px solid #d0d0d0 !important;
}

Most styles here use !important to remain compatible with the dbc.css styles. If we don’t keep the dbc.css styles, additional lines would be required for proper functionality:

/* add dbc styles to selection-style */
body .selection-style .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}
.selection-style .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
    border-collapse: inherit;
    border-spacing: unset;
}

The selection works for rows selected via checkboxes, single mouse clicks, and multiple selections (holding Shift).

Illustration: selected rows are not more visible.

Notice that row selection do not work well visually with striped rows, so I removed it from the above screenshot. Feel free to try it yourself with the interactive app!

How to modify styles yourself

You might wonder how I came up with these precise CSS rules while reading this article.

Overriding CSS styles involves trial and error. Essentially, you need to use developer tools to inspect the applied rules on the target element and figure out how to “override” those rules.

Here’s how you can do it :

Right click in the browser on the element > Inspect
Select the element in the browser in the list if necessary
Look at the CSS styles applied to this element.

Illustration: how you can find and debug CSS styles in the browser.

CSS rules are applied in order of priority. Inline styles (applied directly to the element) usually take precedence. Overridden styles are shown as struck-through in developer tools, indicating which rule has the highest priority.

You can also use developer tools to copy styles from another source (as I did for Bootstrap):

lllustration: the same principle applies to copy styles from another app or source.

If you want to know more about this debugging process, please send an article request.

How to reuse this code

Each part of the styling corresponds to a specific class. This means you can copy and paste the code and simply add the relevant class name: dbc(for the Bootstrap style), header-style, striped-style, hover-style and selection-style.

Example with all styles except striped rows:

# Data table
html.Div(
    dash_table.DataTable(
        # ...
    ),
    id="table_container",
    className="dbc header-style hover-style selection-style" # all styles except striped rows
)

You can also play with the interactive app below to see the differences (or click here):

Click here to see the final CSS code

Archives des css | dash-resources.com

A guide to beautiful Dashboards (basic design principles)

Introduction

Pick a font

Pick colors correctly

Beware of the hierarchy

Space things out!

Keep things homogeneous

Remember to style charts too

Use pre-made components

See also:

Conclusion

Improving Dash DataTables: Simple CSS Tweaks

1 – Add Bootstrap styles

2 – Improve the header

3 – Striped rows

4 – Hover effect

5 – Row selection

How to modify styles yourself

How to reuse this code