Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to implement django-material in your Django project?
Django-material is a library that applies Google's Material Design styling to Django forms without requiring external CDNs. It automatically transforms your standard Django form widgets into beautiful, Material Design-styled components.
Installation
First, install the django-material package using pip ?
pip install django-material
Configuration
Add 'material' to your INSTALLED_APPS in settings.py ?
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'material', # Add this line
'myapp', # Your app
]
Creating the Model
Create a simple model in models.py ?
from django.db import models
class Employee(models.Model):
name = models.CharField(max_length=100)
salary = models.CharField(max_length=20)
def __str__(self):
return self.name
Creating the Form and View
In views.py, create a ModelForm and view ?
from django.shortcuts import render, redirect
from django import forms
from .models import Employee
class EmployeeForm(forms.ModelForm):
class Meta:
model = Employee
fields = "__all__"
def home(request):
if request.method == 'POST':
form = EmployeeForm(request.POST)
if form.is_valid():
form.save()
return redirect('home')
else:
form = EmployeeForm()
return render(request, 'home.html', {'form': form})
URL Configuration
Set up the URL pattern in urls.py ?
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name="home"),
]
Creating the Template
Create templates/home.html with Material Design includes ?
{% include 'material/includes/material_css.html' %}
{% include 'material/includes/material_js.html' %}
<!DOCTYPE html>
<html>
<head>
<title>Django Material Design Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<h2>Employee Information Form</h2>
<form action="/" method="post">
{% csrf_token %}
{{ form }}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Key Features
The django-material library automatically provides:
- Material Design Styling: Input fields get floating labels and proper Material Design appearance
- Responsive Layout: Forms adapt to different screen sizes
- Validation Feedback: Error messages display with Material Design styling
- No CDN Required: All assets are bundled with the package
Output
Customization
You can override Material Design styles by adding custom CSS ?
<style>
.material-input {
border-color: #4CAF50 !important;
}
.btn-primary {
background-color: #FF5722 !important;
}
</style>
Conclusion
Django-material provides an easy way to implement Google's Material Design in Django forms without external dependencies. The library automatically transforms standard form widgets into beautiful, responsive Material Design components with minimal configuration required.
2K+ Views
