SCSS + Bootstrap snippets. Utilities and custom font scaling mechanism. Variables in separate file.

font-scaling.scss

// Custom font scaling mechanism.
// 
// This allows keeping a standardized base font size (e.g. 16px ~ 1rem),
// but applying custom scales for anything that is not regular text flow.

// Font scale factors (here large Desktop set as base scale).
$font-breakpoints: (
  xs: 0.65,
  sm: 0.7,
  md: 0.75,
  lg: 0.8,
  xl: 0.85,
  xxl: 0.9,
  xxxl: 1,
);

@each $size, $scale in $font-breakpoints {
  @include media-breakpoint-up(#{$size}) {
    :root {
      --font-scale-factor: #{$scale};
    }
  }
}

.example {
  font-size: calc(1.5 * var(--body-font-size) * var(--font-scale-factor));
}


// DETAILS + EXPLANATIONS
// 
// Useful for
// - Graphic-heavy design, decorative large typography, that needs a certain accuracy
//   of where things go and how they scale. Layout might not be designed to exceed the intended scales.
// - Decorative large font sizes that go well beyond typical h1-h6 definitions.
// - Text that cannot use hyphens or wrapping, as it might break them.
// - Text parts that might break the layout in certain situations.
// - Translations that might considerably affect text length.
// 
// Not so useful for
// - Text that is dynamic or changes more often
// - Translations in many different languages
// 
// ---
// 
// Note on text and fluid design
// - Varying browser implementations on how text might break or apply hyphens, it's hard to control if words will fit in a given layout range or wrap unwanted.
//   With a graphic heavy design and very large typography, this can become a concern as an elements' height might change considerably, affecting other elements around it.
// - In fluid design that goes beyond the target breakpoints, sometimes an intermediate scale might need adjustment.

general.scss

// SASS map example: Merge Bootstrap container size with own.
//
// Find variables in separate file nearby.

@use "sass:map";

@include media-breakpoint-up(sm) {
  .example {
    max-width: (map.get($container-max-widths, md) + 1rem);
  }
}

variables.scss

// Standalone and with other demonstrated files.

/*
 * Botstrap extension: Added breakpoint and spacer ability.
 * - Add size 'XXXL'
 */

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  xxxl: 2048px,
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
  xxxl: 1920px,
);


// For m|p-* utility classes
// Linear progression except largest step

$spacer: 1rem;

$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer * 1,
  4: $spacer * 1.5,
  5: $spacer * 2,
  6: $spacer * 2.5,
  7: $spacer * 3,
  8: $spacer * 3.5,
  9: $spacer * 4,
  10: $spacer * 4.5,
  20: $spacer * 10,
);