A simple example of Django and CSS

Question

I'm new to Django, and am trying to set up a really simple Django app.

Now, I'm up to chapter 5 in the Django online book : http://www.djangobook.com/en/2.0/chapter05/

All I want to do now, before I start trying databases, is to add in some simple CS and J to the app as is.

So the question is, how do I do this? I only have one app, and I only want a main.css in a css folder, and a main.js in a js folder.

I checked out the https://docs.djangoproject.com/en/1.3/howto/static-files/#staticfiles-in-templates page, but after reading and reading, there didn't seem to be a whole lot to work with in terms of examples.

How do I import the stylesheets/css (is there a helper like CakePHP?), where do I put the CSS and JS files, and do I need to configure the static thingy?

UPDATE: the link : Render CSS in Django does not help much. Mainly in that it didn't work for me, but also I especially don't like the "if debug" part. What happens when I move to prod? Why would I have my media folder defined differently for prod and local dev anyway? Shouldn't it be relative, or even in the same spot?

Answer 1

If you follow django's guidelines, you can simplify your life greatly.

In your sample code, inside your application directory, create a folder called static. Inside this folder, place your css files.

Example:

$ django-admin.py startproject myproject $ cd myproject myproject$ python manage.py startapp myapp myproject$ mkdir myapp/static myproject$ cd myapp/static myproject/myapp/static$ nano style.css 

In your templates:

<link rel="stylesheet" href="{{ STATIC_URL }}style.css" />

Make sure you add myapp to the INSTALLED_APPS list in settings.py. Now when you use the built-in development server, your style sheet will be rendered correctly.

Django searches for a static directory inside installed applications by default, and with current versions of django, static files are enabled by default.

---

The Django example has the path my_app/static/my_app/myimage.jpg which is a little confusing if your app and project have the same name.

This is recommended because when you run collectstatic to gather all your static files, files with the same name will be overwritten. If you have a file called myimage.jpg in another application, it will be overwritten. Giving the application name inside the static directory will prevent this, because the exact directory structure will be replicated inside your STATIC_ROOT directory.

A simple example to illustrate the point. If you have a django project with two apps, like this:

. ├── assets ├── manage.py ├── myapp │   ├── __init__.py │   ├── models.py │   ├── static │   │   └── myapp │   │       └── test.txt │   ├── tests.py │   └── views.py ├── myproj │   ├── __init__.py │   ├── __init__.pyc │   ├── settings.py │   ├── settings.pyc │   ├── urls.py │   └── wsgi.py └── otherapp     ├── __init__.py     ├── models.py     ├── static     │   └── otherapp     │       └── test.txt     ├── tests.py     └── views.py 

assets is your STATIC_ROOT. Now when you run collectstatic:

. ├── assets │   ├── myapp │   │   └── test.txt │   └── otherapp │       └── test.txt ├── manage.py ├── myapp │   ├── __init__.py │   ├── __init__.pyc │   ├── models.py │   ├── static │   │   └── myapp │   │       └── test.txt │   ├── tests.py │   └── views.py ├── myproj │   ├── __init__.py │   ├── __init__.pyc │   ├── settings.py │   ├── settings.pyc │   ├── urls.py │   └── wsgi.py └── otherapp     ├── __init__.py     ├── __init__.pyc     ├── models.py     ├── static     │   └── otherapp     │       └── test.txt     ├── tests.py     └── views.py 

You see it is creating the directories as well. In your templates you would now refer to each file with its "namespace" of the app: {{ STATIC_URL }}/myapp/test.txt