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:
- Django Pixel Lite - product page
- Django Pixel Lite - LIVE Demo
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
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.
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:
- How to set up Python
- Setup CentOS for development
- Setup Ubuntu for development
- Setup Windows for development
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
usescore/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
Pixel Lite - Pre-built Pages
Pixel Lite - Login Page
Django Pixel Lite - Resources
- More Open-source Starters - a curated index
- Ask for support via Discord and eMail - provided by AppSeed
Thank You! In case I've missed something, feel free to ask me anything in the comments section.