LOG IN
Find MentorsFind FreelancersCommunity PostBlog
SIGN UP
LOG IN
Codementor Events
Adi Chirilov - Sm0ke
Follow
Founder @ AppSeed.us

Jinja Templates - Open-Source and Free

Published Aug 08, 2020Last updated Feb 26, 2021
Jinja Templates - Open-Source and Free

Hello Coder,

If you plan to code your next project in Flask, this curated list with free Jinja Templates might help you to start faster. All projects, released on Github under the MIT on Github, are actively supported by AppSeed via Github (issues tracker) and LIVE on Discord. The codebase is a super lightweight Flask project without a database or hard dependencies - Thanks for reading!

Jinja Templates - the short list

Jinja Template - Black Dashboard design.

What is Jinja2

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

This modern template engine, basically help us to win time. By using it we get out-of-the-box some really nice features:

  • Template Inheritance - This feature helps us to generate new pages starting from a base template that we inherit a common structure.
  • Sandboxed Execution - It provides a protected framework for automation of testing programs, whose behavior is unknown and must be investigated.
  • HTML Escaping - Jinja2 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.

Jinja2 in action

Before using Jinja, of course we need to install it using PIP:

$ pip install jinja2

Once we have the Jinja2 package available, we can warm up with a simple code snippet written in the python terminal:

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

For more information about this template engine please access the links:

Jinja Template - Codebase

The codebase is a super simple Flask starter, no database, or any other hard dependency encapsulated in the source code. Starters can be used also in Docker with just one line - please see the README file provided in the sources.

< PROJECT ROOT >
   |
   |-- app/__init__.py
   |-- app/
   |    |-- static/
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
   |    |
   |    |-- templates/
   |    |    |
   |    |    |-- includes/                 # Page chunks, components
   |    |    |    |
   |    |    |    |-- navigation.html      # Top bar
   |    |    |    |-- sidebar.html         # Left sidebar
   |    |    |    |-- scripts.html         # JS scripts common to all pages
   |    |    |    |-- footer.html          # The common footer
   |    |    |
   |    |    |-- layouts/                  # App Layouts (the master pages)
   |    |    |    |
   |    |    |    |-- base.html            # Used by common pages like index, UI
   |    |    |    |-- base-fullscreen.html # Used by login, register pages
   |    |    |
   |    |  index.html                      # The default page
   |    |  login.html                      # Auth Login Page
   |    |  register.html                   # Auth Registration Page
   |    |  page-404.html                   # Error 404 page (page not found)
   |    |  page-500.html                   # Error 500 page (server error)
   |    |    *.html                        # All other pages 
   |
   |-- requirements.txt
   |
   |-- run.py
   |
   |-- ************************************************************************

Jinja Templates - How to compile

To use the code, we need basic Python tooling properly installed in the workstation. If you are not sure if Python is properly installed, please open a terminal and type python --version. The full-list with dependencies and tools required to build the app:

  • Python3 - the programming language used to code the app
  • GIT - used to clone the source code from the Github repository
  • Basic development tools (g++ compiler, python development libraries ..etc) used by Python to compile the app dependencies in your environment.

Check Python version (using the terminal)

$ # Check Python version
$ python --version
Python 3.7.2 # <--- All good

Check GIT command tool (using the terminal)

$ # Check git
$ git --version
$ git version 2.10.1.windows.1 # <--- All good

Build a sample Jinja starter

Just to make easier the usage, I will drop here the necessarry commands to compile the Black Dashboard sample:

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

If all goes well, we should see a clone of Jinja Black Dashboard LIVE, rendered in the browser:

Jinja Template - Login Page

Jinja Template - Black Dashboard, login page.

Jinja Template - User Profile Page

Jinja Template - Black Dashboard, user profile.

Using an identical codebase, all starters mentioned in this article can be compiled in the same way. For more information, please read carefully the README filed and let me know in the comments if something goes wrong.

Jinja Template - Quick UI

Template features:

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

Template features:

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 - AdminT

Template Theme provided by AppSeed - Features:

UI Kit - AdminT (Free Version)

Vendor Notes - AdminT is the swiss army knife of the dashboard templates.
You can create applications of any kind with it. We carefully crafted every component based on a cohesive design system. Your app will look pro with Admint magic. It’s completely free & open-source. Grab it today and build beautiful apps.

Jinja Template - AdminT.

Jinja Template - GradientAble

Template features:

UI Kit - Gradient Able

Vendor Notes -Gradient Able Bootstrap 4 Free/Lite Admin Template is a complete solution for your dashboard creation. The default layout version comes with limited options like Google optimized, font integration, high speed, mature & sophisticated, and extremely well-organized code which makes free Gradient Able a fully flexible solution for any backend application project.

Jinja Template - GradientAble.

Thanks for reading! For more starters and Jinja templates, feel free to access the AppSeed plaform or below links:

JinjaFlaskAppseed
Report

Enjoy this post? Give Adi Chirilov - Sm0ke a like if it's helpful.

post comments
Adi Chirilov - Sm0ke
Founder @ AppSeed.us
#Automation #Python #Design Patterns
Follow
Discover and read more posts from Adi Chirilov - Sm0ke
get started
post commentsBe the first to share your opinion
MarkdownGitHub flavored markdown supported
submit
Show more replies