Black Dashboard - Free Resources for Jinja2, Flask, and Django

Hello Coders,

This article presents a short-list with free resources for Black Dashboard design (free version) the well-known UI KIT provided by Creative-Tim agency. For newcomers, Black Dashboard is a beautiful Bootstrap 4 Admin Dashboard with a huge number of components built to fit together and look amazing. If you are looking for a tool to manage and visualize data about your business, this dashboard is the thing for you. Black Dashboard comes packed with all plugins that you might need inside a project and documentation on how to get started. It is light and easy to use, and also very powerful.

Thank you! Content provided by AppSeed - App Generator.

• Black Dashboard Flask - product page
• Black Dashboard Django - product page
• Black Dashboard Jinja - LIVE Demo
• Black Dashboard (HTML version) - product page

Black Dashboard (HTML version)

This dark-themed design, provided under the MIT license by Creative-Tim agency, can be downloaded directly from Github.
Black Dashboard is a beautiful Bootstrap 4 Admin Dashboard with a huge number of components built to fit together and look amazing.
If you are looking for a tool to manage and visualize data about your business, this dashboard is the thing for you. It combines colors that are easy on the eye, spacious cards, beautiful typography, and graphics.
Black Dashboard comes packed with all plugins that you might need inside a project and documentation on how to get started. It is light and easy to use, and also very powerful.

• Black Dashboard - product page

Black Dashboard (HTML) - Build from sources

To compile the HTML files, we need to have Nodejs and Gulp installed on the workstation.

$ # Download Sources
$ git clone https://github.com/creativetimofficial/black-dashboard.git
$ cd black-dashboard
$
$ # Install modules
$ yarn
$
$ # Start the project for the development
$ gulp

If all goes well, we should see Black Dashboard design rendered in the browser.

Black Dashboard Jinja

Jinja2 is quite a popular template engine used by frameworks like Flask and Django. AppSeed uses Jinja2 as an input format for the internal automated workflow that generates usable, tested web apps.

What is Jinja

Jinja2 is a Python template engine used to generate HTML or XML returned to the user via an HTTP response.

For those who have not been exposed to a templating language before, such languages essentially contain variables as well as some programming logic, which when evaluated (or rendered into HTML) are replaced with actual values.

For more information about this amazing engine, please access a popular article published here on Dev.to, quite recently:

Jinja2 — Short introduction and Sample Apps

Black Dashboard Jinja - How to compile

$ # Clone the sources
$ git clone https://github.com/app-generator/jinja-black-dashboard.git
$ cd jinja-black-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/

Black Dashboard Jinja - User Profile

Flask Black Dashboard

The Flask version of Black Dashboard design is provided as a simple codebase enhanced with authentication, database, ORM, and deployment scripts for Docker, Heroku, and Gunicorn/Nginx stack — App Links:

• Flask Black Dashboard - product page
• Flask Black PRO - more pages, components

Black Dashboard Flask - Codebase structure

< PROJECT ROOT >
   |
   |-- app/                   # Implements app logic
   |    |-- base/             # Base Blueprint - Handles the auth
   |    |-- home/             # Home Blueprint - Serve pages
   |    |
   |   __init__.py            # Initialize the app
   |
   |-- requirements.txt       # Development modules 
   |-- requirements-mysql.txt # Production modules  - Mysql DMBS
   |
   |-- .env                    # Inject Configuration via Env
   |-- config.py               # Set up the app
   |-- run.py                  # Start the app - WSGI gateway
   |
   |-- ******************************************************

To compile the sources, please follow the build instructions listed in the README file. In case of any issues, please use Github to report a possible bug or feel free to ask me anything in the comments.

Black Dashboard Django

Django version is also released on Github and based on the permissive (MIT) license can be used for unlimited hobby & commercial projects and no footer credit is required to use the app and the design.

• Black Dashboard Django - product page
• Django Black PRO - more pages, components

Black Dashboard Django - How to compile the code

$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-black.git
$ cd django-dashboard-black
$
$ # Virtualenv set up
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$ 
$ # Install modules
$ # SQLIte version
$ pip3 install -r requirements.txt
$
$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
$
$ # Start the application (development mode)
$ python manage.py runserver # default port 8000
$
$ # Start the app - custom port
$ # python manage.py runserver 0.0.0.0:<your_port>
$
$ # Access the web app in the browser: http://127.0.0.1:8000/

Thanks for reading! Where to go from here:

• See more starters coded on top of Black Dashboard design
• More Jinja Templates - provided by AppSeed