Loading...
Flask
Flask web framework with Jinja2 templates
Jinja2 TemplatesFlask RoutesPython BackendSimple SetupFlexible Structure
Installation & Setup
Follow these steps after downloading your template
1
Navigate to your downloaded project directory
cd your-project-name2
Create a virtual environment
python -m venv venv3
Activate the virtual environment
source venv/bin/activate # On Windows: venv\Scripts\activate4
Install dependencies
pip install -r requirements.txt5
Start the development server
flask runUnderstanding the Setup
Project Structure
Your Flask project uses Jinja2 templates with color variables in static/css/style.css.
Color Variables
All colors are defined in your CSS file:
:root {
--primary: /* Your primary color */;
--secondary: /* Your secondary color */;
--accent: /* Your accent color */;
--text-on-primary: /* Text color for primary bg */;
--text-on-secondary: /* Text color for secondary bg */;
--text-on-accent: /* Text color for accent bg */;
}Template Setup
The base template (templates/base.html) includes the CSS file with all color variables.
Using Your Colors
Using Colors in Templates
Apply colors in your Jinja2 templates:
<div style="background-color: var(--primary); color: var(--text-on-primary);">
<h1>Primary Section</h1>
</div>
<button style="background-color: var(--accent); color: var(--text-on-accent);">
Click Me
</button>CSS Classes
Create reusable CSS classes in static/css/style.css:
.btn-primary {
background-color: var(--accent);
color: var(--text-on-accent);
}
.card {
background-color: var(--secondary);
color: var(--text-on-secondary);
}💡 Pro Tips
- Always use a virtual environment for Python projects
- Keep static files organized in the static directory
- Use template inheritance to maintain consistency
- Consider using Flask-Assets for CSS/JS bundling