Soft UI Design System is a Premium Bootstrap 5 UI Kit designed by Creative-Tim designed for those who like bold elements and beautiful websites. Soft UI Design System Flask is a simple Flask starter provided by AppSeed with a modular codebase, database, authentication, and deployment scripts - Features:
Up-to-date dependencies- SCSS compilation via Gulp
- UI Kit: Soft UI Design System (Free Version) by Creative-Tim
DB Tools: SQLite database, Flask-SQLAlchemy ORM- Session-Based auth flow (login, register)
Deployment: Docker, Gunicorn / Nginx, Heroku- Support via Github (issues tracker) and Discord.
Links
- 👉 Soft UI Design Flask - Product page
- 👉 Soft UI Design Flask - LIVE Demo
- 👉 More Flask Apps - provided by AppSeed
Get the code
$ git clone https://github.com/app-generator/flask-soft-ui-design.git $ cd flask-soft-ui-designStart the app in Docker
$ docker-compose up --build Visit http://localhost:85 in your browser. The app should be up & running.
$ # Clone the sources $ git clone https://github.com/app-generator/flask-soft-ui-design.git $ cd flask-soft-ui-design $ $ # Virtualenv modules installation (Unix based systems) $ virtualenv env $ source env/bin/activate $ $ # Virtualenv modules installation (Windows based systems) $ # virtualenv env $ # .\env\Scripts\activate $ $ # Install requirements $ pip3 install -r requirements.txt $ $ # Set the FLASK_APP environment variable $ (Unix/Mac) export FLASK_APP=run.py $ (Windows) set FLASK_APP=run.py $ (Powershell) $env:FLASK_APP = ".\run.py" $ $ # Set up the DEBUG environment $ # (Unix/Mac) export FLASK_ENV=development $ # (Windows) set FLASK_ENV=development $ # (Powershell) $env:FLASK_ENV = "development" $ $ # Run the application $ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1) $ # --port=5000 - specify the app port (default 5000) $ flask run --host=0.0.0.0 --port=5000 $ $ # Access the app in browser: http://127.0.0.1:5000/Note: To use the app, please access the registration page and create a new user. After authentication, the app will unlock the private pages.
The project has a super simple structure, represented as bellow:
< PROJECT ROOT > | |-- app/ | |-- static/ | | |-- <css, JS, images> # CSS files, Javascripts files | | | |-- templates/ | | | | | |-- includes/ # Page chunks, components | | | | | | | |-- navigation.html # Top bar | | | |-- sidebar.html # Left sidebar | | | |-- scripts.html # JS scripts common to all pages | | | |-- footer.html # The common footer | | | | | |-- layouts/ # App Layouts (the master pages) | | | | | | | |-- base.html # Used by common pages like index, UI | | | |-- base-fullscreen.html # Used by auth pages (login, register) | | | | | |-- accounts/ # Auth Pages (login, register) | | | | | | | |-- login.html # Use layout `base-fullscreen.html` | | | |-- register.html # Use layout `base-fullscreen.html` | | | | | |-- home/ # UI Kit Pages | | |-- index.html # Index page | | |-- 404-page.html # 404 page | | |-- *.html # All other pages | | | config.py # Provides APP Configuration | forms.py # Defines Forms (login, register) | models.py # Defines app models | views.py # Application Routes | |-- Dockerfile # Deployment |-- docker-compose.yml # Deployment |-- gunicorn-cfg.py # Deployment |-- nginx # Deployment | |-- appseed-app.conf # Deployment | |-- requirements.txt |-- run.py | |-- ************************************************************************To recompile SCSS files, follow this setup:
Step #1 - Install tools
Step #2 - Change the working directory to assets folder
$ cd app/static/assetsStep #3 - Install modules (this will create a classic node_modules directory)
$ npm install // OR $ yarnStep #4 - Edit & Recompile SCSS files
$ gulp scssThe generated file is saved in static/assets/css directory.
The app is provided with a basic configuration to be executed in Docker, Heroku, Gunicorn, and Waitress.
Steps to deploy on Heroku
- Create a FREE account on Heroku platform
- Install the Heroku CLI that match your OS: Mac, Unix or Windows
- Open a terminal window and authenticate via
heroku logincommand - Clone the sources and push the project for LIVE deployment
$ # Clone the source code: $ git clone https://github.com/app-generator/flask-soft-ui-design.git $ cd flask-soft-ui-design $ $ # Check Heroku CLI is installed $ heroku -v heroku/7.25.0 win32-x64 node-v12.13.0 # <-- All good $ $ # Check Heroku CLI is installed $ heroku login $ # this commaond will open a browser window - click the login button (in browser) $ $ # Create the Heroku project $ heroku create $ $ # Trigger the LIVE deploy $ git push heroku master $ $ # Open the LIVE app in browser $ heroku openGunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX.
Install using pip
$ pip install gunicornStart the app using gunicorn binary
$ gunicorn --bind 0.0.0.0:8001 run:app Serving on http://localhost:8001Visit http://localhost:8001 in your browser. The app should be up & running.
Waitress (Gunicorn equivalent for Windows) is meant to be a production-quality pure-Python WSGI server with very acceptable performance. It has no dependencies except ones that live in the Python standard library.
Install using pip
$ pip install waitressStart the app using waitress-serve
$ waitress-serve --port=8001 run:app Serving on http://localhost:8001Visit http://localhost:8001 in your browser. The app should be up & running.
✨ Soft UI Design System - UI Kit
Most complex and innovative Design System Made by Creative Tim. Soft UI Design System is built with over 70 frontend individual elements, like buttons, inputs, navbars, navtabs, cards or alerts, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using SASS files and classes.
You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. This Free Bootstrap 5 UK Kit is coming with prebuilt design blocks, so the development process is seamless, switching from our pages to the real website is very easy to be done.
- Flask Framework - The official website
- Boilerplate Code - Index provided by AppSeed
- Boilerplate Code - Index published on Github
Soft UI Design Flask - Provided by AppSeed App Generator.