Flask, Bootstrap and Custom Bootstrap Theme

5 min readFeb 12, 2022

My documentation for building a web app with Flask, Bootstrap, SASS, and a custom Bootstrap Theme (Bootswatch).

Bootswatch Mint Theme with Flask, Bootstrap, and SASS

I am using Windows 10 command line and python 3.9.7. Git repo is here. This repo could be downloaded directly and if you’re using Bootswatch you can either use the same custom theme or replace the files in my bootswatch directory with the bootswatch theme of your choosing here.

You may also be able to use other themes by replacing the files in my /bootswatch and change the reference names in step 10.

Source for setting up Bootstrap with SASS and custom theme (no Flask stuff): https://www.youtube.com/watch?v=iJKCj8uAHz8

Starting out project folder structure:

 — app
    | — run.py
    | — static
    ` — templates
        | — home.html
        ` — layout.html

This is all you need to start out. The basic Flask framework or blueprints is fine. We’re going to do everything from here on out in the static folder.

Step 1: Install npm

https://nodejs.org/en/download/

Step2: Initialize npm in the static folder

I use the command line. Navigate to static folder and do this:

npm init

Immediately after the command you will be prompted with a few questions. I am not sure any are critical they are just going to fill in descriptions in a json file. After entering data or just pressing enter to continue a package.json file will be created in /static directory.

Step 3: Install dev sass

In the terminal (with npm installed) install sass:

npm install --save-dev sass

This will add files to /static and document the dependencies in package.json. In particular a /nodes_modules where all the dependencies files will be added.

In fact, if you open the packages.json file you will see the sass package added to “dependencies”.

Step 4: Install bootstrap

npm install bootstrap --save

More files in folder and package.json

Step 5: Install fontawesome

(might not be necessary for your purpose)

npm install –save @fortawesome/fontawesome-free

More files added in /static folder and package.json

Step 6: install more stuff

(I don’t know I just did this because the youtube tutorial did)

npm install postcss-cli autoprefixer --save

More files in folder and package.json

package.json after step 6 (before editing in following steps)

Step 7a: Edit package.json

Create npm script that will compile sass to css. This is done by editing package.json and creating folders

Open the file package.json and change the line that starts with “test” to:

“scripts”: {
“compile_sass”: “sass scss:assets/css”
},

“compile_sass” can be any name I want. The tutorial used “compile:sass”.

Step 7b: Create main.scss

Create scss folder in /static and add main.scss (or whatever you want to call the styling scss file that will get mapped to css).

Step 7c: run compile_sass

In static folder

npm run compile_sass

This will create assets\css folders with main.css and main.css.map

Step 8: Edit package.json to watch for sass changes

Edit package.json to have css file watch for changes in scss file:

“scripts”: {
“compile_sass”: “sass --watch scss:assets/css”
},

Then do step 7d again so that the changes get compiled. When complie_sass (step 7d) is run this time with “ — watch” argument it will occupy the cmd — essentially it is watching for changes in main.scss. You can leave this terminal occupied and open another terminal to run the flask app or you can just run when you make a change to the main.scss file so the main.css file gets updated.

Folder structure at this point:

` — app
    | — run.py
    | — static
    | | — assets
    | | — node_modules
    | | — package-lock.json
    | | — package.json     
    | ` — scss
    ` — templates
        | — home.html
        ` — layout.html

Notes:

1. Package-lock.json gets created between steps 3 and 4 — I think.

2. Node_modules gets created in step 3

Step 9: Get custom Bootstrap theme

I am using bootswatch, found here: https://bootswatch.com/. Pick your theme and download the files into a bootswatch folder:

I put them in /static/bootswatch

` — app
    | — run.py
    | — static
    | | — assets
    | | ` — css
    | | — bootswatch
    | | | — _bootswatch.scss
    | | | — _variables.scss
    | | | — bootstrap.css
    | | | — bootstrap.min.css
    | | ` — readme.txt
    | | — node_modules

The readme.txt is something I added that just keeps a reference to the bootswatch download and theme name.

Here bootswatch’s documentation on adding the theme: https://bootswatch.com/help/

Step 10: Create custom theme partial file

In the /static/scss create a file called “_custom.scss”. SASS files that begin with “_” are called partials.

Inside the “_custom.scss” file add the following:

@import “../bootswatch/variables”;
@import “../node_modules/bootstrap/scss/bootstrap.scss”;
@import “../bootswatch/bootswatch”;

Then in /static/scss/main.scss:

@use ‘custom’;

You’ll need to link your html pages to the main.scss. I did this using layouts

<link rel=”stylesheet” href=”{{ url_for(‘static’, filename=’assets/css/main.css’) }}”>

As you can see I also added a background to my body to make sure everything is working. This is what it should look like:

Go to github page to get home and main.scss code.

Folder structure in the end should look like this:

` — app
    | — run.py
    | — static
    | | — assets
    | | — bootswatch
    | | — node_modules
    | | — package-lock.json
    | | — package.json
    | ` — scss
    ` — templates
        | — home.html
        ` — layout.html

If you find your css not updating it might be because you for got to tell sass to watch for the new changes (step 7c).

I use VS code which includes a Watch Sass function that I’ve used. But not with this framework. I’m sure its not too much work to link. So if anyone else has that for me please let me know.