Meridian Theme

Thanks for choosing Meridian. This theme reflects hundreds of hours of development and is designed to look beautiful out of the box while providing extensibility through best practices, WCAG 2.2 AA accessibility compliance, minimal technical debt, high performance, and flexible component-driven architecture.

Table of Contents

Key Features

  • Out-of-the-box modern design
  • Fully translatable including RTL language support
  • Component-driven architecture using Single Directory Components (SDC)
  • WCAG 2.2 AA accessibility compliance including forced colors mode, focus management, and reduced motion support
  • Dynamic color and component-based theming system
  • No front-end build tools required
  • No module dependencies on Drupal 11+
  • Core-only APIs with no opinionated content model
  • Performance-optimized asset loading
  • Basic usage if JavaScript is unavailable

Quick Start

Install Meridian at Appearance > Add Theme with no license keys or remote callbacks required.

Theme Configuration

Configure your brand at /admin/appearance/settings/meridian:

  • Theme Colors: Set primary and secondary colors with automatic color scheme generation (see Color System)
  • Logo & Branding: Upload logo and favicon
  • Header Settings: Configure header color theme and logo brightness adjustments
  • Footer Settings: Select footer color theme (Primary, Secondary, White, Light, Dark, Black)
  • Layout Settings: Customize container widths and border radius values
  • Social Media: Add links to 18 supported social platforms
  • Recipe Installation: Apply optional DripYard recipes for content types and demo content

Theme Settings

Header Settings

Configure your site header appearance and behavior:

  • Theme: Set the header color theme (Inherit, White, Light, Dark, Black, Primary, Secondary)

Logo Adjustments - Automatic brightness adjustments for optimal contrast:

  • When placed in front of hero: Adjusts logo brightness when superimposed over hero sections
    • No change (default): Logo appears with original brightness
    • Match theme of hero: Logo brightness automatically adjusts to match hero theme
  • When stickied: Adjusts logo brightness after header becomes sticky during scroll
    • No change (default): Logo appears with original brightness
    • Match theme of header: Logo brightness automatically adjusts to match header theme

Footer Settings

  • Theme: Select footer color theme from Primary (default), Secondary, White, Light, Dark, or Black

Layout Settings

Customize spacing and visual elements:

  • Container max width: Maximum width for content containers
  • Border radius options for Small, Medium, Large, and Button elements

Social Media Links

Add links to any of 18 supported platforms: Bluesky, Discord, Facebook, GitHub, Instagram, LinkedIn, Mastodon, Pinterest, Reddit, Snapchat, Telegram, Threads, TikTok, Twitch, Twitter, WhatsApp, and YouTube. Links automatically display with appropriate icons in footer regions.

How to use this theme

This theme is meant to get you 90-99% of the way there. It has best practices and opinionated logical defaults baked in, but does not dictate your content architecture. This means that you will need to map data to your components. This is most frequently done within the component's template file, but can also be done within PHP, or a contributed module such as SDC Display or (coming soon) Drupal Canvas.

Theme Architecture

Meridian follows a sophisticated multi-layer architecture designed for maintainability and upgrades:

Base Theme (dripyard_base)

  • Foundation Layer: Provides core functionality, base styles, and shared utilities
  • Component Library: Houses the complete Single Directory Components library shared across all DripYard themes
  • Framework: Contains preprocessing system, theme settings infrastructure, and accessibility features
  • Bundled: Included with Meridian installation, no separate download required

Meridian Theme

  • Style Layer: Applies Meridian-specific design tokens, colors, and visual treatments
  • Configuration: Extends base theme settings with Meridian-specific options
  • Component Overrides: Customizes base components for the Meridian aesthetic

Subtheme (Recommended)

  • Customization Layer: For all site-specific modifications and extensions
  • Future-Proof: Protects customizations during theme updates
  • Override Capability: Can override any component, style, or functionality from parent themes
  • Best Practice: Always make changes in a subtheme rather than modifying Meridian directly

This architecture ensures clean separation of concerns while maintaining upgrade compatibility.

Layout Builder Integration

Landing page recipe utilizes Layout Builder for content construction. Compatible with other page builders (Paragraphs, UI Suite), but Layout Builder is chosen for core inclusion.

Layout Sections

