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.
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.
CSS
Referencing a CSS File
CSS Code
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.
Sourcing External CSS File
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.
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.
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.
Dash Bootstrap Components
Implementing Dash Bootstrap Components Theming
Implementing Dash Bootstrap Components Theming
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.
Implementing Dash Bootstrap Components Theming
Implementing Dash Bootstrap Components Theming
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.
Import Dash HTML Components
Dash Web Application Layout Design
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).
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.
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.