Django DSGovBR

PyPI version Python Versions Django Versions License: MIT

Pacote Django para adoção do Design System do Governo Federal Brasileiro (DS Gov.BR) em sites e painel de administração Django.

Note

🌐 Documentação Oficial e Suíte: Para tutoriais unificados e outros temas da organização, acesse django-adminthemes.github.io. 🛠️ Desenvolvimento Local: Contribuições utilizam o workspace privado da organização com a CLI dbkw.

📋 Sobre

O django-dsgovbr facilita a implementação do Design System oficial do Governo Federal em projetos Django, inclusive no Django Admin, garantindo conformidade visual e de usabilidade com os padrões estabelecidos pelo gov.br.

🎨 Design System Gov.BR

O DS Gov.BR é o design system oficial do Governo Federal Brasileiro, criado para padronizar a experiência do usuário em todos os portais e sistemas governamentais.

Links Oficiais:

✨ Recursos Visuais do DS Gov.BR

O Design System inclui:

Partes principais

  • Header: Cabeçalho da página

  • Content: Área principal do conteúdo

  • Footer: Rodapé da página (opcional).

Componentes principais

  • Formulários: Inputs, selects, checkboxes, radio buttons estilizados

  • Botões: Primários, secundários, terciários com estados hover/active/disabled

  • Mensagens: Alertas, notificações e mensagens de sistema

  • Navegação: Headers, breadcrumbs, menus e abas

  • Tabelas: Grades de dados responsivas e acessíveis

  • Cards: Cartões informativos e de conteúdo

  • Modal: Diálogos e janelas modais

  • Paginação: Controles de navegação entre páginas

Características visuais

  • 🎨 Paleta de Cores Oficial: Azul Gov.BR (#071D41), cores de status e feedbacks

  • 📱 Design Responsivo: Mobile-first, adaptável a todos os dispositivos

  • ♿ Acessibilidade: WCAG 2.1 nível AA, suporte a leitores de tela

  • 🔤 Tipografia Rawline: Fonte oficial do governo federal

  • 📐 Grid System: Sistema de grid consistente (12 colunas)

  • 🖼️ Ícones: Biblioteca Font Awesome 5.12 com ícones customizados

Visual do DS Gov.BR

O design é divido em 3 partes principais: Header, Content e Footer (opcional).

🚀 Instalação

Via PyPI (Recomendado)

pip install django-dsgovbr

⚙️ Configuração

1. Adicione ao INSTALLED_APPS

# settings.py

INSTALLED_APPS = [
    # Coloque antes do `django.contrib.admin` para garantir que seja que o template path prevaleça sobre os templates
    # padrões do Django.
    'dsgovbr',
    'django.contrib.admin',
    # ... suas apps
]

2. Configure os Context Processors (Opcional)

# settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                # ... outros context processors
                'dsgovbr.context_processors.dsgovbr',
            ],
        },
    },
]

3. Colete os Arquivos Estáticos

python manage.py collectstatic

📖 Uso

Templates Base

Use os templates base do DSGovBR nos seus templates Django:

{% extends "admin/base.html" %}
{% load static %}

{% block title %}Minha Página Gov.BR{% endblock %}

{% block content %}
<div class="br-container">
    <h1>Bem-vindo ao Sistema</h1>

    <!-- Botão Primário -->
    <button class="br-button primary" type="button">
        Ação Principal
    </button>

    <!-- Mensagem de Sucesso -->
    <div class="br-message success">
        <div class="icon">
            <i class="fas fa-check-circle"></i>
        </div>
        <div class="content">
            Operação realizada com sucesso!
        </div>
    </div>

    <!-- Card -->
    <div class="br-card">
        <div class="card-header">
            <h3>Título do Card</h3>
        </div>
        <div class="card-content">
            <p>Conteúdo do card seguindo o padrão Gov.BR</p>
        </div>
    </div>
</div>
{% endblock %}

Formulários Django

Os formulários Django automaticamente usam os estilos do DS Gov.BR:

# forms.py
from django import forms

class MeuFormulario(forms.Form):
    nome = forms.CharField(
        label="Nome Completo",
        max_length=100,
        widget=forms.TextInput(attrs={
            'class': 'br-input',
            'placeholder': 'Digite seu nome'
        })
    )

    email = forms.EmailField(
        label="E-mail",
        widget=forms.EmailInput(attrs={
            'class': 'br-input',
            'placeholder': 'seuemail@exemplo.gov.br'
        })
    )

    mensagem = forms.CharField(
        label="Mensagem",
        widget=forms.Textarea(attrs={
            'class': 'br-textarea',
            'rows': 5
        })
    )

Admin do Django

O pacote fornece templates customizados para o Django Admin com visual Gov.BR:

# admin.py
from django.contrib import admin
from .models import MeuModelo

@admin.register(MeuModelo)
class MeuModeloAdmin(admin.ModelAdmin):
    list_display = ['nome', 'status', 'data_criacao']
    list_filter = ['status']
    search_fields = ['nome']

🎨 Componentes Disponíveis

Classes CSS Principais

<!-- Botões -->
<button class="br-button primary">Primário</button>
<button class="br-button secondary">Secundário</button>
<button class="br-button tertiary">Terciário</button>

<!-- Mensagens -->
<div class="br-message info">Informação</div>
<div class="br-message success">Sucesso</div>
<div class="br-message warning">Aviso</div>
<div class="br-message error">Erro</div>

<!-- Cards -->
<div class="br-card">
    <div class="card-header">Cabeçalho</div>
    <div class="card-content">Conteúdo</div>
    <div class="card-footer">Rodapé</div>
</div>

<!-- Inputs -->
<input type="text" class="br-input" placeholder="Digite aqui...">
<textarea class="br-textarea"></textarea>
<select class="br-select">
    <option>Opção 1</option>
</select>

🔧 Desenvolvimento

Requisitos

  • Python 3.10+

  • Django 5.2+

Setup para Desenvolvimento

# Clone o repositório
git clone https://github.com/kelsoncm/django-dsgovbr.git
cd django-dsgovbr

# Crie um ambiente virtual
python -m venv venv
source venv/bin/activate  # Linux/Mac
# ou
venv\Scripts\activate  # Windows

# Instale as dependências de desenvolvimento
pip install -e ".[dev]"

# Execute os testes
python -m pytest

📝 Licença

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.

👥 Contribuindo

Contribuições são bem-vindas! Por favor:

  1. Faça um Fork do projeto

  2. Crie uma branch para sua feature (git checkout -b feature/MinhaFeature)

  3. Commit suas mudanças (git commit -m 'Adiciona MinhaFeature')

  4. Push para a branch (git push origin feature/MinhaFeature)

  5. Abra um Pull Request

📧 Contato

Kelson da Costa Medeiros

📊 Status do Projeto

  • ✅ Integração básica com Django Admin

  • ✅ Templates base Gov.BR

  • ✅ Componentes CSS principais

  • ✅ Suporte a formulários Django

  • 🔄 Em desenvolvimento: Widgets customizados

  • 📋 Planejado: Componentes JavaScript interativos

🚀 Próximos Passos

Planejamos adicionar nas próximas versões:

  • Widgets customizados para formulários

  • Componentes JavaScript interativos

  • Mais templates de exemplo

  • Suporte a temas customizados

  • Documentação expandida

🙏 Agradecimentos

Agradecemos à equipe do Design System Gov.BR por criar e manter o design system oficial do governo federal brasileiro.

📧 Feedback

Encontrou algum problema ou tem sugestões? Abra uma issue ou contribua com um pull request!

Desenvolvido com ❤️ para o ecossistema Gov.BR