brianhansonxyz/rspade_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update responsive breakpoint migration guide with correct variable convention

Browse Source 
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
root
2025-12-19 01:22:13 +00:00
parent f67c88a4f1
commit 7781aab39f
1 changed files with 120 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
app/RSpade/upstream_changes/responsive_12_18.txt
View File

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