Consistent Styling Using CSS with Functions

Consistent styling

It is common practice that when building web applications, there is a particular style guide that is applied across the tool. In Dash, one of the ways we can achieve this is to use the power of Python functions within our app to undertake styling.

This means that rather than undertaking the same formatting in multiple places, we can defer that to a function and simply call that function when we wish for a certain type of styling. This reduces the amount of code (and repeated code) and means that updates to styling can be done in one place (our function) rather than many places in the app code.

Demonstration app

To demonstrate how we can use functions in Python to build clean Dash apps with elegant CSS styling, we refer to a single app within this lesson. The app will contain an introduction and three extra distinct sections of univariate analysis, bivariate analysis, and multivariate analysis with some basketball data.

We will walk through the code first and explain what each component does, with a combined notebook at the end where you can run and execute the code. There is a bit to work through, and since each piece of code is needed to work together, the working notebook will be in one collated app at the end.

The intro() function

This function creates a dbc.Row object that has a heading and a paragraph nested inside for the introductory section of our basketball dashboard. The section is styled using Bootstrap classes for a jumbotron, a large and attention-grabbing container.

The className parameter is used to add one or more classes to an HTML element. ...