Documentation Index
Fetch the complete documentation index at: https://mintlify.com/pallets/flask/llms.txt
Use this file to discover all available pages before exploring further.
The authentication views and templates work, but they look very plain. Some CSS can be added to add style to the HTML layout. The style won’t change, so it’s a static file rather than a template.
Static Files in Flask
Flask automatically adds a static view that takes a path relative to the flaskr/static directory and serves it. The base.html template already has a link to the style.css file:
{{ url_for('static', filename='style.css') }}
- JavaScript functions
- Logo images
- Font files
- Any other files that don’t change
They are all placed under the flaskr/static directory and referenced with url_for('static', filename='...').
Add CSS Styling
Create the CSS file
Create flaskr/static/style.css:html {
font-family: sans-serif;
background: #eee;
padding: 1rem;
}
body {
max-width: 960px;
margin: 0 auto;
background: white;
}
h1, h2, h3, h4, h5, h6 {
font-family: serif;
color: #377ba8;
margin: 1rem 0;
}
a {
color: #377ba8;
}
hr {
border: none;
border-top: 1px solid lightgray;
}
nav {
background: lightgray;
display: flex;
align-items: center;
padding: 0 0.5rem;
}
nav h1 {
flex: auto;
margin: 0;
}
nav h1 a {
text-decoration: none;
padding: 0.25rem 0.5rem;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li a, nav ul li span, header .action {
display: block;
padding: 0.5rem;
}
.content {
padding: 0 1rem 1rem;
}
.content > header {
border-bottom: 1px solid lightgray;
display: flex;
align-items: flex-end;
}
.content > header h1 {
flex: auto;
margin: 1rem 0 0.25rem 0;
}
.flash {
margin: 1em 0;
padding: 1em;
background: #cae6f6;
border: 1px solid #377ba8;
}
.post > header {
display: flex;
align-items: flex-end;
font-size: 0.85em;
}
.post > header > div:first-of-type {
flex: auto;
}
.post > header h1 {
font-size: 1.5em;
margin-bottom: 0;
}
.post .about {
color: slategray;
font-style: italic;
}
.post .body {
white-space: pre-line;
}
.content:last-child {
margin-bottom: 0;
}
.content form {
margin: 1em 0;
display: flex;
flex-direction: column;
}
.content label {
font-weight: bold;
margin-bottom: 0.5em;
}
.content input, .content textarea {
margin-bottom: 1em;
}
.content textarea {
min-height: 12em;
resize: vertical;
}
input.danger {
color: #cc2f2e;
}
input[type=submit] {
align-self: start;
min-width: 10em;
}
View the styled application
CSS Tips
If you change a static file, refresh the browser page. If the change doesn’t show up, try clearing your browser’s cache.
Flexbox for Layout
The CSS uses Flexbox for responsive layouts:
nav {
display: flex;
align-items: center;
}
nav h1 {
flex: auto; /* Takes up remaining space */
}
.content form {
display: flex;
flex-direction: column;
}
input[type=submit] {
align-self: start; /* Don't stretch to full width */
min-width: 10em;
}
Flash Message Styling
Flash messages get distinct styling to stand out:
.flash {
margin: 1em 0;
padding: 1em;
background: #cae6f6;
border: 1px solid #377ba8;
}
Static File Organization
For larger applications, you might organize static files into subdirectories:
static/
├── css/
│ ├── style.css
│ └── theme.css
├── js/
│ └── main.js
└── images/
└── logo.png
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
<img src="{{ url_for('static', filename='images/logo.png') }}">
Browser Caching
Browsers cache static files for performance. During development, you can:
- Hard refresh - Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)
- Disable cache - Open browser DevTools and enable “Disable cache”
- Use cache busting - Add version query parameters:
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=1.0">
For production, Flask extensions like Flask-Assets can handle cache busting automatically by adding content hashes to filenames.
