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
usescore/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 crafted in Django, Flask, and
React
- 👉 More Flask Apps - free & PAID
Latest comments (6)
Looking great! 😁
I personally feel attacked when I look at a Neumorphism design.. i love it tho
Saw the UI for the first time and petty impressed
What are we missing in the Flask one?
Hello Prakash,
Thanks for reading. I've put some wrong links in the article? Just double-check the whole article.
Oh. Ok . I guess it was from my part.