Overview
The Counter Trafficking Data Collaborative | CTDC
This project is a fully custom, responsive website built with Drupal 10/11, designed to showcase a clean and modern front-end architecture. The implementation was done from scratch without relying on any base theme (e.g., Classy or Stable), allowing for complete control over markup, performance, and maintainability.
Technologies & Tools
The custom theme was developed using standard Drupal theming practices and tools such as:
- PostCSS for modern CSS workflows (autoprefixing, nesting, and optimizations)
- Twig templates for clean, semantic HTML
- YAML configuration for theme settings, libraries, and breakpoint definitions
- Drupal’s asset library system to manage CSS and JS files efficiently
Front-End Features
- Modern CSS features:
:is(),clamp(),grid,subgrid, CSS custom properties - Minimal JavaScript: Used only where necessary, no heavy frameworks
- No jQuery dependency (unless required by a contrib module)
- Mobile-first responsive design
- Accessibility best practices: semantic elements, ARIA where needed, color contrast, keyboard navigation
Performance Optimization
- Clean and optimized CSS bundles using PostCSS plugins (
cssnano,autoprefixer) - Lazy loading for images and media
- Asset management via Drupal libraries with media queries and scoped loading
- Caching and aggregation through Drupal’s performance settings
SEO & Semantic Markup
- Well-structured content with attention to headings, metadata, and image descriptions
- Clean URLs via Drupal’s path and alias system
- SEO modules used (e.g., Metatag, optional XML Sitemap)
Additional Highlights
- Theme architecture designed for reuse across multiple content types
- Compatible with Layout Builder or Paragraphs (if used)
- Reusable Twig components and macros for consistent templates
