Drupal

Drupal serves as our content management system of choice for traditional client websites. We selected Drupal for its enterprise-grade architecture, powerful content modeling capabilities, and extensive customization options. Unlike simpler CMS platforms, Drupal excels at handling complex content structures and custom workflows, which is essential for our diverse client base. The platform’s robust security practices, active development community, and proven scalability make it ideal for building professional websites that can grow with our clients’ businesses.

Note: Our franchise clients use the ScuteSuite platform rather than Drupal, as their multi-location management needs require a different architectural approach.

Key Advantages for Our Workflow

  • Flexible content architecture allows us to model complex client requirements without limitations
  • Extensive module ecosystem combined with custom development capabilities gives us the right tool for every situation
  • Enterprise-level security with regular updates and a dedicated security team
  • Multisite capabilities enable efficient management of multiple client websites from a single codebase

Custom Turtlehut Components

Our custom-built components and systems form the foundation of our development efficiency and client deliverables. These tools are built specifically to streamline our workflow and provide consistent, high-quality results across all client projects.

Custom Theme

The Turtlehut theme is our proprietary Drupal theme that serves as the foundation for all client websites. Rather than starting from scratch with each project or relying on generic themes that require extensive modification, we've built a highly customized solution tailored specifically to our workflow and client needs.

Why We Built a Custom Theme

  • Ensures visual and technical consistency across all client deliverables
  • Dramatically reduces development time with pre-built, thoroughly tested components
  • Provides complete control over performance optimization at the theme level
  • Eliminates bloat from unnecessary features common in generic themes, keeping sites lean and fast

Theme Structure: Content Blocks vs Structure Blocks

Our theme architecture uses two distinct block types that serve different layout purposes:

Structure Blocks

  • Full-width containers that extend edge-to-edge across the viewport
  • Used for: Hero sections, full-width image backgrounds, banner elements, and any design element that benefits from spanning the entire screen width
  • Purpose: Provide visual flexibility and enable modern, immersive design layouts that create impact

Content Blocks

  • Fixed 1200px max-width containers with left-aligned or centered content
  • Used for: Text content, forms, standard page sections, navigation elements, and anything that benefits from a constrained reading width
  • Purpose: Maintain optimal readability and consistent content width across all devices and screen sizes

This dual-structure approach gives us the best of both worlds: dramatic full-width design elements when needed, combined with readable, well-structured content areas. The 1200px content width was chosen based on typography best practices for comfortable reading while making efficient use of modern screen sizes.

CSS Variables System

Our theme uses a sophisticated CSS variables system built on HSL (Hue, Saturation, Lightness) color values for maintaining design consistency and enabling rapid customization across client projects.

How It Works

The variables file (variables.css) is imported at the top of the main CSS file and establishes a centralized configuration system. Rather than hardcoding color values throughout the CSS, most colors are defined once as CSS custom properties (variables) in the :root selector and referenced throughout the theme.

Note: There are times when it makes sense to make individual color changes within the main CSS file; using the variables file is great for establishing brand colors to be used across the site.

Core Color Architecture

Each client site is defined by four base colors, specified as HSL components:

  • Primary Color: Main brand color
  • Secondary Color: Supporting brand color
  • Contrast Color: Call-to-action and emphasis color
  • Neutral Color: Text and UI elements

Automatic Color Variations

The system automatically generates lighter and darker variations of each color using mathematical calculations:

  • Light variants: +10, +20, +40 lightness
  • Dark variants: -15, -25, -35 lightness

For example, from a single Primary color definition the system automatically creates:

  • --color-primary-light
  • --color-primary-lighter
  • --color-primary-dark
  • --color-primary-darker

This means defining one base color automatically provides multiple shades for use throughout the theme, ensuring visual harmony without manual color selection.

Additional Capabilities

  • Alpha transparency variants (90%, 80%, 70%, 50% opacity versions)
  • Complementary color calculations (180° hue rotation)
  • Global border radius control
  • Consistent spacing and typography variables throughout

Why This Approach

  • One-file customization: Change a client’s entire color scheme by editing just 12 values (H, S, L for 4 base colors) in the variables file
  • Automatic consistency: All color variations and transparencies are calculated automatically
  • No color conflicts: Centralized color management eliminates hardcoded values scattered throughout CSS
  • Future-proof: Adding new components automatically inherits the color system without additional color definitions

Technical Implementation

The variables file feeds into the main CSS through a simple import statement:

  • @import url("/themes/TH_base2/css/theme/variables.css");

Once imported, any CSS rule can reference variables like these:

  • background: var(--color-primary);
  • color: var(--color-neutral-lightest);

This architecture means customizing a site for a new client typically takes minutes rather than hours—just update the HSL values in the variables file and the entire theme adapts automatically.

Custom Drupal Modules

Beyond the custom theme, we've developed several proprietary Drupal modules that extend functionality to meet our specific workflow and client needs.

We build custom modules when contributed (community-built) modules either don’t exist for our use case, don’t integrate well with our workflow, or would require extensive customization that negates their benefit. Custom development gives us complete control over functionality, performance, and long-term maintenance.

TH Vars Module

