Flask Dashboard Light - Integrate the design

Hello coder,

This article explain, how to integrate Light Dashboard design into an existing Flask dashboard to make the app more appealing to the end users.

This article is part of a series of articles, and the entry point is here.  

Light Dashboard

The design used for this dashboard, crafted by Creative-Tim, has a modular structure and a clean layout, but the main reason is the permissive license. The goal of this article is to provide something useful to our audience: a fully-coded Flask Dashboard - ready to be used in a real project.

Light Dashboard - Open-Source Flask Dashboard

The phase of integrating a design consist in two sub steps: select a design and transform the HTML code into Jinja2 templates, the most used template engine for Flask applications.

Jinja2 Template Engine

For newcomers, Jinja2 is a full featured template engine for Python language used by giants like Instagram and Mozilla. A simple snippet:

>>> from jinja2 import Template
>>> template = Template('Hello {{ var }}!')
>>> template.render(var='From Jinja2')
u'Hello From Jinja2!'

Using the same principle, we can build pages from composition of one or more html chunks extracted previously from an HTML theme. In fact, this is the process of integrating a new design into a Flask app.

Integrate a design

The process of adding a new design to a Flask app consist into splitting the HTML pages into smaller, reusable chunks and use them later to generate app pages:

  • extract the master page - the future layout where specific pages content will be injected
  • extract header, footer, navigation
  • extract other sections and components used across pages

The new structure of our app become like this:

Flask Dashboard - app structure with design integrated

  • template/ layouts/default.html - represents the master layout
  • template/ pages/index.html - is the index (main dashboard page)
  • template/ includes - here we can find the HTML chunks used across pages

Master layout

This is the container used to construct all other pages.

<head>

    <title>Flask Dashboard</title>
    
    <link href="/static/assets/css/app.css" rel="stylesheet" />

</head>
<body>
    
    <div class="wrapper">

        {% include 'includes/sidebar.html' %}

        <div class="main-panel">

            {% include 'includes/navigation.html' %}

            {{ content }}

            {% include 'includes/footer.html' %}
    
        </div>
        
    </div>
    
</body> 

{% include 'includes/scripts.html' %}

</html>

In this simplified structure of our master page, we can spot the page chunks included in different parts of our pages. To build a new page, with Jinja2 we need a few lines of code:

@app.route('/table.html')
def table():
    return render_template('layouts/default.html',
                            content=render_template( 'pages/table.html') )

Where:

  • layout / default.html - is loaded
  • pages / table.html - is loaded in variable `content`, ¬†rendered in default.html
<div class="main-panel">

    {% include 'includes/navigation.html' %}

    {{ content }}

    {% include 'includes/footer.html' %}
    
</div>
Issues understanding this code? Ask us anything on Discord.

In a similar way, all pages are constructed from reusable chunks and injected as variable `content` in master page layout.

What's next? Adding a database (coming soon)
Show Comments

Get the latest posts delivered right to your inbox.