Contrib.social

Account for all breakpoints and order in spacing partial

Open on Drupal.org →
Created on 18 July 2024, 7 months ago
Updated 17 September 2024, 5 months ago

Problem/Motivation

When writing the Spacing map in a custom theme, the Spacing Partials custom properties mixin does not take into account differences in breakpoints across spacing types. This often results in missing custom properties or incorrect order of spacing for different breakpoints when CSS is finally built for production.

Steps to reproduce

Write a custom spacing map and include different breakpoints for each spacing type. Example:

$spacing-scale: (
  48: (
    mobile: 28,
    tablet: 32,
    desktop: 48,
  ),
  60: (
    mobile: 20,
    tablet: 40,
    desktop: 60,
  ),
  120: (
    mobile: 60,
    sm-desktop: 100,
    desktop: 120,
  ),
);

Proposed resolution

The Spacing CSS Custom Property mixin needs to be rewritten to include all breakpoints, if specified in Spacing Scale, and build them in the correct order.

🐛 Bug report
Status

Needs review

Version

5.0

Component

Code

Created by

🇺🇸United States philip_stier Denver, Colorado

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024