Neumorphism UI - Coded in two Python flavors: Flask and Django

Hello Coders,

This article presents two open-source web apps coded on top of Neumorphism UI Kit (Free version) in Flask and Django, two popular and widely used web frameworks.

Thanks for reading! - Content provided by App Generator.

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 - product page
✨ Django Neumorphism UI Kit - product page

Neumorphism UI - Hero Section

Neumorphism UI - Call to action component

Neumorphism UI - Contact with Map Control

✨ Neumorphism design

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

Some links:

Neumorphism the right way - published on Medium
Neumorphism in User interface design - Tutorial

✨ Flask Neumorphism UI

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 - the product page
Flask Neumorphism UI - LIVE demo
Flask Neumorphism UI - 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 file.

✨ Django Neumorphism UI Kit

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 - the source code
Django Neumorphism UI Kit - LIVE demo

Code-base structure

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

< 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