Flask Pixel UI-Kit - Accessibility First open-source Flask starter
Tags: flask, a11y, opensource, appseed
Published: 2020-05-08 15:19:33

---
title: Flask Pixel UI-Kit - Accessibility First open-source Flask starter
published: true
description: A simple Flask starter coded on top of Pixel UI Kit - a free accessibility-first design system
cover_image: https://raw.githubusercontent.com/app-generator/flask-pixel-bootstrap-uikit/master/media/flask-pixel-bootstrap-uikit-screen.png
tags: flask, accessibility, opensource, appseed
---
Hello Coders, 

This article presents a simple **Flask** starter built on top of **[Pixel UI Kit](https://appseed.us/apps/flask-apps/flask-pixel-bootstrap-uikit)** - 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](https://appseed.us/)**.

---

- ✨ [Flask Pixel UI Kit](https://appseed.us/apps/flask-apps/flask-pixel-bootstrap-uikit) - product page 
- ✨ [Flask Pixel UI Kit](https://flask-pixel-lite.appseed-srv1.com/) - LIVE Demo

--- 

![Flask Pixel UI Kit - Open-Source web app coded in Flask on top of Pixel UI kit.](https://raw.githubusercontent.com/app-generator/flask-pixel-bootstrap-uikit/master/media/flask-pixel-bootstrap-uikit-screen.png)

--- 

## ✨ 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](https://github.com/app-generator/flask-pixel-bootstrap-uikit).

---

## ✨ Build from [sources](https://github.com/app-generator/flask-pixel-bootstrap-uikit)

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

```bash
$ git clone https://github.com/app-generator/flask-pixel-bootstrap-uikit.git
$ cd flask-pixel-bootstrap-uikit
```  

> Install dependencies using a Virtual Environment

```bash
$ # 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

```bash
$ # 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.](https://raw.githubusercontent.com/app-generator/flask-pixel-bootstrap-uikit/master/media/flask-pixel-bootstrap-uikit-screen-2.png)

> Pixel UI Kit - Some beautiful Cards

![Flask Pixel UI Kit - Some beautiful Cards.](https://raw.githubusercontent.com/app-generator/flask-pixel-bootstrap-uikit/master/media/flask-pixel-bootstrap-uikit-screen-5.png)

> Pixel UI Kit - Pricing Cards

![Pixel Pixel UI Kit - Pricing Cards.](https://raw.githubusercontent.com/app-generator/flask-pixel-bootstrap-uikit/master/media/flask-pixel-bootstrap-uikit-screen-4.png)

--- 

## ✨ 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. 

```bash
< 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](https://themesberg.com/product/ui-kits/pixel-lite-free-bootstrap-4-ui-kit) - 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](https://demo.themesberg.com/pixel-lite/html/components/all.html).

![Pixel UI Kit - Product Thumbnail.](https://raw.githubusercontent.com/app-generator/static/master/blog/pixel-ui-kit-free-thumbnail.jpg)
    
--- 

### Links & Resources

- [Flask](https://www.palletsprojects.com/p/flask/) - the magic framework
- [Flask Apps](https://appseed.us/apps/flask-apps/) - Index with web apps coded in Flask

--- 

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