Sources & Maintenance
Web Sources
Code Sources
| Topic | Source Location | Description |
|---|---|---|
| Design System Recognition Guide | Foundation Layer: Design Tokens | Framework for identifying design system layers (tokens, atoms, molecules, organisms) |
| Bootstrap Variables Source | /core/scss/_variables.scss |
All Bootstrap SCSS variables |
| Bootstrap Maps Source | /core/scss/_maps.scss |
Bootstrap SCSS maps ($theme-colors, $spacers, etc.) |
| Bootstrap Mixins Source | /core/scss/mixins/_*.scss |
Bootstrap SCSS mixins (buttons, breakpoints, etc.) |
| Bootstrap Utilities Source | /core/scss/_utilities.scss |
Bootstrap utility definitions |
| Bootstrap Utilities API | /core/scss/utilities/_api.scss |
Utility generation system |
Maintenance Notes
Update Triggers: - Bootstrap major version releases (5.x → 6.x) - Bootstrap minor version releases with new features (5.3 → 5.4) - Changes to utility API structure - New Bootstrap components or patterns - Updates to Design System Recognition Guide - Changes to SCSS best practices or methodology - Dart Sass version updates with new features - CSS specification changes affecting best practices - Accessibility standard updates (WCAG revisions)
Version Dependencies: - Bootstrap 5.3.x (current at guide creation) - Dart Sass 1.27.0+ (LibSass deprecated - NOT supported) - Node.js-based build systems (Webpack 5+, Vite 4+, Gulp 4+) - PurgeCSS 5.0+ for production optimization
Research Methodology: - Annual review of Bootstrap best practices (January each year) - Quarterly scan of CSS thought leaders (Kevin Powell, Josh Comeau, Smashing Magazine, CSS-Tricks) - Bootstrap official blog monitoring for feature announcements - Accessibility standards monitoring (WCAG updates)
Version History: - v2.1 (2026-02-12): Added opinionated best practices from 2025-2026 research; expanded @extend warnings, !important anti-patterns, Dart Sass requirements, map manipulation gotchas, performance optimization, accessibility guidance - v2.0 (2026-02-12): Initial comprehensive guide with 6px threshold framework
Related Guides: - Design System Recognition Guide - Identifying design system layers before mapping - SDC Guide Family (if creating SDC components) - Single Directory Components implementation
Guide Purpose: Comprehensive Bootstrap 5.3 mapping guide that incorporates the 6px threshold decision framework, Bootstrap accommodation methodology, SCSS best practices (including anti-patterns to avoid), and implementation strategies for design system elements identified via Design System Recognition Guide. Enhanced with opinionated guidance from industry experts and real-world experience (2025-2026).
Framework Philosophy: Work WITH Bootstrap's architecture (variables, maps, mixins, utility API) rather than against it. Maximize ecosystem compatibility while maintaining design system integrity through systematic decision-making. This guide tells you WHAT TO DO and WHY — not just HOW (which Bootstrap docs already cover).
Key Principles: - Research Bootstrap capabilities first (variables, maps, mixins, utilities) - Apply 6px threshold framework for systematic decisions - Use proper SCSS practices (no @extend with Bootstrap classes, no !important reactively, no hardcoded values) - Understand WHY practices matter (not just rules to follow) - Choose appropriate decision category (ACCOMMODATE, EXTEND, CUSTOMIZE, CREATE) - Document all mapping decisions with clear rationale - Prioritize accessibility and performance in all implementations
Framework Origins: This guide incorporates methodology originally developed as the "Universal Bootstrap Accommodation Framework," now fully integrated for streamlined reference. Enhanced with best practices research from Bootstrap official documentation, Smashing Magazine, CSS-Tricks, Sass official documentation, and accessibility compliance resources.