Hello coder,
This article presents a curated list with Flask/Jinja Templates that might help you build faster your next Python project. The free projects are released under the MIT License on Github and can be used for unlimited hobby & commercial projects. For support, feel free to access AppSeed, the company that creates the projects.
Thanks for reading! - Content provided by App Generator.
- ✨ Flask/Jinja Datta Able - free dashboard
- ✨ Flask/Jinja Pixel Lite - free UI Kit
- ✨ Flask/Jinja Argon - free dashboard
- ✨ Flask/Jinja Soft Dashboard - free product
- ✨ Flask/Jinja Black Dashboard - free product
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.
Why do we need Jinja?
Sandboxed Execution - It provides a protected framework for automation of testing programs, whose behavior is unknown and must be investigated.
HTML Escaping Jinja 2 has a powerful automatic HTML Escaping, which helps to prevent Cross-site Scripting (XSS Attack). There are special characters like >,<,&, etc. which carry special meanings in the templates. So, if you want to use them as regular text in your documents then, replace them with entities. Not doing so might lead to XSS-Attack.
Template Inheritance - This feature helps us to generate new pages starting from a base template that we inherit a common structure.
How to get Jinja2
To start playing with it, just open a terminal and type:
$ pip install jinja2
Jinja in action
Simple runtime replace
>>> from jinja2 import Template
>>> t = Template("Hello {{ token }}!")
>>> t.render(token="Jinja2")
u'Hello Jinja2!'
The engine will replace the inner token with value Jinja2. This is quite useful when we use this block for different token values.
Lists iteration
In web development, we can have cases when a list should be displayed on the page: registered users, for instance, or a simple list of options. In Jinja, we can use a for structure as bellow:
# Define data structure
my_list=[0,1,2,3,4,5] # a simple list with integers
In Jinja, we can iterate with ease, using a for block:
...
<ul>
{% for n in my_list %}
<li>{{n}}</li>
{% endfor %}
</ul>
...
Template Inheritance
Templates usually take advantage of inheritance, which includes a single base template that defines the basic structure of all subsequent child templates. You use the tags { extends } and { block } to implement inheritance.
Let's take a look at a real sample:
Parent HTML - saved as
base.html
<html>
<head>
<title>My Jinja {% block title %}{% endblock %} </title>
</head>
<body>
<div class="container">
<h2>This is from the base template</h2>
<br>
{ block content }{ endblock }
<br>
</div>
</body>
</html>
The Child template - saved as child.html
{ extends "base.html" }
{ block title } MySample { endblock }
{ block content }
Cool content here
{ endblock }
When Jinja loads child.html, the { extends } block informs the engine to merge the base.html template with the content provided by child.html
-
{ block title }becomeMySample -
{ block content }becomeCool content here
Here is the final HTML generated by Jinja:
<html>
<head>
<title>My Jinja MySample</title>
</head>
<body>
<div class="container">
<h2>This is from the base template</h2>
<br>
Cool content here
<br>
</div>
</body>
</html>
This powerful feature helps us to build complex web apps with ease by using common pages and components to generated dynamic pages hydrated with real information loaded from the database or provided by users, for instance.
Jinja Template
Template features:
- UI Kit: Argon Design (Free Version) by Creative-Tim
- Render Engine: Flask / Jinja2
- MIT License
- Free support via Github issues tracker
UI Kit - Argon Dashboard is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in color, that you can easily modify using SASS files. You will save a lot of time going from prototyping to full-functional code because all elements are implemented. This Dashboard is coming with pre-built examples, so the development process is seamless, switching from our pages to the real website is very easy to be done.
Jinja Template - Black Dashboard
Template features:
- UI Kit: Black Dashboard (Free Version) by Creative-Tim
- Render Engine: Flask / Jinja2
- MIT License
- Free support via Github issues tracker
UI Kit - Black Dashboard
Vendor Notes - 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.
Jinja Template - AdminLTE
Template features:
- UI Kit: AdminLTE by ColorLib
- Render Engine: Flask / Jinja2
- MIT License
- Free support via Github issues tracker
UI Kit - AdminLTE
Vendor Notes - AdminLTE is a fully responsive administration template. Based on Bootstrap 4.4 framework and also the JS/jQuery plugin. Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops
Jinja Template - Adminator
Template features:
- UI Kit: Adminator (Free Version) by ColorLib
- Render Engine: Flask / Jinja2
- MIT License
- Free support via Github issues tracker
UI Kit - Adminator
Vendor Notes - Adminator is a responsive Bootstrap 4 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications, and some useful widgets. The modern and clean UI makes this design a good candidate for your next project.
Jinja Template - Quick UI
Template features:
- UI Kit: Quick (Free Version) by Webpixels
- Render Engine: Flask / Jinja2
- MIT License
- Free support via Github issues tracker
UI Kit - Quick by Webpixels
Vendor Notes - The design of Quick is 100% responsive - it instantly adapts to all modern browsers and resolutions. You can now be sure you'll grab your users' attention with any of the pre-built page examples.
Plan, build, and launch beautiful and consistent user interfaces for the web that drives meaningful engagement and growth for your brand.
Jinja Template - CoreUI
Template features:
- UI Kit: CoreUI Dashboard (Free Version) by CoreUI - v3.2.0
- Render Engine: Flask / Jinja2
- MIT License
- Free support via Github issues tracker
UI Kit - CoreUI
Vendor Notes - CoreUI is an Open Source Bootstrap Admin Template. But CoreUI is not just another Admin Template.
It goes way beyond hitherto admin templates thanks to transparent code and file structure.
And if that's not enough, let’s just add that CoreUI consists bunch of unique features and over 1000 high-quality icons.
CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer the ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web, or WebApp – CoreUI covers them all!
Jinja Template - Argon Dashboard PRO
Template features:
- UI Kit: Argon Dashboard PRO by Creative-Tim
- Render Engine: Flask / Jinja2
- Commercial License
- 24/7 Live Support via Discord.
Used by
UI Kit - Argon Dashboard PRO
Vendor Notes - Argon Dashboard PRO is built with over 200 individual components, giving you the freedom of choosing and combining.
All components can take variations in color, that you can easily modify using Sass files. You will save a lot of time going from prototyping to full-functional code because all elements are implemented. This Dashboard is coming with pre-built examples, so the development process is seamless, switching from our pages to the real website is very easy to be done. Every element has multiple states for colors, styles, hover, focus, that you can easily access and use.
Jinja2 Template - Material Dashboard PRO
Template features:
- UI Kit: Material Dashboard PRO by Creative-Tim
- Render Engine: Flask / Jinja2
- Commercial License
- 24/7 Live Support via Discord.
Used by
UI Kit - Material Dashboard PRO
Vendor Notes - Material Dashboard PRO is a Premium Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design.
It is based on the popular Bootstrap 4 framework and comes packed with multiple third-party plugins.
All components are built to fit perfectly with each other while aligning with the material concepts.
--
Jinja Template - Black Dashboard PRO
Template features:
- UI Kit: Black Dashboard PRO by Creative-Tim
- Render Engine: Flask / Jinja2
- Commercial License
- 24/7 Live Support via Discord.
Used by
UI Kit - Black Dashboard PRO
Vendor Notes - Black Dashboard PRO is a beautiful Bootstrap 4 Admin Dashboard that comes in 2 versions: Dark and Light Mode.
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.
Jinja Template - Material PRO Wpx
Template features:
- UI Kit: MaterialPro Dashboard (Premium Version) by WrapPixel
- Render Engine: Flask / Jinja2
- Commercial License
- 24/7 Live Support via Discord.
Used by
UI Kit - MaterialPro Bootstrap Admin
Vendor Notes - WrapPixel’s MaterialPro Bootstrap Admin is a premium bootstrap material design template that comes packed with new, fresh, and attractive designs and ready-to-use components. Based on the popular Bootstrap 4 framework and inspired by Google’s material design, the MaterialPro Bootstrap Admin template is bundled with multiple third-party plugins that make it an excellent standalone solution.
Thanks for reading! For more Jinja Template or support please access the AppSeed platform
Links & resources
- More Jinja Templates - provided by AppSeed
Top comments (2)
Thank you! I've been using an older version of CoreUI, the free version.
Yw, Indeed CoreUI rocks.
My favorite is Adminator. ColorLib put some nice tooling in the HTML version. Too bad has no PRO version to use the project with more components.