DEV Community

Cover image for Jinja Templates - Curated list
Sm0ke
Sm0ke

Posted on • Updated on

Jinja Templates - Curated list

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.



Jinja Template - Black Design.


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
Enter fullscreen mode Exit fullscreen mode

Jinja in action

Simple runtime replace

>>> from jinja2 import Template
>>> t = Template("Hello {{ token }}!")
>>> t.render(token="Jinja2")
u'Hello Jinja2!'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

In Jinja, we can iterate with ease, using a for block:

...
      <ul>
        {% for n in my_list %}
        <li>{{n}}</li>
        {% endfor %}
      </ul>
...
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

The Child template - saved as child.html

{ extends "base.html" }

{ block title } MySample { endblock }

{ block content }
  Cool content here
{ endblock }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 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 - Argon Dashboard.


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 - Black Dashboard.


Jinja Template - AdminLTE

Template features:


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


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


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 - Quick UI.


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


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.


Jinja Template - Argon Dashboard PRO.


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.

--

Jinja2 Theme - Material Dashboard PRO - Template project provided by AppSeed.


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 - Black Dashboard PRO.


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.


Jinja Template - Material PRO Wpx.


Thanks for reading! For more Jinja Template or support please access the AppSeed platform


Links & resources

Top comments (2)

Collapse
 
crearesite profile image
WebsiteMarket

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

Collapse
 
sm0ke profile image
Sm0ke

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.