Material Dashboard - Free Jinja Template

Hello Coders,

This article presents a free Material Dashboard 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.

• ✨ Flask Material Dashboard - product page
• ✨ Django Material Dashboard - product page
• ✨ More Project styled with Material Design

Material Dashboard - 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 - 9k Stars, 1.2k Forks
• Material Dashboard, the product page hosted by Creative-Tim

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 environment set up properly. For guidance regarding this initial set up, please access below links:

• Setup CentOS for development
• Setup Ubuntu for development
• 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:

< 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.

$ # 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 - User Profile

Material Dashboard - UI Alerts

Material Dashboard - Maps

Material Dashboard - Login Page

Thanks for reading! For support feel free to ask me anything in the comments or we can chat LIVE on Discord.

Material Dashboard - Resources

• Material Dashboard starters provided by AppSeed
• (HTML) Material Dashboard, the product page hosted by Creative-Tim.