From 7781aab39f9d0bd12430deb5aa52640dc72c8b29 Mon Sep 17 00:00:00 2001 From: root Date: Fri, 19 Dec 2025 01:22:13 +0000 Subject: [PATCH] Update responsive breakpoint migration guide with correct variable convention MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../upstream_changes/responsive_12_18.txt | 183 ++++++++++++------ 1 file changed, 120 insertions(+), 63 deletions(-) diff --git a/app/RSpade/upstream_changes/responsive_12_18.txt b/app/RSpade/upstream_changes/responsive_12_18.txt index e746f80a4..7c2edfd10 100755 --- a/app/RSpade/upstream_changes/responsive_12_18.txt +++ b/app/RSpade/upstream_changes/responsive_12_18.txt @@ -28,6 +28,29 @@ BREAKPOINT DEFINITIONS The 1024px mobile/desktop boundary was chosen because tablets in landscape (iPad Pro at 1366px) should receive desktop layouts. +VARIABLE CONVENTION + + IMPORTANT: Only 4 breakpoint variables are defined. Each variable represents + where that breakpoint STARTS. Max values are calculated inline in mixins as + ($next-breakpoint - 0.02px). + + DO NOT create -min/-max suffix variables like $bp-desktop-sm-max. This is + the old convention and is incorrect. + + Correct: + $bp-tablet: 800px; + $bp-desktop: 1024px; + $bp-desktop-md: 1700px; + $bp-desktop-lg: 2200px; + + Wrong (old convention - do not use): + $bp-phone-max: 799px; + $bp-tablet-min: 800px; + $bp-tablet-max: 1023px; + $bp-desktop-sm-min: 1024px; + $bp-desktop-sm-max: 1699px; + ... etc + AFFECTED FILES Framework files (already updated): @@ -71,82 +94,118 @@ CHANGES REQUIRED // Desktop: 1024px+ (all desktop sizes) // // TIER 2 - Granular Device Classes: - // phone: 0 - 799px - // tablet: 800 - 1023px - // desktop-sm: 1024 - 1699px - // desktop-md: 1700 - 2199px - // desktop-lg: 2200px+ + // phone: 0 - 799px Phones, small handhelds + // tablet: 800 - 1023px Tablets portrait, large phones landscape + // desktop-sm: 1024 - 1699px Laptops, small monitors + // desktop-md: 1700 - 2199px Standard monitors (1080p-1440p) + // desktop-lg: 2200px+ Large/ultra-wide monitors, 4K + // + // BREAKPOINTS: 800, 1024, 1700, 2200 + // No -min/-max variables; calculate max as ($next-breakpoint - 0.02px) + // + // USAGE: + // SCSS Mixins: + // @include mobile { ... } // 0 - 1023px + // @include desktop { ... } // 1024px+ + // @include phone { ... } // 0 - 799px + // @include tablet { ... } // 800 - 1023px + // @include desktop-sm { ... } // 1024 - 1699px + // @include desktop-md { ... } // 1700 - 2199px + // @include desktop-lg { ... } // 2200px+ + // + // Bootstrap Utility Classes (auto-generated from $grid-breakpoints): + // .col-mobile-6, .col-desktop-4, .col-tablet-12 + // .d-mobile-none, .d-desktop-block, .d-phone-flex + // .p-mobile-2, .p-desktop-4, .m-tablet-3 + // ... and all other Bootstrap responsive utilities + // + // Custom Utility Classes: + // .mobile-only, .desktop-only + // .phone-only, .tablet-only + // .hide-mobile, .hide-desktop, .hide-phone, .hide-tablet + // + // ========================================================================== // ========================================================================== // TIER 1 MIXINS: Mobile vs Desktop // ========================================================================== @mixin mobile { - @media (max-width: $bp-mobile-max) { + @media (max-width: #{$bp-desktop - 0.02px}) { @content; } } @mixin desktop { - @media (min-width: $bp-desktop-min) { + @media (min-width: $bp-desktop) { @content; } } // ========================================================================== - // TIER 2 MIXINS: Device-specific + // TIER 2 MIXINS: Device-specific ("only" ranges) // ========================================================================== @mixin phone { - @media (max-width: $bp-phone-max) { + @media (max-width: #{$bp-tablet - 0.02px}) { @content; } } @mixin tablet { - @media (min-width: $bp-tablet-min) and (max-width: $bp-tablet-max) { - @content; - } - } - - @mixin tablet-up { - @media (min-width: $bp-tablet-min) { - @content; - } - } - - @mixin tablet-down { - @media (max-width: $bp-tablet-max) { + @media (min-width: $bp-tablet) and (max-width: #{$bp-desktop - 0.02px}) { @content; } } @mixin desktop-sm { - @media (min-width: $bp-desktop-sm-min) and (max-width: $bp-desktop-sm-max) { - @content; - } - } - - @mixin desktop-sm-up { - @media (min-width: $bp-desktop-sm-min) { + @media (min-width: $bp-desktop) and (max-width: #{$bp-desktop-md - 0.02px}) { @content; } } @mixin desktop-md { - @media (min-width: $bp-desktop-md-min) and (max-width: $bp-desktop-md-max) { - @content; - } - } - - @mixin desktop-md-up { - @media (min-width: $bp-desktop-md-min) { + @media (min-width: $bp-desktop-md) and (max-width: #{$bp-desktop-lg - 0.02px}) { @content; } } @mixin desktop-lg { - @media (min-width: $bp-desktop-lg-min) { + @media (min-width: $bp-desktop-lg) { + @content; + } + } + + // ========================================================================== + // TIER 2 MIXINS: "and up" ranges + // ========================================================================== + + @mixin tablet-up { + @media (min-width: $bp-tablet) { + @content; + } + } + + @mixin tablet-down { + @media (max-width: #{$bp-desktop - 0.02px}) { + @content; + } + } + + @mixin desktop-sm-up { + @media (min-width: $bp-desktop) { + @content; + } + } + + @mixin desktop-md-up { + @media (min-width: $bp-desktop-md) { + @content; + } + } + + @mixin desktop-lg-up { + @media (min-width: $bp-desktop-lg) { @content; } } @@ -155,6 +214,7 @@ CHANGES REQUIRED // UTILITY CLASSES // ========================================================================== + // Tier 1: Mobile/Desktop visibility .mobile-only { @include desktop { display: none !important; @@ -179,6 +239,7 @@ CHANGES REQUIRED } } + // Tier 2: Device-specific visibility .phone-only { @include tablet-up { display: none !important; @@ -209,18 +270,15 @@ CHANGES REQUIRED // ========================================================================== // CSS CUSTOM PROPERTIES (for JavaScript access) // ========================================================================== + // Usage: + // const bp = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--bp-desktop')); + // const isDesktop = window.innerWidth >= bp; :root { - --bp-mobile-max: #{$bp-mobile-max}; - --bp-desktop-min: #{$bp-desktop-min}; - --bp-phone-max: #{$bp-phone-max}; - --bp-tablet-min: #{$bp-tablet-min}; - --bp-tablet-max: #{$bp-tablet-max}; - --bp-desktop-sm-min: #{$bp-desktop-sm-min}; - --bp-desktop-sm-max: #{$bp-desktop-sm-max}; - --bp-desktop-md-min: #{$bp-desktop-md-min}; - --bp-desktop-md-max: #{$bp-desktop-md-max}; - --bp-desktop-lg-min: #{$bp-desktop-lg-min}; + --bp-tablet: #{$bp-tablet}; // 800px + --bp-desktop: #{$bp-desktop}; // 1024px + --bp-desktop-md: #{$bp-desktop-md}; // 1700px + --bp-desktop-lg: #{$bp-desktop-lg}; // 2200px } 3. Update variables.scss @@ -235,19 +293,19 @@ CHANGES REQUIRED // Two-tier system: Tier 1 (Mobile vs Desktop) and Tier 2 (Granular devices) // See rsx/theme/responsive.scss for mixins and utilities - // Tier 2: Granular device breakpoints - $bp-phone-max: 799px; - $bp-tablet-min: 800px; - $bp-tablet-max: 1023px; - $bp-desktop-sm-min: 1024px; - $bp-desktop-sm-max: 1699px; - $bp-desktop-md-min: 1700px; - $bp-desktop-md-max: 2199px; - $bp-desktop-lg-min: 2200px; + // Breakpoints define where each tier STARTS + // No -min/-max suffixes; calculate max inline as ($next-breakpoint - 0.02px) + // + // phone: 0px (implicit, viewport < $bp-tablet) + // tablet: 800px (viewport >= 800 and < $bp-desktop) + // desktop-sm: 1024px (viewport >= 1024 and < $bp-desktop-md) + // desktop-md: 1700px (viewport >= 1700 and < $bp-desktop-lg) + // desktop-lg: 2200px (viewport >= 2200) - // Tier 1: Semantic breakpoints (mobile = phone + tablet) - $bp-mobile-max: 1023px; - $bp-desktop-min: 1024px; + $bp-tablet: 800px; + $bp-desktop: 1024px; + $bp-desktop-md: 1700px; + $bp-desktop-lg: 2200px; // Bootstrap grid breakpoints override // Allows: .col-mobile-6, .col-phone-12, .col-tablet-8, .col-desktop-4, etc. @@ -265,6 +323,7 @@ CHANGES REQUIRED Remove any old breakpoint variables like: $breakpoint-sm, $breakpoint-md, $breakpoint-lg, $breakpoint-xl, $breakpoint-2xl + $bp-phone-max, $bp-tablet-min, $bp-tablet-max, $bp-desktop-sm-min, etc. 4. Update Bundle Definitions ------------------------------------------------------------------------- @@ -382,10 +441,8 @@ CONFIGURATION Optional: If you need JavaScript access to breakpoints: const styles = getComputedStyle(document.documentElement); - const desktopMin = styles.getPropertyValue('--bp-desktop-min'); - const isMobile = window.innerWidth <= parseInt( - styles.getPropertyValue('--bp-mobile-max') - ); + const desktopMin = parseInt(styles.getPropertyValue('--bp-desktop')); + const isMobile = window.innerWidth < desktopMin; VERIFICATION