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