The TH Vars module is a centralized variable management system that stores and manages site-specific information as reusable tokens throughout the Drupal site. It’s designed to be accessible to non-technical users, allowing copywriters and account managers to update critical site information without developer assistance.

Purpose: Rather than hardcoding client information (phone numbers, addresses, email addresses, keywords, etc.) throughout a site’s pages and templates, TH Vars provides a single administrative interface where these values are defined once and then referenced anywhere they’re needed. This “single-source of truth” approach ensures consistency and dramatically simplifies site updates—changing a phone number or address requires editing one variable instead of hunting through dozens of pages.

Importantly, TH Vars is built to be user-friendly for non-technical team members. Account managers can update client contact information, copywriters can modify marketing messaging and adjust site-specific details—all without touching code or requesting developer intervention.

Types of Variables Managed

The TH Vars module handles a wide range of site-specific information:

Contact Information

  • Physical address with formatted output
  • Phone Number
  • Client email addresses
  • Internal team email addresses (for form notifications)

Business Information

  • Company Name
  • City and state (with abbreviations)
  • Site name/branding

Marketing Content

  • Main keyword for SEO
  • Competitive advantage statements
  • CTA button text and URLs
  • Pre-formatted CTA links

How It Works

Administrators define variables through the Drupal admin interface, each with:

  • Name: Human-readable label (e.g., “Phone”)
  • Machine name: Token identifier used in code (e.g., phone)
  • Type: Categorization (all marked as thvars)
  • Content: The actual value or formatted output

Once defined, these variables can be inserted into pages, templates, or snippets using their token identifiers. For example, [thvars:phone] automatically displays the client’s phone number wherever it appears.

The interface is straightforward enough that non-technical users can confidently make updates—when a client changes their phone number or moves offices, the account manager can update the TH Vars directly rather than submitting a developer ticket.

Benefits

  • Update once, change everywhere: Modify a phone number in one place and it updates across the entire site
  • Consistency guaranteed: Eliminates discrepancies in contact information across different pages
  • Reduced maintenance time: No need to search and replace across multiple pages
  • Error prevention: Reduces typos and outdated information by maintaining a single authoritative source
  • Onboarding efficiency: New client sites can be quickly configured by updating the TH Vars without touching page content
  • Team empowerment: Non-technical team members can manage site updates independently without developer bottlenecks

Snippet Tool Module

The Snippet Tool is a custom Drupal module that integrates a library of pre-built, pre-styled code components directly into the Drupal content editor interface, allowing non-technical users to build professional web pages without writing code.

Purpose & Benefits

  • Empowers copywriters and content editors to create visually appealing, consistent pages without coding knowledge
  • Provides instant access to pre-styled components (columns, CTA buttons, checklists, block quotes, etc.) via a dropdown menu in the editor
  • Eliminates inconsistent or poorly formatted content by providing tested, standardized components
  • Dramatically reduces page creation time—select from a dropdown, click the copy button, and insert the code

How It Works

The Snippet Tool module adds a “Snippets” dropdown directly into the Drupal content editor. Users can:

  1. Click the Snippets dropdown while editing any page
  2. Select from available components (1-column box, CTA button, Checkmark list, etc.)
  3. Click “Copy” to add code snippet to clipboard, then paste directly into the editor
  4. Customize the text/content within the pre-built component structure

The module is integrated into every Drupal site built on our template, making it immediately available to all content editors without additional setup.

Snippet Library Reference Site

A separate documentation site serves as a visual reference and training resource where users can:

  • Browse live examples of each snippet type with multiple style variations
  • See implementation examples of how snippets can be combined
  • Access utility classes for quick appearance modifications
  • Learn best practices for using snippets effectively

Available Snippet Types

  • Layout components (1-column, 2-column, 3-column, 4-square boxes)
  • CTA buttons with consistent styling
  • Checkmark lists and Font Awesome icon lists (versions 1 and 2)
  • Block quotes

Use Cases

  • Content editors building service pages with consistent column layouts
  • Copywriters adding styled callout boxes and CTAs without developer help
  • Quick page updates using pre-approved design components
  • Maintaining visual consistency across dozens of pages and multiple team members

Custom Mail Sending Suite - Unfinished

Our mail sending suite handles all email functionality across client websites with enhanced reliability and deliverability.

Purpose & Benefits

  • (PLACEHOLDER: Why did we build a custom mail solution instead of using Drupal’s default mail system? What problems were we experiencing?)
  • (PLACEHOLDER: What specific improvements does our custom suite provide? Better deliverability rates? More reliable sending? Advanced features?)
  • (PLACEHOLDER: What email service provider(s) does this integrate with?)

Key Features

  • (PLACEHOLDER: Feature 1 - Does this include template management? Custom email layouts?)
  • (PLACEHOLDER: Feature 2 - Is there enhanced logging/monitoring? How do we track email delivery?)
  • (PLACEHOLDER: Feature 3 - Any special routing logic? Different handling for transactional vs. marketing emails?)

Questions:

  1. What email service provider do we use with this module?
  2. What were the main problems with Drupal’s default mail system that prompted building this?
  3. What are the key features of our mail suite? (Templates, logging, routing, etc.)
  4. Is this used on all client sites or only some?
  5. Does this handle just transactional emails (forms, modifications) or also marketing emails?

Last Updated: April 2026