Static-assetsAfter you have got a new Django app and have already taken the very first steps, you would like to see something spectacular. Do you like colors and design? All of these things are based on static files like CSS, JavaScript, and images. In this section, I will explain the basic role of static files inside a Django project, but I will also show you what Bootstrap is and how to start dealing with responsive screen settings.
Static folder
Open your command-line interface or shell!
$ cd /your-project-dir/
$ mkdir static
$ cd static
$ mkdir css
$ mkdir js
$ mkdir images
$ cd ..
$ mkdir templates
Add these lines to the settings file!
config/settings.py
CSS
Create base.css
static/css/base.css
JavaScript
Create base.js
static/js/base.js
HTML (templates)
Create base.html
The base.html is a kind of frame in your application. According to this, you should call the 'extends base.html' template on the top of your html files.
In order to display custom CSS adjustments and JS functions, you should call 'load static' template in base.html!
templates/base.html
Create home.html
templates/home.html
Add these lines to the views file!
config/views.py
Bootstrap
Setting up bootstrap - Bootstrap
Adding bootstrap5, font-awesome and a very basic nav-bar to base.html.
With font-awesome you can use icons on your website e.g. this home-icon: or this: already used in this website.
templates/base.html
templates/home.html
In the h1 class below means display is flex, justify the content to center with padding value=5 and text-color=green (success).
Open your web browser and check on localhost (http:\\127.0.0.0.1:8000)
Let's see the results of our Bootstrap styling!
Responsive web design
I am showing here the basics of three tools about responsive web design. Viewport setting, Bootstrap's grid system and CSS Media query.
1. Viewport
Adding viewport to <head> in base.html!
templates/base.html
2. Bootstrap's grid system
You can optimize the screen size with Bootstrap as well. For this purpose see Bootstrap grid options: https://getbootstrap.com/docs/...
3. CSS Media Query
Using Media query is simple. You should add something like this to your CSS file!