Hello Coders,
This article presents a simple Flask starter built on top of Pixel UI Kit - a free & open-source design system compliant with the latest UI design accessibility standards. The UI Kit passes with a green light some well-known evaluation tools like WAVE checker and Achecker - please click the links to see the reports.
Thanks for reading! - Content provided by App Generator.
- ✨ Flask Pixel UI Kit - product page
- ✨ Flask Pixel UI Kit - LIVE Demo
✨ What's in the BOX
The web app is coded with a super simple code-base enhanced with authentication, SQLite database, SQLAlchemy ORM to manipulate the database with ease and a super clean and nice UI.
To build the app, we need a basic tool-chain installed:
- Python3 - the programming language used to code the app
- Git - used to clone the source code from the Github repository. Using GIT is optional, we can download the sources in a ZIP archive from the public repository.
✨ Build from sources
In case you like the design and decide to build the app, a few commands typed in the terminal is enough to see this beautiful app running in the browser:
Clone the source code from Github
$ git clone https://github.com/app-generator/flask-pixel-bootstrap-uikit.git
$ cd flask-pixel-bootstrap-uikit
Install dependencies using a Virtual Environment
$ # 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 up the env and start the app
$ # 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"
$ 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.
Pixel UI Kit - Some beautiful Cards
Pixel UI Kit - Pricing Cards
✨ The Code-Base structure
The Flask code-base is quite simple (no blueprints), coded like this intentionally for beginners. The app can be easily extended with other useful features.
< PROJECT ROOT >
|
|--- app/__init__.py
|--- app/
| | --- <static/assets>
| | |
| | |--- <css>
| | |--- <Js>
| | |--- <img>
| |
| | --- <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`
| | |
| | index.html # The default page
| | page-404.html # Error 404 page (page not found)
| | page-500.html # Error 500 page (server error)
| | *.html # All other pages provided by the UI Kit
|
|--- requirements.txt
|
|--- run.py
|
|-----------------------------
✨ Pixel UI - a few words about it
Pixel is a free, fully responsive extension of the famous Bootstrap CSS Framework featuring pricing cards, profile cards, timelines, and other basic components. All components are created to comply as much as possible with the WCAG 2.1 standards - the full-list with components is accessible here.
Links & Resources
- Flask - the magic framework
- Flask Apps - Index with web apps coded in Flask
Thank you! Let me know your thoughts in the comments.
Top comments (2)
Great post!
Thank you :)