loading...
Cover image for Material Dashboard - Free Jinja Template

Material Dashboard - Free Jinja Template

sm0ke profile image Sm0ke Updated on ・3 min read

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! Links are below


Material Dashboard - Animated presentation


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

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 - User Profile page.


Material Dashboard - UI Alerts

Material Dashboard - UI Alerts page.


Material Dashboard - Maps

Material Dashboard - UI Alerts page.


Material Dashboard - Login Page

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

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

pic
Editor guide