Dashboards in Python for Beginners using Dash — Responsive Mobile Dashboards with Bootstrap CSS Components
Examples of Bootstrap Components for Responsive Dashboards
--
Why Responsive Design
Mobile browsing is huge, accounting for roughly half of web traffic worldwide, and will likely remain one of the fastest growing ways to consume web media. Since mobile browsing is prevalent, it is important to understand whether the users of your dashboards will need a responsive design. For example, at my job, I design dashboards for business people that travel and interact with customers. I need to make sure the visualizations and navigation won’t break down if my users need to display the data from their phone or tablet.
Although I know enough CSS to style a simple website, I find creating style sheets a little tedious. Dash makes it easy to apply your own style sheets if you’re capable of creating them; however, if you’re unfamiliar with CSS or don’t want to take the time to create your own, Dash can utilize Bootstrap CSS which makes styling and page-layout extremely easy to piece together. Bootstrap is one of the worlds most popular front-end frameworks for creating responsive, mobile friendly sites.
Getting into CSS and Dash
In this article, I’ll discuss the foundation of the Bootstrap CSS Grid layout, and look at some interesting dash-bootstrap-components and callbacks like the Accordion, Modal and Jumbotron.
Dash is a framework for Python written on top of Flask, Plotly.js, and React.js. Dash apps are composed of Layouts and Callbacks:
Layout
The layout is made up of a tree of components that describe what the application looks like and how users experience the content.
