django-static-base

GitHub

Test

Check Demo Project

• Check the demo repo on GitHub

Requirements

• Python 3.9+ supported.
• Django 4.2+ supported.

Setup

1. Install from pip:

   pip install django-static-base
   

2. Add 'static_base' to your INSTALLED_APPS setting.

   INSTALLED_APPS = [
       # ...other apps
       "static_base"
   ]
   

3. Add the following pre-requisites to your base.html template

   <html>
   <head>
   ...
     <link rel="stylesheet" type="text/css" href="{% static 'base/css/bootstrap.css' %}">
   ...
   </head>
   <body>
   ...
     <script type="text/javascript" src="{% static 'base/js/jquery.min.js' %}"></script>
     <script type="text/javascript" src="{% static 'base/js/bootstrap.min.js' %}"></script>
     <script type="text/javascript" src="{% static 'base/js/plugins/lazysizes.min.js' %}" async></script>
   ...
     <script type="module" src="{% static 'base/js/plugins/instantpage.min.js' %}" defer></script>
   </body>
   </html>
   

4. Add all your needed plugins or customization to your base.html template or sub-templates used by your project

   <html>
   <head>
   ...
     <link rel="stylesheet" type="text/css" href="{% static 'base/css/plugins/jquery.smartmenus.bootstrap-4.css' %}">
   ...
     <link rel="stylesheet" type="text/css" href="{% static 'base/css/style-btn.css' %}">
     <link rel="stylesheet" type="text/css" href="{% static 'base/css/color/blue.css' %}">
   ...
     <link rel="stylesheet" type="text/css" href="{% static 'base/css/custom.css' %}">
   ...
   </head>
   <body>
   ...
     <script type="text/javascript" src="{% static 'base/js/jquery.min.js' %}"></script>
     <script type="text/javascript" src="{% static 'base/js/bootstrap.min.js' %}"></script>
   ...
     <script type="module" src="{% static 'base/js/plugins/instantpage.min.js' %}" defer></script>
   </body>
   </html>
   

5. Optional — Material Dashboard (Creative Tim v1.1.1). Same layout as Bootstrap: theme under base/css + base/js; helpers under base/js/plugins/.

   <link rel="stylesheet" href="{% static 'base/css/bootstrap.min.css' %}">
   <link rel="stylesheet" href="{% static 'base/css/material-dashboard.css' %}">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
   <script src="{% static 'base/js/jquery.min.js' %}"></script>
   <script src="{% static 'base/js/bootstrap.min.js' %}"></script>
   <script src="{% static 'base/js/material.min.js' %}"></script>
   <script src="{% static 'base/js/plugins/chartist.min.js' %}"></script>
   <script src="{% static 'base/js/plugins/bootstrap-notify.js' %}"></script>
   <script src="{% static 'base/js/material-dashboard.js' %}"></script>
   

Run Example Project

git clone --depth=50 --branch=django-static-base https://github.com/DLRSP/example.git DLRSP/example
cd DLRSP/example
python manage.py runserver

Now browser the app @ http://127.0.0.1:8000