Responsive Web Design in Django (Without JavaScript!)

Written by Jordan H.

The Case for Non-JS Responsive Web Design

I would argue JavaScript is becoming more common with which to build websites, but seems as though it’s already ruled the web as the #1 framework. As an avid NoScript user, 90% of the web is broken because most websites are designed to require JavaScript to load content.

Many web devs have come out declaring how bad javascript is with many claiming it’s ruining the web. I’m not here to join the JavaScript bashing party. Instead, I’d like to show you how to incorporate repsonsive web design in your Django site without the need for JavaScript.


Choosing a CSS-Only Design Framwork

There aren’t a lot, but a few exist

I’m sure there are more if you poke around the web. I had planned on referring back to a StackOverflow question, but it was removed. There’s a similar one if you’re desperate for StackOverflow.

So, now that you’ve chosen a framwork, you’re set to go!

Not so fast, buddy! There’s a problem.

The Small Issue

Notice a lot of these repsonsive frameworks are written using SASS or LESS, a derivative of CSS and primarily compiled with Node.JS. By default Django does not have a SASS compiler.

But all is not lost!

Someone on Github was kind enough to provide a sass processor for Django.

Using Django-Sass-Processor With Spectre

For the lazy (I’m one of them, too), I provided an example on my GitHub.

While most CSS framworks will be similar in setup, I’ll be using Spectre as the example CSS framework.

Use your preferred method to get a Django project set up. Or you can use one you already have set up. The only directory we’ll touch is static, and we’ll only be modifying some of the templates.

We’ll also want to install the django-sass-processor package. Install it any way you want (I prefer pip):

$ pip install django-sass-processor libsass django-compressor

For the sake of simplicity, here is the initial directory structure:

SassExample/
├── manage.py
└── SassExample
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

1 directory, 5 files

Download the latest release of the Spectre source code (or whatever framwork you’re using). The Spectre installation instructions are a bit confusing as they provide a lot of options, but for our purposes the source code is what we want.

Create a directory static/spectre under your project root (or under your app root if you prefer to have the framwork modular). Extract the Spectre source code into the static/spectre directory (that way we’ll keep it seperate from other static files).

**IMPORTANT:** Only copy the `src` directory of Spectre.
So you’ll eseentially extract `.tar.gz/src` to `Project/Project/static/` and rename it to `spectre`.

Our directory structure is now (shortened for brevity):

SassExample
├── manage.py
└── SassExample
    ├── __init__.py
    ├── settings.py
    ├── static
    │   └── spectre
    │       ├── _accordions.scss
        ...
    │       ├── icons
    │       │   ├── _icons-action.scss
            ...
    │       ├── mixins
    │       │   ├── _avatar.scss
            ...
    │       │   └── _transition.scss
    │       ├── _mixins.scss
            ...
    │       ├── _typography.scss
    │       ├── utilities
            ...
    │       │   └── _text.scss
    │       ├── _utilities.scss
    │       └── _variables.scss
    ├── urls.py
    └── wsgi.py

6 directories, 78 files

Building off the Framwork’s SASS File

Now we’re ready to include our own SASS file.

If you’re including this in an already-existing project you’re basically done for anything new you need to include. Of course, your entry CSS file will need to be converted to a SASS file (or you need to create a new one)

If this is a new project, we need to include a few more things:

  1. An entry point SASS file
  2. A basic view to show our beautiful site! 🌹

Like I stated, if you have an existing project most of this is created.

However, (and this is important) make sure to include the entry point css file in the directory static/spectre/. You’ll see why later.

In the example code I’ve provided something quick and dirty. I didn’t extend from a base template or do anything fancy.

So now the directory structure should look something like this:

SassExample/
├── manage.py
└── SassExample
    ├── __init__.py
    ├── settings.py
    ├── static
    │   └── spectre
    │   │   └── sassexample.scss
        ...
    ├── templates
    │   └── index.html
    ├── urls.py
    └── wsgi.py

8 directories, 80 files

As per the directions on django-sass-processor configuration, don’t forget to

  1. Include 'django_sass_processor' in INSTALLED_APPS
  2. Load sass_tags as well as static in the template.
  3. Ensure the STATIC* variables in settings are set correctly.

In index.scss, make sure to link spectre.css:

// Define variables to override default ones
$primary-color: darkgreen;

// Import full Spectre source code
@import "spectre";

As I showed earlier the @import "spectre" will look for the spectre module in the current directory. If you don’t include the entry SCSS file in the static/spectre directory Django will not find it.

In your main template, include this entry-point SCSS file:

{% raw %} {% load static sass_tags %} Django SASS Example! … {% endraw %}

Once you think you have everything settled, run

$ ./manage.py compilescss
$ ./manage.py collectstatic --noinput

to compile everything.

If all goes according to plan, you should have a responsive JavaScript-less site ready to run!

$ ./manage.py runserver

And looks like we have a result:

Example Site

Did you like this article?

Did you know I'm available for hire?

Send me an email here: hireme@jordanhewitt.pro

Or connect with me in Wire: @nswered