Bootstrap Customization Instructions

Author: AkanshuSrivastav

.gitignore

@@ -5,4 +5,7 @@ __pycache__
 /.quarto/
 _docs/
 .pytest_cache/
-.mypy_cache/
+.mypy_cache/
+node_modules
+package-lock.json
+package.json

docs/customization.qmd

@@ -56,6 +56,7 @@ We find that mypy is an enormous time-saver, catching many errors early and grea
     - Organization management endpoints: `organization.py`
     - Role management endpoints: `role.py`
 - Jinja2 templates: `templates/`
+- Bootstrap Sass Files: `scss/`
 - Static assets: `static/`
 - Unit tests: `tests/`
 - Test database configuration: `docker-compose.yml`
@@ -100,6 +101,19 @@ To generate the HTML pages to be returned from our GET routes, we use Jinja2 tem
 
 With Jinja2, we can use the `{% block %}` tag to define content blocks, and the `{% extends %}` tag to extend a base template. We can also use the `{% include %}` tag to include a component in a parent template. See the [Jinja2 documentation on template inheritance](https://jinja.palletsprojects.com/en/stable/templates/#template-inheritance) for more details.
 
+### Bootstrap Sass Files 
+Install Node.js on your local machine if it is not there already.
+Install sass, gulp, and gulp-sass on your local machine:
+```bash
+npm install sass gulp gulp-sass
+```
+Restart VS Code and press Run Task from the Terminal menu on the gulpfile.js. Choose gulp:default and select your option for output. This automates Sass compilation. 
+
+There is already a default styles.scss file in the `scss` folder. Here are customization instructions for Sass files that can be included in `sass`:
+[Boostrap Customization with Sass](https://getbootstrap.com/docs/5.3/customize/sass/)
+
+There are a lot of free templates available online, such as on [Start Bootstrap]|[https://startbootstrap.com]
+
 #### Context variables
 
 Context refers to Python variables passed to a template to populate the HTML. In a FastAPI GET route, we can pass context to a template using the `templates.TemplateResponse` method, which takes the request and any context data as arguments. For example:

docs/installation.qmd

@@ -8,13 +8,17 @@ If you use VSCode with Docker to develop in a container, the following VSCode De
 
 ``` json
 {
-	"name": "Python 3",
-	"image": "mcr.microsoft.com/devcontainers/python:1-3.12-bullseye",
-	"postCreateCommand": "sudo apt update && sudo apt install -y python3-dev libpq-dev graphviz && pipx install poetry && poetry install && poetry shell",
-	"features": {
-		"ghcr.io/devcontainers/features/docker-outside-of-docker:1": {},
-		"ghcr.io/rocker-org/devcontainer-features/quarto-cli:1": {}
-	}
+    "name": "Python 3",
+    "image": "mcr.microsoft.com/devcontainers/python:1-3.12-bookworm",
+    "postCreateCommand": "sudo apt update && sudo apt install -y python3-dev libpq-dev graphviz && npm install [email protected] && npm install -g sass && npm install -g gulp && uv venv && uv sync",
+    "features": {
+        "ghcr.io/va-h/devcontainers-features/uv:1": {
+            "version": "latest"
+        },
+        "ghcr.io/devcontainers/features/docker-outside-of-docker:1": {},
+        "ghcr.io/rocker-org/devcontainer-features/quarto-cli:1": {},
+        "ghcr.io/devcontainers/features/node:1": {}
+    }
 }
 ```
 

gulpfile.js

@@ -0,0 +1,23 @@
+// Sass configuration
+var gulp = require('gulp');
+var sass = require('gulp-sass')(require('sass'));
+
+gulp.task('sass', function(cb) {
+  gulp
+    .src('scss/*.scss')
+    .pipe(sass())
+    .pipe(
+      gulp.dest(function(f) {
+        return f.base;
+      })
+    );
+  cb();
+});
+
+gulp.task(
+  'default',
+  gulp.series('sass', function(cb) {
+    gulp.watch('scss/*.scss', gulp.series('sass'));
+    cb();
+  })
+);

scss/styles.scss

@@ -0,0 +1,17 @@
+$padding: 6px;
+
+nav {
+  ul {
+    margin: 0;
+    padding: $padding;
+    list-style: none;
+  }
+
+  li { display: inline-block; }
+
+  a {
+    display: block;
+    padding: $padding 12px;
+    text-decoration: none;
+  }
+}