Greatlakes Theme

Thanks for choosing Greatlakes — a commercial premium Drupal theme developed by experienced Drupal core contributors. 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 with fixed header navigation system
  • 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
  • Fixed header with integrated mobile popover navigation
  • No front-end build tools required
  • No module dependencies
  • Core-only APIs with no opinionated content model
  • Performance-optimized asset loading
  • Basic usage if JavaScript is unavailable

Quick Start

Install Greatlakes at Appearance > Add Theme with no license keys or remote callbacks required. Important: Greatlakes includes a pre-configured subtheme for customizations. Always use the included subtheme rather than modifying Greatlakes directly. This ensures you can safely update the main theme without losing your customizations.

Theme Configuration

Configure your brand through your theme's settings page:
  • Theme Colors: Set primary color and color scheme (see Color System)
  • Logo & Branding: Upload logo and favicon
  • Footer Settings: Select footer color theme (Primary, White, Light, Dark, Black)
  • Social Media: Add links to your social media profiles
  • Recipe Installation: Apply optional DripYard recipes for content types and demo content

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

Greatlakes 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 Greatlakes installation, no separate download required

Greatlakes Theme

  • Style Layer: Applies Greatlakes-specific design tokens, colors, and visual treatments
  • Configuration: Extends base theme settings with Greatlakes-specific options
  • Component Overrides: Customizes base components for the Greatlakes aesthetic
  • Fixed Header System: Unique navigation architecture with popover overlay

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 Greatlakes 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

Greatlakes 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. Additionally, six layout sections are defined in greatlakes.layouts.yml:
  • One column - Single column with content_above region for title-cta component
  • Two column - Dual column with content_above region for title-cta component
  • Three column - Triple column with content_above region for title-cta component
  • Four column - Quad column with content_above region for title-cta component
  • Tab group - Container for tab components
  • Accordion group - Container for accordion_item components

Version Support

Drupal 11.2+

No dependencies required.

Component Architecture

Components reside in components/ directory with logical groupings.
  • Most components define schema in *.component.yml
  • Non-reusable components omit schemas
  • Each component includes comprehensive documentation
Built using Drupal's Single Directory Components (SDC) framework. Components are highly configurable through two mechanisms:

Component Props

Each component defines configurable properties in its *.component.yml schema file, allowing you to:
  • Modify appearance and behavior through standardized interfaces
  • Configure layout options, spacing, alignment, and themes
  • Control content display and functionality
  • Ensure type safety and validation

CSS Variables

Components expose extensive CSS custom properties for fine-grained control:
  • Override colors, spacing, typography, and effects
  • Maintain consistency with design system tokens
  • Customize within your subtheme for upgrade safety
  • Enable component-level theming and variations
This dual approach provides both user-friendly configuration options and deep customization capabilities for developers.

Reducing unneeded markup

Drupal is notoriously markup heavy. We reduce Drupal's markup overhead by using field--bare.html.twig via the core |add_suggestion() Twig filter. Alternative solutions include Fences and No Markup modules.

Accessibility

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

Color System

Greatlakes's color system uses a sophisticated 4-layer architecture that provides flexibility while maintaining WCAG 2.2 AA accessibility compliance:

Theme Settings Layer

Configure your primary brand color through your theme's settings page. This creates a --theme-setting-base-primary-color CSS variable and applies either primary-color-is-dark or primary-color-is-light CSS classes to guide text contrast.

Semantic Layer

Using the native CSS OKLCH() function, the system generates primary and neutral color palettes with ten variations each (100-800), stored in /css/_variables/variables-colors-semantic.css.

Theme Layer

Five built-in themes (White, Light, Primary, Dark, Black) located in /css/themes/ organize semantic colors into working color schemes with variables for:
  • Surfaces: --theme-surface, --theme-surface-alt, --theme-surface-primary
  • Text: --theme-text-color-soft/medium/loud/primary, --theme-link-color/hover
  • Borders/Icons: --theme-border-color/alt/soft
  • Focus: --theme-focus-ring-color
  • Status: --theme-color-error/warning/success/info
  • Buttons: Various surface and text color combinations

Component Layer

Each component defines its own CSS variables that map exclusively to theme layer variables, ensuring consistent theming. Apply theme classes (.theme--dark, .theme--light, etc.) to any component or ancestor element to switch themes while maintaining accessibility contrast ratios.

CSS Architecture

  • CSS classes are loosely named based on the BEM CSS naming methodology. This aligns with Drupal core's coding standards.
  • CSS is scoped to components whenever possible
  • No global build system or dependency tree
  • CSS loads only when needed (performance-first philosophy)
  • CSS logical properties are used for right and left properties. This lets the theme easily adapt to RTL languages. Note that we do not use CSS logical properties for top and bottom properties, as the theme does not support flipping the X and Y axis.
  • Greatlakes heavily utilizes progressive enhancement, which is the concept that we should support features in more modern browsers as long as it does not degrade the usability in older browsers. An example of this is the new interpolate-size property (currently only supported by Chromium at the time of this writing). If the browser supports this, various disclosures (e.g. accordions) will animate on open/close if the users' preference permits.

