DEV Community

Cover image for Neumorphism UI - Coded in two Python flavors: Flask and Django
Sm0ke
Sm0ke

Posted on • Updated on

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:


Neumorphism UI - Hero Section

Neumorphism UI - Flask version, Hero Section.


Neumorphism UI - Call to action component

Neumorphism UI - Flask version, Call to action sample component.


Neumorphism UI - Contact with Map Control

Neumorphism UI - Flask version, 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:


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

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.

Neumorphism UI - Flask version, the registration page.


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

Neumorphism UI - Django version, sample pages.


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
   |
   |-- ************************************************************************
Enter fullscreen mode Exit fullscreen mode

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:

Top comments (6)

Collapse
 
webdev_chen profile image
Uchena Miller

I personally feel attacked when I look at a Neumorphism design.. i love it tho

Collapse
 
gauthamp10 profile image
Gautham Prakash

What are we missing in the Flask one?

Collapse
 
sm0ke profile image
Sm0ke

Hello Prakash,
Thanks for reading. I've put some wrong links in the article? Just double-check the whole article.

Collapse
 
gauthamp10 profile image
Gautham Prakash

Oh. Ok . I guess it was from my part.

Collapse
 
muhimen123 profile image
Muhimen

Saw the UI for the first time and petty impressed

Collapse
 
zoltanszogyenyi profile image
Zoltán Szőgyényi

Looking great! 😁