MUI Base

MUI Base Theme - Material UI for Drupal 11

Transform your Drupal site with MUI Base Theme, a comprehensive implementation of Google's Material UI design system. This modern, accessible theme brings the power of Material Design to Drupal with flexible layouts, mobile-first navigation, and extensive customisation options.

🌟 Key Features

Complete Material UI Implementation

Experience the full Material UI design system with authentic components, design tokens, and interaction patterns. The theme includes dynamic colour palettes, typography scales, elevation shadows, and automatic dark mode support.

Advanced Mobile Navigation

Responsive navigation that adapts perfectly to any device. Features include:

• Collapsible drawer-style mobile menu with smooth animations

• Desktop navigation with dropdown submenus

• Touch-friendly interactions with appropriate hit targets

• Complete keyboard navigation and screen reader support

Flexible Layout System

Choose from 8 different layout configurations including 1-4 column layouts with dynamic sidebar detection. Seamlessly integrates with Drupal's Layout Builder and provides 25+ regions for maximum flexibility.

🎨 Design & Customisation

Visual Theme Editor

Configure your site's appearance with the comprehensive theme settings panel featuring:

• Live colour palette editor with Material UI colour generation

• Visual layout selector with real-time preview

• Logo management for SVG and raster images

• Custom CSS editor with syntax highlighting

• Typography controls for font selection and scaling

Material UI Color System

Implement consistent branding with the full Material UI colour system:

--mui-primary-main: #1976d2;
--mui-secondary-main: #dc004e;
--mui-error-main: #f44336;
--mui-success-main: #4caf50;

🧩 Component Library

Single Directory Components (SDC)

Built using Drupal's modern Single Directory Components architecture for maintainable, reusable code. Each component includes:

Core UI Components:

• MUI Button with variants (contained, outlined, text)

• MUI Card with elevation and content areas

• MUI Typography with semantic markup

• MUI Container with responsive constraints

• MUI Paper surfaces with elevation shadows

Navigation Components:

• MUI Mobile Menu with drawer navigation

• MUI Sidebar Menu with multi-level nesting

• MUI App Bar with sticky header behavior

• MUI Breadcrumb with structured data

Form Components:

• MUI Input with floating labels and validation

• MUI Select with keyboard navigation

• MUI Checkbox and Radio with ripple effects

• MUI Switch with smooth animations

♿ Accessibility First

WCAG 2.1 AA Compliant

Built with accessibility as a priority, not an afterthought:

• Complete keyboard navigation throughout all components

• Screen reader support with semantic markup and ARIA attributes

• High contrast mode detection and support

• Reduced motion preferences respected

• Focus management and skip links implemented

🛠️ Developer Experience

Modern Development Stack

Built for modern Drupal development with clean, maintainable code:

// Theme preprocessing example
function mui_base_preprocess_page(&$variables) {
  $theme_settings = \Drupal::config('mui_base.settings');
  $variables['layout_class'] = $theme_settings->get('default_layout');
  $variables['dark_mode'] = $theme_settings->get('enable_dark_mode');
}

JavaScript API

Control theme components programmatically:

// Mobile menu control
const mobileMenu = Drupal.muiMobileMenu.getInstance(element);
mobileMenu.open();

// Theme utilities  
Drupal.muiBase.updateColorPalette(colors);
Drupal.muiBase.setDarkMode(enabled);

📐 Layout Configurations

Responsive Layout Options

Eight carefully designed layouts that adapt intelligently across devices:

Desktop Layouts: Full layouts with multiple sidebars

Tablet (< 1200px): Simplified to 2 columns maximum

Mobile (< 768px): Single column stack with mobile navigation

Popular configurations include 2-col-left, 3-col-center, and 4-col-equal for various content needs.

🚀 Performance & Standards

Optimised for Speed

Built with performance in mind:

• Progressive enhancement - works without JavaScript

• CSS Grid for efficient layouts

• Optimised asset loading with libraries

• Mobile-first responsive design

• Core Web Vitals optimised

Browser Support

Comprehensive browser support including Chrome 90+, Firefox 88+, Safari 14+, and Edge 90+. Includes graceful degradation for older browsers.

⚡ Quick Installation

Get Started in Minutes

Simple installation process for immediate results:

cd web/themes/custom/
# Download MUI Base Theme
drush cr
drush theme:enable mui_base
drush config:set system.theme default mui_base -y

Then visit /admin/appearance/settings/mui_base to configure your theme.

📋 Requirements

Drupal: 10.x or 11.x

PHP: 8.1 or higher

Browsers: Modern browsers with CSS Grid support

🎯 Perfect For

MUI Base Theme is ideal for:

• Corporate websites requiring professional Material Design aesthetics

• Web applications needing consistent UI components

• Multi-device experiences with mobile-first requirements

• Accessible sites following WCAG guidelines

• Custom development with extensible component architecture

🤝 Community & Support

Join the growing community of developers using Material UI in Drupal. Get support through the issue queue, contribute to development, or connect with other users in the Drupal Slack #material-ui channel.