Codementor Events

Django Pixel Lite - Open-Source Django seed project

Published Sep 24, 2020Last updated Oct 14, 2021
Django Pixel Lite - Open-Source Django seed project

Hello Coders,

This article presents a free and open-source seed project coded in Django on top of a modern accessibility-first UI Kit - Pixel Lite. The project can be downloaded directly from Github under the MIT License. This starter, based on the permissive license, can be used for hobby, commercial and also might be used as a playground by beginners to learn Django by coding simple features on top of an existing, usable app.


Thank you for reading! The relevant links are below:


Codebase Features

  • UI-Ready app, SQLite Database, Django Native ORM
  • Modular design, best practices codebase
  • Session-Based Authentication, Forms validation
  • Deployment scripts: Docker, Gunicorn/Nginx

Django Pixel Lite - Open-Source Django seed project provided by AppSeed.


Pixel Lite - UI Kit

Pixel is a free, fully responsive, and modern Bootstrap 4 UI Kit that will help you build creative and professional websites. Use our components and sections, switch some Sass variables to build and arrange pages to best suit your needs. The HTML version can be downloaded from the official product page or directly from Github (no difference in terms of source code).

The Kit is provided with a generous number of components and pre-built pages, carefully coded and styled by Themesberg.

A strong asset of this free UI Kit is the accessibility compliance with the latest standards. The product passes the WAVE evaluation tool and Achecker tool.


Django Pixel Lite - Open-Source Django seed project provided by AppSeed


How to compile

The product comes with a basic set of features, database, and deployment scripts for Docker and Gunicorn/Nginx stack, a configuration widely used in production.
The project can be started locally without leaving this page if the workstation has already Python3 installed and the GIT command tool to download the sources from the public repository.
If you are not sure if Python is properly installed, please open a terminal and type python --version. If Python is installed and accessible via the terminal, you should see something that's not an error:

$ # Check Python version
$ python --version
Python 3.7.2 # <--- All good

For more information on how to set up your environment please access the resources listed below:


Compile sources - instructions extracted from the project README file

$ # Get the code
$ git clone https://github.com/app-generator/django-pixel-bootstrap-uikit.git
$ cd django-pixel-bootstrap-uikit
$
$ # Virtualenv set up (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules - SQLite Storage
$ pip3 install -r requirements.txt
$
$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
$
$ # Start the application (development mode)
$ python manage.py runserver # default port 8000
$
$ # Access the web app in browser: http://127.0.0.1:8000/

At this point, we can visit the app in the browser http://127.0.0.1:8000/. By default, the app will redirect guest users to the login page. To access the private pages:

  • Create a new user using the registration page
  • Authenticate using the login page

Django Pixel Lite has a simple. modular codebase that can be extended with ease:

< PROJECT ROOT >
   |
   |-- core/                           # Implements app logic
   |    |-- settings.py                # Django app bootstrapper
   |    |-- static/
   |    |    |-- <css, JS, images>     # CSS files, Javascripts files
   |    |
   |    |-- templates/                 # Templates used to render pages
   |         |-- includes/             # HTML chunks and components
   |         |    |-- navigation.html  # Top menu component
   |         |    |-- sidebar.html     # Sidebar component
   |         |    |-- footer.html      # App Footer
   |         |    |-- scripts.html     # Scripts common to all pages
   |         |
   |         |-- layouts/              # Master pages
   |         |-- accounts/             # Authentication pages
   |         |
   |      index.html                   # The default page
   |     page-404.html                 # Error 404 page
   |     page-500.html                 # Error 404 page
   |       *.html                      # All other HTML pages
   |
   |-- authentication/                 # Handles auth routes 
   |-- app/                            # A simple app that serve HTML files
   |
   |-- requirements.txt                # Development modules - SQLite storage
   |
   |-- .env                            # Inject Configuration via Environment
   |-- manage.py                       # Start the app
   |
   |-- *********************************

App bootstrap flow

  • Django bootstrapper manage.py uses core/settings.py as the main configuration file
  • core/settings.py loads the app magic from .env file
  • Redirect the guest users to Login page
  • Unlock the pages served by app node for authenticated users

Django Pixel Lite - Screens

Once the user is authenticated, the app will unlock the access to pages provided in this modern UI Kit. I'll drop below just a few:

Pixel Lite - Features Page

Django Pixel Lite - User Page.


Pixel Lite - Pre-built Pages

Django Pixel Lite - Pre-built Pages.


Pixel Lite - Login Page

Django Pixel Lite - Login Page.


Django Pixel Lite - Resources


Thank You! In case I've missed something, feel free to ask me anything in the comments section.

Discover and read more posts from Adi Chirilov - Sm0ke
get started