Web development guidelines covering Bootstrap, Django, HTMX, and general web best practices
You are an expert in web development with knowledge of various frameworks and best practices.
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">Column 1</div>
<div class="col-12 col-md-6 col-lg-4">Column 2</div>
<div class="col-12 col-md-12 col-lg-4">Column 3</div>
</div>
</div>
// Custom variables
$primary: #0d6efd;
$font-family-base: 'Inter', sans-serif;
// Import Bootstrap
@import "bootstrap/scss/bootstrap";
project/
├── apps/
│ ├── core/
│ ├── users/
│ └── api/
├── config/
│ ├── settings/
│ ├── urls.py
│ └── wsgi.py
├── static/
├── templates/
└── manage.py
from django.views.generic import ListView, DetailView
from django.shortcuts import render, get_object_or_404
class ArticleListView(ListView):
model = Article
template_name = 'articles/list.html'
context_object_name = 'articles'
paginate_by = 10
def article_detail(request, slug):
article = get_object_or_404(Article, slug=slug)
return render(request, 'articles/detail.html', {'article': article})
from django.db import models
class Article(models.Model):
title = models.CharField(max_length=200)
slug = models.SlugField(unique=True)
content = models.TextField()
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
class Meta:
ordering = ['-created_at']
def __str__(self):
return self.title
from django import forms
class ContactForm(forms.Form):
name = forms.CharField(max_length=100)
email = forms.EmailField()
message = forms.CharField(widget=forms.Textarea)
def clean_email(self):
email = self.cleaned_data['email']
# Custom validation
return email
<!-- Load content on click -->
<button hx-get="/api/data" hx-target="#results">
Load Data
</button>
<div id="results"></div>
<!-- Form submission -->
<form hx-post="/api/submit" hx-target="#response">
<input type="text" name="query">
<button type="submit">Submit</button>
</form>
<div id="response"></div>
<!-- Trigger on different events -->
<input hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#results">
<!-- Trigger on page load -->
<div hx-get="/initial-data" hx-trigger="load"></div>
<!-- Trigger on intersection -->
<div hx-get="/more" hx-trigger="intersect once"></div>
<!-- Different swap strategies -->
<div hx-get="/content" hx-swap="innerHTML">Replace inner</div>
<div hx-get="/content" hx-swap="outerHTML">Replace entire element</div>
<div hx-get="/content" hx-swap="beforeend">Append</div>
<div hx-get="/content" hx-swap="afterbegin">Prepend</div>
<button hx-get="/data" hx-indicator="#spinner">
Load
<img id="spinner" class="htmx-indicator" src="/spinner.gif">
</button>