Layout & Container System

Greatlakes's layout system uses a combination of query-container, region-container, and full-width wrappers to:
  • Prevent horizontal scrollbars
  • Support responsive breakout elements
  • Handle off-canvas admin UI

CSS Utility Classes:

  • .component-spacer: Wraps landing page components ensuring equal spacing between each. This class is added to the wrapper around the dripyard_landing_page node template. Note that we do apply spacing at the component level in order to make the components more modular. An example of this would be injecting an accordion group into a hero (we wouldn't want component spacing there).
  • .query-container: Wraps non-fixed Drupal regions and enables cqw unit calculations.
  • .region-container: Max-width container within query-container.
  • .full-width: Expands to full page width, even with off-canvas UI.
  • .full-height: Tells .component-spacer to not apply vertical spacing.
  • .container: Used for nested layout inside full-width elements.
  • .visibility-hidden: Hides elements using visibility: hidden
Layout Utilities:
  • Gutters: .gutter-column--0/s/m/l and .gutter-row--0/s/m/l for controlling grid spacing
  • Margins: .margin-top--0/s/m/l and .margin-bottom--0/s/m/l with :first-child and :last-child overrides
  • Padding: .padding-top--0/s/m/l and .padding-bottom--0/s/m/l for internal spacing
Typography Utilities:
  • Heading Styles: .heading-title, .h1 through .h6 apply semantic heading typography
  • Body Text: .body-l, .body-m, .body-s for different body text sizes
  • Color Classes: .color--soft/medium/loud/primary for text color variations mapped to theme variables

Fixed Header & Navigation System

Greatlakes features a unique fixed header and navigation system that provides a modern, app-like experience:

Fixed Header (gl-header)

  • Fixed Positioning: Header remains at the top during scroll for constant access to navigation
  • Container Layout: Uses consistent container system for content alignment
  • Mobile Responsive: Seamlessly transitions between desktop and mobile layouts
  • Integrated Toggle: Mobile navigation button integrated directly into header

Popover Navigation System

  • Full-Screen Modal: Mobile navigation displays as a full-screen overlay using native <dialog> element
  • Four Content Areas: Structured layout with top, left, right, and bottom content regions
  • Flexible Content: Supports menus, text, widgets, or any Drupal region content
  • Accessibility First: Proper focus management, keyboard support, and screen reader compatibility

Header Popover Regions

Greatlakes provides specialized popover regions for the mobile navigation overlay:
  • header_popover_top: Logo and close button area
  • header_popover_left: Main navigation area
  • header_popover_right: Secondary content or additional navigation
  • header_popover_bottom: Footer-style content within the popover

Key Benefits

  • Always Accessible: Fixed header ensures navigation is always available
  • Mobile Optimized: Popover system provides excellent mobile UX
  • Performance: Minimal JavaScript footprint with progressive enhancement
  • Customizable: All popover areas can contain any Drupal content

Theme Regions

Greatlakes defines strategic regions for flexible content placement throughout your site. Each region is optimized for specific content types and use cases. Verified regions from greatlakes.info.yml:

Fixed Header Region

  • fixed_hero - Fixed hero
    • Content that appears above the fixed header
    • Useful for announcements or special promotions
    • Scrolls with page content
  • header - Header
    • Main fixed header region containing all header content
    • Processes all content through the gl-header component
    • Includes navigation, branding, and mobile toggle functionality

Header Popover Regions

Specialized regions for mobile navigation overlay:
  • header_popover_top - Header popover content (top)
    • Top section of mobile navigation popover
    • Typically contains logo and close button
    • Spans full width of popover
  • header_popover_left - Header popover content (left)
    • Left main content area in popover
    • Primary location for mobile navigation menu
    • Part of two-column layout in main section
  • header_popover_right - Header popover content (right)
    • Right main content area in popover
    • Secondary navigation or additional content
    • Part of two-column layout in main section
  • header_popover_bottom - Header popover content (bottom)
    • Bottom section of mobile navigation popover
    • Footer-style content within the overlay
    • Spans full width of popover

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_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

Greatlakes and all DripYard themes use an object oriented class for preprocessing to keep things clean, legible, reusable and out of the .theme file. The files are in ./src/Preprocess and should all implement the PreprocessInterface which has methods to determine when and how to apply preprocess routines. Some DripYard fields have special logic to generate props from field data. For example, dripyard_link field is preprocessed into props.dripyard_link which only contains the raw HTML props that a <a> would expect. The preprocessors mostly run on blocks as this is where we convert block render data into SDCs with simple props instead of using the field rendering api. Views are a special case because they don't invoke the block theme and preprocessors when rendering block content directly in a view. See the Drupal core issue for more info.

Recommended Modules

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