Codementor Events

Flask Template - Pixel Lite UI

Published Aug 17, 2020Last updated Feb 26, 2021
Flask Template - Pixel Lite UI

Hello coders,

This article presents a simple Flask Template coded with a database, ORM, and deployment scripts on top of an accessibility-first UI Kit - Pixel Lite. The project is released on Github, and the permissive license allows usage for unlimited hobby and commercial projects (no footer links required). AppSeed, the platform that provides this open-source Flask Template, offers active support via Github (issues tracker) and Discord - 24/7 LIVE service.


Thanks for reading! Links are below (for fast-runners)


Flask Template - Pixel Lite, animated presentation.


Flask Template - The codebase

This Flask Template starter is provided as a simple, unopinionated codebase with authentication, database, ORM and deployment scripts for Docker, Heroku and Gunicorn/Nginx stack.

To use the stater, Python3 should be installed properly in the workstation. If you are not sure if Python is properly installed, please open a terminal and type python --version. Here is the full-list with dependencies and tools required to build the app:

  • Python3 - the programming language used to code the app
  • GIT - used to clone the source code from the Github repository
  • Basic development tools (g++ compiler, python development libraries ..etc) used by Python to compile the app dependencies in your environment.

What is Flask

Short-note for newcomers - Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja and has become one of the most popular Python web application frameworks.
By using a framework we can reuse modules and features already coded and tested by other developers. Using Flask we can skip over coding from scratch a few modules, common to many web apps:

  • Authentication - we need to know who is using our app
  • ORM - to manipulate the database information with ease
  • Deployment - Flask is well documented when we need to deploy our work in production.
  • Community - using a Framework we can get help from other fellow developers that might face same issues

To read more about Flask, please access below links:


Flask Template - Compile the code

The build instructions, listed in the README file saved on Github, provide enough information to see this simple Flask Template running in the browser. In case any of you have some time to spare, just open a terminal and type:

$ # Clone the sources
$ git clone https://github.com/app-generator/flask-pixel-bootstrap-uikit.git
$ cd flask-pixel-bootstrap-uikit
$
$ # Virtualenv set up
$ virtualenv env
$ source env/bin/activate
$
$ # Install requirements
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$
$ # Run the application
$ flask run
$
$ # Access the app in browser: http://127.0.0.1:5000/

If all goes well, we should see Pixel Lite rendered by our simple Flask starter. Please create a new user using the registration page, and after authenticate. The app is not provisioned with any default users, and is up to you to create a new one.

Flask Template Pixel - Login Page

Flask Template Pixel - Login Page.


Flask Template Pixel - Homepage

Flask Template Pixel - Homepage screen.


Flask Template Pixel - UI Cards

Flask Template Pixel - UI Cards.


Thanks for reading! Feel free to ask me anything in the comments. For more Flask Templates please access the AppSeed platform.

Discover and read more posts from Adi Chirilov - Sm0ke
get started
post commentsBe the first to share your opinion
Show more replies