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