loading...
Cover image for Flask Pixel UI-Kit - Accessibility First open-source Flask starter

Flask Pixel UI-Kit - Accessibility First open-source Flask starter

sm0ke profile image Sm0ke ・4 min read

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.

In a rush? Here are the links:

Flask Pixel UI Kit - Open-Source web app coded in Flask on top of Pixel UI kit .


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.

Flask Pixel UI Kit - Index page.

Pixel UI Kit - Some beautiful Cards

Flask Pixel UI Kit - Some beautiful Cards.

Pixel UI Kit - Pricing Cards

Pixel 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.

Pixel UI Kit - Product Thumbnail.


Links & Resources


Thank you! Let me know your thoughts in the comments.

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

markdown guide