Neumorphism UI - Coded in two Python flavors: Flask and Django
Published: 2020-06-07 10:06:10

---
title: Neumorphism UI - Coded in two Python flavors: Flask and Django
published: true
description: Neumorphism UI Kit designed by Themesberg coded in two Python flavors: Flask and Django
tags: 
cover_image: https://raw.githubusercontent.com/app-generator/flask-neumorphism-uikit/master/media/flask-neumorphism-uikit-screen.png
---
Hello Coders, 

This article presents two open-source web apps coded on top of **[Neumorphism UI Kit](https://appseed.us/apps/flask-apps/flask-neumorphism-uikit)** (Free version) in Flask and Django, two popular and widely used web frameworks. 

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

Both apps are released under the MIT license on Github. For those in a rush, I'll drop below the relevant links: 

- ✨ [Flask Neumorphism UI Kit](https://appseed.us/apps/flask-apps/flask-neumorphism-uikit) - product page
- ✨ [Django Neumorphism UI Kit](https://django-neumorphism-uikit.appseed.us/) - product page

---

> **Neumorphism UI** - Hero Section

![Neumorphism UI - Flask version, Hero Section.](https://raw.githubusercontent.com/app-generator/flask-neumorphism-uikit/master/media/flask-neumorphism-uikit-screen-1.png)

---

> **Neumorphism UI** - Call to action component

![Neumorphism UI - Flask version, Call to action sample component.](https://raw.githubusercontent.com/app-generator/flask-neumorphism-uikit/master/media/flask-neumorphism-uikit-screen-2.png)

---

> **Neumorphism UI** - Contact with Map Control

![Neumorphism UI - Flask version, Contact with Map Control.](https://raw.githubusercontent.com/app-generator/flask-neumorphism-uikit/master/media/flask-neumorphism-uikit-screen-4.png)

--- 

## ✨ [Neumorphism design](https://themesberg.com/product/ui-kits/neumorphism-ui-kit-bootstrap)

The neumorphic effect is a combination of the current famous flat UI and the old skeuomorphic (aka Old Apple Style) principles! The components have a dark box-shadow on the bottom and a light box-shadow on top; the combination of both creates the effect of the elements pushing themselves through your display - *Definition credit: [Design trends: Neumorphic design](https://medium.com/@s.jagoori/design-trends-neumorphism-59a9ba9d9284)* 

> Some links:

- [Neumorphism the right way](https://medium.com/@artofofiare/neumorphism-the-right-way-a-2020-design-trend-386e6a09040a) - published on Medium
- [Neumorphism in User interface design - Tutorial](https://uxplanet.org/neumorphism-in-user-interface-tutorial-c353698ac5c0)

--- 

## ✨ [Flask Neumorphism UI](https://appseed.us/apps/flask-apps/flask-neumorphism-uikit)

The app is coded using a super simple code-base that uses **Blueprints** and **app-factory** pattern. The MIT license allow unlimited copies and released as hobby or commercial projects. Need to remove the footer credit? No worries, you can add your links. 

> App Links

- [Flask Neumorphism UI](https://appseed.us/apps/flask-apps/flask-neumorphism-uikit) - the product page
- [Flask Neumorphism UI](https://flask-neumorphism-uikit.appseed.us/) - LIVE demo
- [Flask Neumorphism UI](https://github.com/app-generator/flask-neumorphism-uikit) - the source code

The app can be easily built if your workstation has a Python3 and GIT command tool installed. To see this Flask starter running in your browser, just follow the instructions saved in the [README](https://github.com/app-generator/flask-neumorphism-uikit/blob/master/README.md) file.

![Neumorphism UI - Flask version, the registration page.](https://raw.githubusercontent.com/app-generator/flask-neumorphism-uikit/master/media/flask-neumorphism-uikit-screen-register.png)

---

## ✨ [Django Neumorphism UI Kit](https://github.com/app-generator/django-neumorphism-uikit)

The Django version uses the same super simple code-base, enhanced with authentication, DB Tools and deploy scripts for Docker and Nginx/Gunicorn stack. 

> App Links

- [Django Neumorphism UI Kit](https://github.com/app-generator/django-neumorphism-uikit) - the source code
- [Django Neumorphism UI Kit](https://django-neumorphism-uikit.appseed.us/) - LIVE demo

![Neumorphism UI - Django version, sample pages.](https://raw.githubusercontent.com/app-generator/django-neumorphism-uikit/master/media/django-neumorphism-uikit-screen.png)

---

### Code-base structure

The project is coded using a simple and intuitive structure presented bellow: 

```bash
< PROJECT ROOT >
   |
   |-- core/                               # Implements app logic and serve the static assets
   |    |-- settings.py                    # Django app bootstrapper
   |    |-- wsgi.py                        # Start the app in production
   |    |-- urls.py                        # Define URLs served by all apps/nodes
   |    |
   |    |-- static/
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
   |    |
   |    |-- templates/                     # Templates used to render pages
   |         |
   |         |-- includes/                 # HTML chunks and components
   |         |    |-- navigation.html      # Top menu component
   |         |    |-- sidebar.html         # Sidebar component
   |         |    |-- footer.html          # App Footer
   |         |    |-- scripts.html         # Scripts common to all pages
   |         |
   |         |-- layouts/                  # Master pages
   |         |    |-- base-fullscreen.html # Used by Authentication pages
   |         |    |-- base.html            # Used by common pages
   |         |
   |         |-- accounts/                 # Authentication pages
   |         |    |-- login.html           # Login page
   |         |    |-- register.html        # Register page
   |         |
   |      index.html                       # The default page
   |     page-404.html                     # Error 404 page
   |     page-500.html                     # Error 404 page
   |       *.html                          # All other HTML pages
   |
   |-- authentication/                     # Handles auth routes (login and register)
   |    |
   |    |-- urls.py                        # Define authentication routes  
   |    |-- views.py                       # Handles login and registration  
   |    |-- forms.py                       # Define auth forms  
   |
   |-- app/                                # A simple app that serve HTML files
   |    |
   |    |-- views.py                       # Serve HTML pages for authenticated users
   |    |-- urls.py                        # Define some super simple routes  
   |
   |-- requirements.txt                    # Development modules - SQLite storage
   |
   |-- .env                                # Inject Configuration via Environment
   |-- manage.py                           # Start the app - Django default start script
   |
   |-- ************************************************************************
```

---

> The bootstrap flow

- Django bootstrapper `manage.py` uses `core/settings.py` as the main configuration file
- `core/settings.py` loads the app magic from `.env` file
- Redirect the guest users to Login page
- Unlock the pages served by *app* node for authenticated users

--- 

> **Thanks for reading!** For more resources, feel free to access:

- 👉 More [Flask Dashboards](https://appseed.us/admin-dashboards/flask/) crafted in Django, Flask, and `React`
- 👉 More [Flask Apps](https://appseed.us/apps/flask/) - free & PAID