Meridian includes a Dynamic Layout component that enables flexible grid layouts with 1-4 columns and 1-4 rows. This component supports:

  • Flexible Grid System: Create 1, 2, 3, or 4 column layouts with configurable rows
  • Content Width Control: Choose from edge-to-edge, max-width, or narrow content widths
  • Column Proportions: Customize 2-column (50/50, 25/75, 33/67, 75/25, 67/33) and 3-column ratios (33/33/33, 50/25/25, 25/50/25, 25/25/50)
  • Advanced Spacing: Control margins, padding, and gutters with options for zero, small, medium, large, or default spacing
  • Alignment Options: Set horizontal (start, center, end) and vertical (top, center, bottom) content alignment
  • Theme Integration: All five theme variants (white, light, primary, dark, black) supported

The layout uses CSS Grid for responsive behavior and provides up to 16 content slots (cells) based on your column × row configuration.

Version Support

Drupal 11.2+

No dependencies required.

Component Architecture

Meridian inherits the component architecture from dripyard_base. For complete component architecture documentation, see dripyard_base component architecture.

Accessibility

Meridian is fully WCAG 2.2 AA compliant. Most components' documentation includes an Accessibility section. However, site authors should still test their sites and apply best practices to maintain accessibility.

Color System

Meridian inherits the complete 4-layer color system from dripyard_base. For detailed color system documentation, see dripyard_base color system.

CSS Architecture

Meridian inherits the CSS architecture from dripyard_base. For complete CSS architecture documentation, see dripyard_base CSS architecture.

Layout & Container System

Meridian inherits the layout and container system from dripyard_base. For complete documentation of utility classes, layout system, and container architecture, see dripyard_base layout system.

Theme Regions

Meridian defines strategic regions for flexible content placement throughout your site. Each region is optimized for specific content types and use cases.

Verified regions from meridian.info.yml:

Header Regions

  • header_first - Header first (logo)

    • Primary location for site branding and logo
    • Typically contains the site logo or title
    • Left-aligned on desktop layouts

  • header_second - Header second (center)

    • Central header area for primary navigation
    • Main menu placement (any menus will automatically inherit the primary-menu component)
    • Search functionality (optional)

  • header_third - Header third (right)

    • Right-aligned header content
    • Secondary navigation (any menus will automatically inherit the secondary-menu component)
    • Language switchers
    • CTAs

Content Regions

  • highlighted - Highlighted

    • Above main content area
    • Site-wide announcements or alerts
    • Featured promotions or important notices
    • This region features styling that creates a light background from to the top of the viewport.

  • content - Content

    • Primary content area
    • Main page content, articles, landing pages
    • Layout Builder content when using landing pages

Fixed Regions

  • fixed_middle_right - Fixed middle right (local actions tabs)

    • Local action buttons and tabs
    • Positioned on right side of viewport
    • Primarily for authenticated users with appropriate permissions

  • fixed_bottom_right - Fixed bottom right (messages)

    • System status messages (success, error, warning notifications)
    • Fixed positioning for consistent visibility

Footer Regions

  • footer_top - Footer top

    • Primary footer content area
    • Main footer navigation, site information
    • Can accommodate multiple columns of content

  • footer_left - Footer left

    • Left column of footer content
    • Company information, contact details
    • Secondary navigation menus

  • footer_right - Footer right

    • Right column of footer content
    • Social media links, newsletter signup
    • Additional contact information or links

  • footer_bottom - Footer bottom

    • Copyright notices, legal information
    • Final footer content, typically minimal
    • Terms of service, privacy policy links

Preprocess System

Meridian inherits the preprocessing system from dripyard_base. For complete preprocessing system documentation, see dripyard_base preprocessing system.

Recommended Modules

  • UI Icons: Icon picker support
  • Core Navigation Module: Replaces tabs with a flexible top bar

Components

Meridian includes 10 theme-specific components that extend the base theme:

Header & Navigation Components

  • footer - Custom footer with Meridian styling and theme integration
  • header - Main site header with navigation, branding, and responsive behavior
  • header-article - Article-specific header layout for content pages
  • hero - Landing page hero sections with call-to-action elements
  • header-search - Integrated header search functionality with autocomplete
  • mobile-nav-button - Mobile navigation toggle with accessibility features
  • primary-menu - Primary navigation menu component with dropdown support
  • language-switcher - Multi-language selection interface

Utility Components

  • html-header - Document head, metadata, and page initialization
  • icon - Flexible icon display component with UI Icons integration

Inherited Components

Meridian inherits 50+ additional components from dripyard_base, including layout components, UI elements, content components, media components, form elements, and Drupal integration components.

For complete component documentation, see: