© The Author(s), under exclusive license to APress Media, LLC, part of Springer Nature 2022
T. C. NokeriWeb App Development and Real-Time Web Analytics with Pythonhttps://doi.org/10.1007/978-1-4842-7783-6_7

7. Styling and Theming a Web App

Tshepo Chris Nokeri1  
(1)
Pretoria, South Africa
 

This chapter introduces the basics of styling and theming a web app. First, it introduces styling an HTML web page. Subsequently, it acquaints you with the Cascade Styling Sheet (CSS) and calls a CSS code inside the architecture of a Dash web app. Following that, it presents the Bootstrap technology, including an approach to universally set the theme of a Dash web app by employing default theme templates, including those from an external source. Following that, it familiarizes you with a technique of setting the layout of a web app using the dash_bootstrap_components library.

Styling

Styling enables you to customize the look and feel of an HTML page. For instance, you can specify the border, background color, text color, transitions, and essential responses. Chapter 3 introduced the div element.

Listing 7-1 exhibits a way to create div. Notice that it applies <style> </style> to set div with 5px outset gray, a background-color that is white and text-align is center.
<html>
<head>
<style>
.div_1{
  border: 5px outset gray;
  background-color: white;
  text-align: center;
}
</style>
</head>
<body>
<div class="div_1">
  <h2>Apress Books</h2>
  <p>Books brought to you by Apress</p>
</div>
</body>
</html>
Listing 7-1

Div

Cascade Styling Sheet

CSS is the most prevalent styling technique. It is implemented alongside HTML to control the design of a page. You apply CSS for styling by containing the code inside an HTML page or use an external CSS file.

Listing 7-2 exhibits an approach to contain CSS code inside HTML code.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: gray;}
h1   {color: navy;}
p    {color: orange;}
</style>
</head>
<body>
<h1>An Apress Book</h1>
<p> This book introduces you to web application development and deployment using Python web frameworks >
</body>
</html>
Listing 7-2

CSS

Listing 7-3 references an external CSS file.
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>An Apress Book</h1>
<p>This book introduces you to web application development and deployment using Python web frameworks>
</body>
</html>
Listing 7-3

Referencing a CSS File

Listing 7-4 contains CSS code specifications. As you see, most of the arguments are self-explanatory. rem specifies the size. If you are familiar with pixels (px), you may specify the size as such. Pixels represent manageable elements populating the screen of any digital device. You can control the output on the screen by manipulating the properties. For instance, specifying 10px display the content larger than specifying 5px. Specifying 10rem displays the content larger than specifying 5rem .
css_style = {"position": "fixed",
             "top": 0,
             "left": 0,
             "bottom": 0,
             "width": "14rem",
             "height": "100%",
             "margin-bottom": "0rem",
             "padding": "0.5rem 1rem",
             "background-color": "#f8f9fa"}
Listing 7-4

CSS Code

If you want to implement the CSS code in Listing 7-4 to some component, specify it as the style (see Listing 7-5).
html = Div([], style=css_style)
Listing 7-5

Calling Specific CSS

Bootstrap

Bootstrap is a prevalent library for theming web applications. It integrates HTML, CSS, and JavaScript. There is no need for you to have extensive CSS programming knowledge or experience. It is an open source library initially developed by Twitter. It enables the design of responsive grid systems and offers a myriad of components, including some functionalities.

A key feature of the innovative Bootstrap framework enables the specific content of a web app to scale irrespective of the device. It is constructed based on putting mobile devices first. It is immensely impressive since you do not have to typically rewrite the coding for mobile devices.

An alternative web technology to Bootstrap is Google’s Material Design. It was developed for structuring user interaction, and more specifically, screen orientation. The main differentiator between it and Bootstrap is that Material Design inclines more toward the appearance of a web app. Meanwhile, Bootstrap takes a remote approach that incorporates components and behavioral control, including appearance controls. Given this, Bootstrap covers a wider spectrum of web development than Material Design. Moreover, it is very straightforward to learn. You can learn more about it at https://material.io/design/introduction.

Listing 7-6 sources a CSS file from the prevalent Bootstrap theming library. Learn more at https://getbootstrap.com.
getbootstrap = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"
app = dash.Dash(external_stylesheets=[getbootstrap])
Listing 7-6

Sourcing External CSS File

If you want to employ an icon from an external library, specify its URL (see Listing 7-7). For this example, the icons are sourced from Font Awesome, a prevalent icon library.
FA = https://use.fontawesome.com/releases/v5.8.1/css/all.css
app = JupyterDash(external_stylesheets=[dbc.themes.MATERIA, FA])
Listing 7-7

Specify Theme Template and Icons Library

The best way to integrate icons into a web app is by specifying the icon’s name as the className argument, which calls CSS functionalities without rewriting the code for each use. For instance, if you desire to employ the alert icon, specify the className as “far fa-bell”. Likewise, to include the message icon, use “far fa-envelope”. This applies to all the icons. Learn more about Font Awesome icons at https://fontawesome.com/v4.7/icons/.

Dash Bootstrapping

This book implements the dash_bootstrap_components library, which is based on Bootstrap technology. As a result, creating dashboards and web apps is not a painstaking experience. There is no need for you to have extensive Bootstrap programming knowledge or experience.

First, let’s import Dash (see Listing 7-8).
import dash
Listing 7-8

Import Dash

Dash Core Components

The dash_core_components library implements key Dash functionalities. First, ensure that you have installed the dash_core_components library in your environment. To install it in a Python environment, use pip install dash-core-components. Likewise, to install it in a conda environment, use conda install -c conda-forge dash-core-components.

Listing 7-9 imports dash_core_components.
import dash_core_components as dcc
Listing 7-9

Import Dash Core Components

Dash Bootstrap Components

The dash_bootstrap_components library implements Bootstrap functionalities. First, ensure that you have installed the dash_bootstrap_components library in your environment. To install it in a Python environment, use pip install dash-bootstrap-components. To install it in a conda environment, use conda install -c conda-forge dash-bootstrap-components.

Listing 7-10 imports dash_bootstrap_components.
import dash_bootstrap_components as dbc
Listing 7-10

Dash Bootstrap Components

Implementing Dash Bootstrap Components Theming

Listing 7-11 obtains the theming scheme within Dash by specifying the external_stylesheets argument (for this example, specify it as BOOTSTRAP). Assuming there is a navigation bar, the outcome looks like Figure 7-1.
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
Listing 7-11

Implementing Dash Bootstrap Components Theming

../images/521065_1_En_7_Chapter/521065_1_En_7_Fig1_HTML.png
Figure 7-1

Navigation bar

In addition to BOOTSTRAP, there are alternative themes like CERULEAN, COSMO, CYBORG, DARKLY, FLATLY, JOURNAL, LITERA, LUMEN, LUX, MATERIA, MINTY, PULSE, SANDSTONE, SIMPLEX, SKETCHY, SLATE, SOLAR, SPACELAB, SUPERHERO, UNITED, YETI.

Applying the example in Figure 7-1. Assuming there is a navigation bar and the theme is specified as DARKLY (see Listing 7-12), the outcome looks like Figure 7-2.
app = dash.Dash(external_stylesheets=[dbc.themes.DARKLY])
Listing 7-12

Implementing Dash Bootstrap Components Theming

../images/521065_1_En_7_Chapter/521065_1_En_7_Fig2_HTML.png
Figure 7-2

Navigation bar

Applying the example in Figure 7-1. Assuming there is a navigation bar and the theme is specified as CERULEAN (see Listing 7-13), the outcome looks like Figure 7-3.
app = dash.Dash(external_stylesheets=[dbc.themes.CERULEAN])
Listing 7-13

Implementing Dash Bootstrap Components Theming

../images/521065_1_En_7_Chapter/521065_1_En_7_Fig3_HTML.png
Figure 7-3

Navigation bar

Alternatively, extract a CSS file from an external website (see Listing 7-14).
BS = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
app = dash.Dash(external_stylesheets=[BS])
Listing 7-14

Implementing Dash Bootstrap Components Theming

Dash HTML Components

The dash_html_components library implements HTML functionalities. First, ensure that you have installed the dash_html_components library in your environment. To install it in a Python environment, use pip install dash-html-components. To install it in a conda environment, use conda install -c conda-forge dash-html-components.

Listing 7-15 imports dash_html_components .
import dash_html_components as html
Listing 7-15

Import Dash HTML Components

Dash Web Application Layout Design

Before running a Dash web application, you need to specify its layout structure. Listing 7-16 specifies the structure by implementing the layout() method .
from jupyterdash import JupyterDash
app = JupyterDash(__name__)
@app.route("/")
def index():
    return "An Apress book"
app.layout = html.Div()
if __name__ == '__main__':
   app.run(mode='offline')
Listing 7-16

Dash Web Application Layout Design

Responsive Grid System

A layout helps construct a responsive grid system. When doing so, ensure that you specify the number of rows and columns. A Bootstrap layout contains a row width that is 12 (see Figure 7-4).

Given the specifications, ensure that the width of each row does not exceed 12.
row = html.Div([
    dbc.Row(
        dbc.Col([html.Div("Width = 12")],
                width=12)),
    dbc.Row([
        dbc.Col(html.Div("Width = 6"),
                width=6),
        dbc.Col(html.Div("Width = 6"),
                width=6)]),
    dbc.Row([
        dbc.Col(html.Div("Width = 4"),
                width=4),
        dbc.Col(html.Div("Width = 4"),
                        width=4),
        dbc.Col(html.Div("Width = 4"),
                        width = 4)])])
Listing 7-17

Grid System

../images/521065_1_En_7_Chapter/521065_1_En_7_Fig4_HTML.png
Figure 7-4

Grid system

Figure 7-4 presents a grid with three rows. The first row comprises three columns, the second row comprises two columns, and the third column comprises three columns.

Alternatively, you can specify each row separately (see Listing 7-17).
row1 = dbc.Row([
    dbc.Col(html.Div("Width = 12"),
                        width=12)])
row2 = dbc.Row([
    dbc.Col(html.Div("Width = 6"),
            width=6),
    dbc.Col(html.Div("Width = 6"),
            width=6)])
row3 = dbc.Row([
    dbc.Col(html.Div("Width = 4"),
            width=4),
    dbc.Col(html.Div("Width = 4"),
            width=4),
    dbc.Col(html.Div("Width = 4"),
            width = 4)])
rows = html.Div([row1, row2, row3])
Listing 7-18

Grid System

Conclusion

This chapter sufficiently acquaints you with the prime essentials of styling using CSS. Besides that, it promptly presented a holistic approach of universally setting the theme of a web app using some free Bootstrap theme templates that come alongside dash_bootstrap_components.

Chapter 8 focuses on developing real-time web analytics dashboards and web apps by integrating the Dash library, CSS, and Plotly with other standard Python libraries.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.221.154.18