You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- Test database configuration: `docker-compose.yml`
@@ -116,6 +117,101 @@ To generate the HTML pages to be returned from our GET routes, we use Jinja2 tem
116
117
117
118
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.
118
119
120
+
### Custom theming with Bootstrap Sass
121
+
122
+
[Install Node.js](https://nodejs.org/en/download/) on your local machine if it is not there already.
123
+
124
+
Install `bootstrap`, `sass`, `gulp`, and `gulp-sass` in your project:
This will create a `node_modules` folder, a `package-lock.json` file, and a `package.json` file in the root directory of the project.
131
+
132
+
Create an `scss` folder and a basic `scss/styles.scss` file:
133
+
134
+
```bash
135
+
mkdir scss
136
+
touch scss/styles.scss
137
+
```
138
+
139
+
Your custom styles will go in `scss/styles.scss`, along with `@import` statements to include the Bootstrap components you want. For example, the default CSS for the template was compiled from the following configuration, which imports all of Bootstrap and overrides the `$theme-colors` and `$font-family-base` variables:
140
+
141
+
```scss
142
+
// styles.scss
143
+
144
+
// Include any default variable overrides here (functions won't be available)
The most common use case for `styles.scss` is to define a custom color scheme and fonts, but it's also possible to other visual details such as border radius and box shadow depth. See the [Bootstrap Sass customization instructions](https://getbootstrap.com/docs/5.3/customize/sass/) and the many free templates available at [Start Bootstrap](https://startbootstrap.com) for examples.
189
+
190
+
To compile the Sass files, we use `gulp`. In the project root directory, create a `gulpfile.js` file with the following content:
.pipe(gulp.dest('static/css')); // Destination folder for compiled CSS
201
+
});
202
+
203
+
// Define a default task
204
+
gulp.task('default', gulp.series('sass'));
205
+
```
206
+
207
+
To compile the Sass file to `static/css`, run this command:
208
+
209
+
```bash
210
+
npx gulp
211
+
```
212
+
213
+
Note that this will overwrite the existing `static/css/styles.css` file, so if you want to define any custom CSS styles, you should do so in either the `scss/styles.scss` file or in `static/css/extras.css`.
214
+
119
215
#### Context variables
120
216
121
217
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:
@@ -136,6 +232,7 @@ In this example, the `welcome.html` template will receive two pieces of context:
136
232
While this template includes comprehensive server-side validation through Pydantic models and custom validators, it's important to note that server-side validation should be treated as a fallback security measure. If users ever see the `validation_error.html` template, it indicates that our client-side validation has failed to catch invalid input before it reaches the server.
137
233
138
234
Best practices dictate implementing thorough client-side validation via JavaScript and/or HTML `input` element `pattern` attributes to:
235
+
139
236
- Provide immediate feedback to users
140
237
- Reduce server load
141
238
- Improve user experience by avoiding round-trips to the server
0 commit comments