Material Dashboard - Free Jinja Template
Tags: webdev, material, jinja, appseed
Published: 2020-08-19 17:15:36

---
title: Material Dashboard - Free Jinja Template
published: true
description: A free Material Dashboard design migrated to Jinja and released under MIT License
tags: webdev, material, jinja, appseed
cover_image: https://raw.githubusercontent.com/app-generator/jinja-template-material-dashboard/master/media/jinja-template-material-dashboard-screen.png
---
Hello Coders, 

This article presents a free **[Material Dashboard](https://appseed.us/admin-dashboards/flask-dashboard-material-design)** design, migrated to **Jinja**, a modern template engine used in many Python frameworks like Flask and Django. **Material Dashboard** is a free Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design, crafted and released for free by Creative-Tim. 

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

- ✨ [Flask Material Dashboard](https://appseed.us/admin-dashboards/flask-dashboard-material-design) - product page
- ✨ [Django Material Dashboard](https://appseed.us/admin-dashboards/django-dashboard-material) - product page
- ✨ More Project styled with [Material Design](https://appseed.us/ui-kit/material-design)

---

![Material Dashboard - Animated presentation](https://raw.githubusercontent.com/app-generator/jinja-template-material-dashboard/master/media/jinja-template-material-dashboard-intro.gif)
 
--- 

## **[Material Dashboard](https://appseed.us/ui-kit/material-design)** - HTML Version

The UI is built over the popular Bootstrap 4 framework and can be downloaded directly from Github (MIT License). HTML Sources are provided with old school tooling (Gulp pipeline) and the core style can be customized with ease via SCSS files. 

> Material Dashboard (HTML) Links:

- [Material Dashboard Sources](https://github.com/creativetimofficial/material-dashboard) - 9k Stars, 1.2k Forks
- [Material Dashboard](https://www.creative-tim.com/product/material-dashboard?AFFILIATE=128200), the product page hosted by Creative-Tim

---

## **[Material Dashboard](https://appseed.us/material-dashboard)** - Jinja Version

The project is provided as a super simple Flask project (no database or hard dependencies) coded to be simple to understand and integrate into any Python project. 

To compile the project, your workstation must have a [Python3](https://www.python.org/) environment set up properly. For guidance regarding this initial set up, please access below links: 

- [Setup CentOS for development](https://docs.appseed.us/content/how-to/setup-centos-for-development/)
- [Setup Ubuntu for development](https://docs.appseed.us/content/how-to/setup-ubuntu-for-development/)
- [Setup Windows for development](https://docs.appseed.us/content/how-to/setup-windows-for-development/)

In case any of you have issues using the project, don't hesitate to AMA in the comments or in private. 

---

## Material Dashboard - Codebase Structure

The codebase has a simple structure, no Blueprints, or other advanced patterns. I'll drop a snapshot below: 

```bash
< PROJECT ROOT >
   |
   |-- app/__init__.py
   |-- app/
   |    |-- static/
   |    |    |-- <css, JS, images>
   |    |
   |    |-- templates/
   |    |    |-- includes/                 # Reusable Components
   |    |    |    |
   |    |    |    |-- navigation.html      # Top bar
   |    |    |    |-- sidebar.html         # Left sidebar
   |    |    |    |-- scripts.html         # JS scripts
   |    |    |    |-- footer.html          # The common footer
   |    |    |
   |    |    |-- layouts/                  # App Layouts
   |    |    |    |
   |    |    |    |-- base.html            # Used by common pages
   |    |    |    |-- base-fullscreen.html 
   |    |    |
   |    |  index.html                      # The default page
   |    |  login.html                      # Auth Login Page
   |    |  register.html                   # Registration Page
   |    |  page-404.html                   # Error 404 page 
   |    |  page-500.html                   # Error 500 page 
   |    |    *.html                        # All other pages
   |
   |-- requirements.txt
   |
   |-- run.py
   |
   |-- ************************************
```

--- 

> Let's Compile the code

If Python3 is accessible via a terminal window, all we need to do is to type a few commands.

```bash
$ # Clone the sources
$ git clone https://github.com/app-generator/jinja-template-material-dashboard.git
$ cd jinja-template-material-dashboard
$
$ # Virtualenv set up
$ virtualenv env
$ source env/bin/activate
$
$ # Install requirements
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ # Run the Jinja Template
$ flask run 
$
$ # Access the UI in browser: http://127.0.0.1:5000/
```

The starter has no authentication implemented, and we can access right away the pre-built pages: 

---

> **[Material Dashboard](https://appseed.us/ui-kit/material-design)** - User Profile

![Material Dashboard - User Profile page.](https://raw.githubusercontent.com/app-generator/jinja-template-material-dashboard/master/media/jinja-template-material-dashboard-screen-user.png)

--- 

> **[Material Dashboard](https://appseed.us/ui-kit/material-design)** - UI Alerts

![Material Dashboard - UI Alerts page.](https://raw.githubusercontent.com/app-generator/jinja-template-material-dashboard/master/media/jinja-template-material-dashboard-screen-alerts.png)

---

> **[Material Dashboard](https://appseed.us/ui-kit/material-design)** - Maps

![Material Dashboard - UI Alerts page.](https://raw.githubusercontent.com/app-generator/jinja-template-material-dashboard/master/media/jinja-template-material-dashboard-screen-alerts.png)

--- 

> **[Material Dashboard](https://appseed.us/ui-kit/material-design)** - Login Page

![Material Dashboard - Login Page.](https://raw.githubusercontent.com/app-generator/jinja-template-material-dashboard/master/media/jinja-template-material-dashboard-screen-login.png)

---

> Thanks for reading! For support feel free to ask me anything in the comments or we can chat LIVE on [Discord](https://discord.gg/fZC6hup).

---

## **[Material Dashboard](https://appseed.us/ui-kit/material-design)** - Resources

- **[Material Dashboard](https://appseed.us/material-dashboard?ref=dev)** starters provided by AppSeed
- (HTML) [Material Dashboard](https://www.creative-tim.com/product/material-dashboard?AFFILIATE=128200), the product page hosted by Creative-Tim.