Sm0ke

Posted on Aug 8, 2020 • Edited on Oct 14, 2021

Jinja Templates - Curated list

#webdev #jinja #appseed

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 } become MySample
{ block content } become Cool 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)

WebsiteMarket • Aug 8 '20

Thank you! I've been using an older version of CoreUI, the free version.

Sm0ke • Aug 8 '20

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.

DEV Community

Jinja Templates - Curated list

What is Jinja

Why do we need Jinja?

Jinja in action

Jinja Template

Jinja Template - Black Dashboard

Jinja Template - AdminLTE

Jinja Template - Adminator

Jinja Template - Quick UI

Jinja Template - CoreUI

Jinja Template - Argon Dashboard PRO

Jinja2 Template - Material Dashboard PRO

Jinja Template - Black Dashboard PRO

Jinja Template - Material PRO Wpx

Links & resources

Top comments (2)

Read next

🔥HMPL — best alternative to HTMX

CSS: Easy dark mode

Understanding HTTP Status Codes: A Complete Guide

Express or NestJS? Choosing the Best Framework for Your Backend