Soft UI Design System - Flask Bootstrap 5 Template
Tags: webdev, flask, bootstrap5, appseed
Published: 2021-03-08 14:03:22

---
title: Soft UI Design System - Flask Bootstrap 5 Template
published: true
description: Soft UI Design System, a modern open-source Bootstrap 5 design, now available for download as a simple Flask/Jinja starter
tags: webdev, flask, bootstrap5, appseed
canonical_url: https://blog.appseed.us/soft-ui-design-system-jinja-template/
cover_image: https://raw.githubusercontent.com/app-generator/jinja-soft-ui-free/master/media/jinja-soft-ui-free-screen-contact.png
---
Hello Coders,

This article presents a simple Flask starter built on top of **[Soft UI Design System](https://appseed.us/ui-kit/soft-ui-design-system)**, an open-source **Bootstrap 5 UI Kit**. The project might help beginners to code faster a commercial by adding new features on top of a "development-ready" starter. Soft UI Design System comes with a rich UI kit and pre-built pages: about us, contact, user profile. 

--- 

> Thanks for Reading! TL;DR;

- [Flask Soft UI System](https://appseed.us/product/flask-soft-ui-design-system) - product page
- **[Flask Soft UI PRO](https://appseed.us/product/flask-soft-ui-pro) - more pages, LIVE Support**

---

![Soft UI Design System - Open-source Bootstrap 5 UI Kit, animated presentation.](https://raw.githubusercontent.com/app-generator/soft-ui-design-system/main/media/soft-ui-system-free-intro.gif)

---

**Soft UI Design System** is built on top of Bootstrap 5 with over 70 frontend individual elements, like buttons, inputs, navbars, navtabs, cards or alerts, giving you the freedom of choosing and combining. All components can take variations in color, that you can easily modify using SASS files and classes.

This modern UI Kit, presented on the official page as the "Most complex and innovative Design System Made by Creative Tim",  has been released under the MIT License, a permissive license that allows unlimited copies (support not included).

---

> *Soft UI Design System* - UI Cards

---

![Soft UI Design System - UI Cards.](https://raw.githubusercontent.com/app-generator/jinja-soft-ui-free/master/media/jinja-soft-ui-free-screen-cards.png)

---

The Design comes with a few sample pages like [About Us](https://jinja-soft-ui-free.appseed-srv1.com/page-about-us.html), [Contact](https://jinja-soft-ui-free.appseed-srv1.com/page-contact-us.html) and a nice User profile plus utility pages: [login](https://jinja-soft-ui-free.appseed-srv1.com/page-sign-in.html), register, 404 Error page. 

---

> *Soft UI Design System* - Colorful Buttons

---

![Soft UI Design System - Colorful Buttons.](https://raw.githubusercontent.com/app-generator/jinja-soft-ui-free/master/media/jinja-soft-ui-free-screen-buttons.png)

---

## Flask Codebase

The Python code is a simple Flask project with a simple routing, no database, or other dependencies. The goal of this starter is to help programmers code faster a Flask/Django project by reusing the "development-ready" design for a new project or enhance the UI of a legacy project. To compile the project Python3 should be properly installed and accessible via the terminal. To see this Flask project running locally, please follow up this simple set up:

---

**1# - Clone the sources**

```bash
$ # Clone the sources
$ git clone https://github.com/app-generator/flask-soft-ui-free.git
$ cd flask-soft-ui-free
```

---

**2# - Install dependencies**

```bash
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install requirements
$ pip3 install -r requirements.txt
```

---

**3# - Set up environment and start the project**

```bash
$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ # Run the Template
$ flask run
$
$ # Access the UI in browser: http://127.0.0.1:5000/
``` 

Once the project is compiled successfully, we should see the [presentation](https://jinja-soft-ui-free.appseed-srv1.com/presentation.html) page running in the browser:

---

![Soft UI Design System - Sample Pages.](https://raw.githubusercontent.com/app-generator/jinja-soft-ui-free/master/media/jinja-soft-ui-free-screen-sample-pages.png)

--- 

> *Soft UI Design System* - Sign IN Page

---

![Soft UI Design System - Sign IN Page.](https://raw.githubusercontent.com/app-generator/jinja-soft-ui-free/master/media/jinja-soft-ui-free-screen-login.png)

---

> Thanks for Reading! For more resources, please access:

---

- [Soft UI Design System](http://bit.ly/3v6JYIe) - HTML Version (free)
- More starters styled with [Soft UI Design System](https://appseed.us/ui-kit/soft-ui-design-system)