VOOZH about

URL: https://deepwiki.com/MahoCommerce/maho/6.7-responsive-design-and-css-architecture

⇱ Responsive Design and CSS Architecture | MahoCommerce/maho | DeepWiki

Loading...
Loading...
Last indexed: 15 May 2026 (ea8ab8)
Menu

Responsive Design and CSS Architecture

This page documents Maho's responsive design system and CSS architecture, including the CSS variable system, breakpoint definitions, layout patterns, and JavaScript utilities for handling multi-device interactions. The system provides a mobile-first approach with progressive enhancement for larger screens.

For information about frontend JavaScript utilities and validation, see Frontend JavaScript and Interactivity. For theme structure and template rendering, see Layout XML and Blocks.

CSS Variable System

Maho uses CSS custom properties (CSS variables) defined at the :root level to create a centralized theming system. This allows for consistent styling across components and simplified theme customization.

Color Variables

The CSS variable system is organized into semantic color groups:

Title: CSS Variable Hierarchy



Sources: public/skin/frontend/base/default/css/styles.css11-55


Variable Definition


All CSS variables are defined in the :root selector:















































CategoryVariablesUsage
Primary--maho-color-primary, --maho-color-primary-hover, --maho-color-primary-active, --maho-color-primary-darkLinks, buttons, headings, active states
Text--maho-color-text-primary, --maho-color-text-secondary, --maho-color-text-lightBody text, secondary text, light text on dark backgrounds
Status--maho-color-success, --maho-color-error, --maho-color-warningSuccess messages, error messages, warnings
Background--maho-color-background, --maho-color-background-alt, --maho-color-background-hover, --maho-color-background-darkPage backgrounds, alternate backgrounds, hover states
Border--maho-color-border, --maho-color-border-light, --maho-color-border-medium, --maho-color-border-darkBorders of varying emphasis
Price--maho-color-price, --maho-color-old-price, --maho-color-special-priceProduct pricing display
Form--maho-color-input-border, --maho-color-input-focus, --maho-color-input-errorForm input states


Sources: public/skin/frontend/base/default/css/styles.css11-55




Breakpoint System


JavaScript Breakpoint Object


The breakpoint system is defined in JavaScript as the bp object, providing consistent breakpoint values across JavaScript and CSS:


Title: JavaScript Breakpoint Definitions




The bp object is used throughout JavaScript for responsive behavior checks:




Sources: public/skin/frontend/base/default/js/app.js15-21


CSS Media Queries


CSS media queries use pixel values that correspond to the JavaScript breakpoints defined in app.js:





































BreakpointValueUsage
max-width: 479pxExtra SmallMobile phones (portrait)
max-width: 599pxSmallMobile phones (landscape)
max-width: 770pxMediumTablets and small screens
max-width: 979pxLargeSmall desktops
max-width: 1199pxExtra LargeLarge desktops


Sources: public/skin/frontend/base/default/css/styles.css139-148 public/skin/frontend/base/default/js/app.js15-21




CSS Architecture Overview


File Structure


The main stylesheet is organized into logical sections with clear comments:


Title: CSS Architecture Sections




Sources: public/skin/frontend/base/default/css/styles.css1-152


Reset and Base Styles


The CSS begins with a comprehensive reset using the universal selector with box-sizing: border-box:



Sources: public/skin/frontend/base/default/css/styles.css61-152


Typography System


Heading levels are defined with consistent sizing and weight:






















ElementPropertiesUsage
h1 - h6font-size: 100%, font-weight: normalBase reset for headings
bodyfont-size: 0.875rem, line-height: 1.5Default text style


Sources: public/skin/frontend/base/default/css/styles.css96-104 public/skin/frontend/base/default/css/styles.css247-257




Responsive Layout System


Grid and Column Logic


Maho employs a combination of float-based layouts and modern CSS features. In the checkout and cart pages, grid-like behavior is achieved through width percentages and media query overrides:



Sources: public/skin/frontend/base/default/css/checkout.css4-97 public/skin/frontend/base/default/css/onestep-checkout.css69-91


Responsive Image Handling


Maho implements modern image handling for performance and responsiveness:



Sources: app/design/frontend/base/default/template/catalog/product/view/media.phtml19-58




Touch vs Mouse Detection (PointerManager)


The PointerManager object provides cross-device pointer type detection using the Pointer Events API.


Title: PointerManager Interaction Flow




Key Features


Pointer Type Detection:



Event Dispatching:



iOS Special Handling:



Sources: public/skin/frontend/base/default/js/app.js49-145




Responsive Navigation (MenuManager)


The MenuManager handles header navigation with intelligent touch/mouse detection and screen-size-aware behavior.


Navigation Behavior


Touch Interaction:


    

  • Tap on parent link → toggle menu visibility.
    • 

  • Prevents default link behavior if children exist.
    • 

  • Checks if touch was actually a scroll gesture via TouchScroll.shouldCancelTouch() with a 20px threshold public/skin/frontend/base/default/js/app.js176-200
    • 



Screen Size Detection:
The useSmallScreenBehavior() method checks the bp.medium breakpoint (770px) using window.matchMedia public/skin/frontend/base/default/js/app.js208-210


Sources: public/skin/frontend/base/default/js/app.js162-210




Component-Specific Responsive Patterns


Shopping Cart and Minicart


The Minicart class manages shopping cart interactions using fetch (via mahoFetch) for seamless updates.



Sources: public/skin/frontend/base/default/js/minicart.js11-206 public/skin/frontend/base/default/css/checkout.css83-299


Product View


The product page uses a responsive grid for essential information:



Sources: app/design/frontend/base/default/template/catalog/product/view.phtml20-167




Dialog/Modal System


Maho uses the native HTML <dialog> element with custom styling for fixed positioning and backdrop effects.



Sources: public/skin/frontend/base/default/css/styles.css157-227




Performance and Accessibility


Accessibility Features



Performance Considerations



Sources: public/skin/frontend/base/default/css/styles.css72-278