Flask Template - A curated list with projects
Tags: webdev, flask, python, appseed
Published: 2020-12-20 12:28:07

---
title: Flask Template - A curated list with projects
published: true
description: Introduction to Flask and a curated list with Flask Templates provided with basic modules, database, ORM, and deployment scrips on top of modern UI Kits
tags: webdev, flask, python, appseed
canonical_url: https://blog.appseed.us/flask-templates-curated-list-18vq/
cover_image: https://raw.githubusercontent.com/app-generator/flask-illustrations-iradesign/master/media/flask-illustrations-iradesign-screen.png
---
Hello Coders,

This article presents a short and comprehensive introduction to **Flask** and a curated list with **[Flask Templates](https://appseed.us/admin-dashboards/flask)** provided with basic modules, database, ORM, and deployment scrips on top of modern UI Kits. For newcomers, **Flask** is a lightweight web application framework written in Python. Sometimes classified as a microframework, Flask provides a lightweight codebase that can be easily extended to become an API, a simple web app, or a complex eCommerce platform.

---

> Thank you! **Content provided by [AppSeed - App Generator](https://appseed.us)**.

---

> Topics covered and resources

- What is Flask
- How to get started with Flask
- Flask - a super simple application
- Flask Template System - Jinja Template engine

---

- (Free) [Flask Pixel UI](https://appseed.us/apps/flask-apps/flask-pixel-bootstrap-uikit) - product page
- (Free) [Flask Datta Able](https://appseed.us/admin-dashboards/flask-dashboard-dattaable) - product page
- (Free) [Flask Argon](https://appseed.us/admin-dashboards/flask-boilerplate-dashboard-argon) - product page
- (Free) [Flask Volt](https://appseed.us/admin-dashboards/flask-dashboard-volt) - product page

---

![Flask Template Pixel UI - Open-source template coded in Flask.](https://raw.githubusercontent.com/app-generator/flask-pixel-bootstrap-uikit/master/media/flask-pixel-bootstrap-uikit-screen.png)

---

## [What is Flask](https://docs.appseed.us/what-is/flask/)

Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. Classified as a microframework, Flask is written in Python and it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.

If we have Python installed we can see Flask in action on our browser in less than one minute. Let's make a short test:

**1# - Install Flask**

```bash
$ pip install Flask
```

---

**2# - Use your preferred editor to code a minimal Flask app**

```python
from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return f'Hello from Flask!'
```
Save the file and ...

---

**3# - Start the app and see it in the browser**

```bash
$ env FLASK_APP=hello.py flask run
 * Serving Flask app "hello"
 * Running on http://127.0.0.1:5000/
```

By visiting the app in the browser we should see that warm message.

---

Flask - More than "Hello World"
With Flask we can easily code a simple, multi-page website using a Bootstrap template. Our next sample will be coded on top of Pixel UI Kit -  an open-source accessibility first design.

Please find below a possible codebase structure for our project. I said "possible" because Flask is highly configurable and empowers the developer with the freedom to structure the app without any constraints.

```bash
< PROJECT ROOT >
    |
    |--- app/__init__.py
    |--- app/
    |     | --- <static/assets>
    |     |       |--- <css>
    |     |       |--- <Js>
    |     |       |--- <img>
    |     |
    |     | --- <templates>
    |             |---<includes>                   # Page chunks, components
    |             |     | --- navigation.html      # Top bar
    |             |     | --- sidebar.html         # Left sidebar
    |             |     | --- scripts.html         # JS scripts common to al
    |             |     | --- footer.html          # The common footer
    |             |
    |             |---<layouts>                    # App Layouts
    |             |
    |          index.html                          # The default page
    |          *.html                              # All other pages 
    |
    |--- requirements.txt
    |
    |--- run.py
    |
    |-----------------------------
```

Let's iterate over the relevant files:

- **run.py** - the entry point used to start the application
requirements.txt - a file that specifies all dependencies (for now is just Flask)
- **app** - the application folder where we will add our code
- **app/__init__.py** - This file is required to let us use the app as a Python Package
- **app/static** - this folder will contain design assets: JS, css and images.
- **templates** - the directory with pages, layouts, and components used by Flask to generate some nice pages for us

---

Before we start using templates in Flask, let's code a simple app that use strings to render a page, without templates:

```python
from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return '''
<html> 
    <head> 
      <title>Simple App</title> 
     </head> 
      <body> 
        <h1>Hello</h1> 
        <p>From Flask - no templates</p> 
      </body> 
</html>'''
```

Basically, we are returning a string formatted as a simple HTML page with all standard sections (HEAD, body tags). If the project should render more than one line on every page, it might be a good idea to start using a template system to have a well-organized project, easy to maintain and use by us and others.

---

## [Jinja Template](https://appseed.us/jinja-template) System

What is Jinja - Jinja is a library for Python used by popular web frameworks like Flask and Django to serve HTML pages in a secure and efficient way. Using a template engine is a common practice in web development, no matter the language or framework used to code the web application.

---

> How to install Jinja

```bash
$ pip install jinja2
```

We can test and play with the Jinja engine directly in the Python console:

```python
>>> from jinja2 import Template
>>> t = Template("Jinja {{ token }}!")
>>> t.render(token="works")
u'Jinja works!'
```

---

Jinja Template System - A few reasons to use it

> Work Less

Jinja allows us to reuse components (aka common HTML chunks) in many pages and contexts with minor changes. Imagine that we have a footer with some links and contact information, common to all pages in a web application. Using Jinja we can define a separate file named footer.html and we can reuse it with a simple include:

**footer.html definition**

```html
<footer class="footer">
    <div class=" container-fluid ">
        <span>
            &copy; YourCompany;
        </span>

        <span>
            Contact: bill [ @ ] microsoft.com
        </span>
    </div>
</footer>
```

**footer.html usage** in a final page:

```html
<head>
  <title>
    Jinja Template - Cheat Sheet | Dev.to
  </title>
</head>
<body>
    <div class="content">
        Some cool content
    </div>

    <!-- The magic include line --> 
    {% include 'footer.html' %}    

</body>
</html>
```

---

> Template Inheritance

Inheritance, in Jinja context, means to define a `base template` that defines the basic structure of all subsequent child templates. This master template can be `inherited` via `extends` directive to build variations (new pages).

**A real sample**

**Parent HTML** - saved as base.html

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

```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 }` becomes MySample
- `{ block content }` becomes Cool content here


Generated HTML (by Jinja)

```html
<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>
```

---

## Jinja - Render Lists

Jinja supports control structures like `if/else`, `for loops` to manipulate lists and dictionaries. 

**List definition**
```python
# Define a simple list
users = ['user1','user2', 'user3']
```

**Jinja code snippet**
```html
<h1>Members</h1>
<ul>
{% for user in users %}
  <li>{{ user }}</li>
{% endfor %}
</ul>
```

**Generated HTML**
```html
<h1>Members</h1>
<ul>
  <li>user1</li>
  <li>user2</li>
  <li>user3</li>
</ul>
```

---

`For` loops can be checked for emptiness with a simple `else`, as below: 

**Jinja code snippet**
```html
<ul>
{% for user in users %}
    <li>{{ user.username|e }}</li>
{% else %}
    <li><em>no users found</em></li>
{% endfor %}
</ul>
``` 

**Generated HTML**
```html
<h1>Members</h1>
<ul>
  <li>no users found</li>
</ul>
```

---

> Jinja - HTML Escaping

Escaping is useful when HTML is generated and the injected content might contain `>`, `<`, `&`, or `"`. Escaping in Jinja works by piping the variable through the |e filter:

**Jinja code snippet**
```html
{{ content|e }} <!-- content might contain unsafe chars -->
```

---

> [Jinja Filters](https://jinja.palletsprojects.com/en/2.11.x/templates/#list-of-builtin-filters)

Filter sections allow to apply regular Jinja filters on a block of template data - the syntax:

**Jinja code snippet**
```html
{% filter upper %}
    uppercase me
{% endfilter %}
```

**Generated HTML**
```html
UPPERCASE ME
```

---

> Jinja Math

Jinja allows you to compute values. Here are some samples:

```html
{{ 1 + 1 }} will render 1
```

```html
{{ 1 / 2 }} will render 0.5
```

```html
{{ 11 % 7 }} will render 4
```

--- 

## [Flask Template - Pixel UI](https://appseed.us/apps/flask-apps/flask-pixel-bootstrap-uikit)

Pixel UI Kit (Free version) designed by Themesberg and coded in Flask Framework with SQLite database, SqlAlchemy ORM and authentication.

Pixel is a free, fully responsive and modern Bootstrap 4 UI Kit that will help you build creative and professional websites. Use our components and sections, switch some Sass variables to build and arrange pages to best suit your needs.

- [Flask Pixel UI](https://appseed.us/apps/flask-apps/flask-pixel-bootstrap-uikit) - product page
- **[Flask Pixel UI PRO](https://appseed.us/apps/flask-apps/flask-pixel-uikit-pro) - more pages, components, LIVE Support**

---

![Flask Template - Pixel UI, the main product page.](https://appseed-147a1.kxcdn.com/static/apps/flask-pixel-bootstrap-uikit/flask-pixel-bootstrap-uikit-screen.png)

---

## [Flask - Datta Able](https://appseed.us/admin-dashboards/flask-dashboard-dattaable)

Datta Able Free Dashboard designed by CodedThemes coded in Flask Framework with SQLite database, SQLAlchemy ORM and authentication.

Datta Able Bootstrap Lite is the most stylised Bootstrap 4 Lite Admin Template, around all other Lite/Free admin templates in the market. It comes with high feature-rich pages and components with fully developer-centric code. Before developing Datta Able our key points were performance and design.

- [Flask Datta Able](https://appseed.us/admin-dashboards/flask-dashboard-dattaable) - product page
- **[Flask Datta Able PRO](https://appseed.us/admin-dashboards/flask-dashboard-dattaable-pro) - more pages, components, LIVE Support**

---

![Flask Template Datta Able - Main Dashboard Screen.](https://raw.githubusercontent.com/app-generator/flask-dashboard-dattaable/master/media/flask-dashboard-dattaable-screen.png)

---

## [Flask Template - Argon](https://appseed.us/admin-dashboards/flask-boilerplate-dashboard-argon)

Argon Dashboard designed by Creative-Tim coded in Flask with authentication, ORM, Blueprints, deployment scripts for Docker, HEROKU, and Gunicorn/Nginx stack.

Argon Dashboard is built with over 100 individual components, giving you the freedom of choosing and combining. Every component has multiple states for colors, styles, hover, focus, that you can easily access and use.

- [Flask Template Argon](https://appseed.us/admin-dashboards/flask-boilerplate-dashboard-argon) - product page
- **[Flask Template Argon PRO](https://appseed.us/admin-dashboards/flask-dashboard-argon-pro) - more pages, components, LIVE Support**

---

![Flask Template Argon - Dashboard Widgets screen.](https://raw.githubusercontent.com/app-generator/flask-boilerplate-dashboard-argon/master/media/flask-boilerplate-dashboard-argon-screen.png)

--- 

## [Flask Template - Volt](https://appseed.us/admin-dashboards/flask-dashboard-volt)

Volt Admin Dashboard (free version) designed by Themesberg and coded in Flask Framework with SQLite database, SqlAlchemy ORM and authentication.

Volt Dashboard is a free and open source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages and 3 plugins with Vanilla JS. There are more than 100 free Bootstrap 5 components included some of them being buttons, alerts, modals, datepickers and so on.

- [Flask Template Volt](https://appseed.us/admin-dashboards/flask-dashboard-volt) - product page
- **[Flask Template Volt PRO](https://appseed.us/admin-dashboards/flask-dashboard-volt-pro) - more pages, components, LIVE Support**

---

![Flask Template Volt - Open-source Flask starter crafted on top of a modern Bootstrap 5 Template.](https://raw.githubusercontent.com/app-generator/flask-dashboard-volt/master/media/flask-dashboard-volt-screen.png)

--- 

> Thanks for reading! For more resources please access:

- [Getting Started with Python](https://docs.appseed.us/how-to/getting-started-with-python/)
- More [Flask Dashboards](https://appseed.us/admin-dashboards/flask) - provided by AppSeed


---

> Thank you! Btw, my (nick) name is **Sm0ke** and I'm pretty active also on [Twitter](https://twitter.com/Sm0keDev).