Text

Basic text utility modifiers with module mixins for compiling responsive modifier classes.

Examples (anchor)

Font sizes (anchor)

.fs-1 (0.75rem)

The quick brown fox jumps over the lazy dog.

.fs-2 (0.85rem)

The quick brown fox jumps over the lazy dog.

.fs-3 (0.938rem)

The quick brown fox jumps over the lazy dog.

.fs-4 (1rem)

The quick brown fox jumps over the lazy dog.

.fs-5 (1.063rem)

The quick brown fox jumps over the lazy dog.

.fs-6 (1.125rem)

The quick brown fox jumps over the lazy dog.

.fs-7 (1.25rem)

The quick brown fox jumps over the lazy dog.

Heading font sizes (anchor)

.fs-h1 (2.125rem)

Heading size 1

.fs-h2 (1.75rem)

Heading size 2

.fs-h3 (1.5rem)

Heading size 3

.fs-h4 (1.375rem)

Heading size 4

.fs-h5 (1.25rem)

Heading size 5

.fs-h6 (1.063rem)

Heading size 6

Display font sizes (anchor)

.fs-display-1 (2.5rem)

Display 1

.fs-display-2 (2.5rem)

Display 2

.fs-display-3 (2.5rem)

Display 3

.fs-display-4 (2.5rem)

Display 4

.fs-display-5 (2.5rem)

Display 5

Font weights (anchor)

Font weight utilities depend on the availability of the matching weight in the font family used, for example the following demos inherit the system fonts included with the typography so some weights below will appear the same depending on the system.

.fw-100

The quick brown fox jumps over the lazy dog.

.fw-200

The quick brown fox jumps over the lazy dog.

.fw-300

The quick brown fox jumps over the lazy dog.

.fw-400

The quick brown fox jumps over the lazy dog.

.fw-500

The quick brown fox jumps over the lazy dog.

.fw-600

The quick brown fox jumps over the lazy dog.

.fw-700

The quick brown fox jumps over the lazy dog.

.fw-800

The quick brown fox jumps over the lazy dog.

.fw-900

The quick brown fox jumps over the lazy dog.

Text alignment and wrap (anchor)

.text-left

The quick brown fox jumped over the lazy dog.

.text-center

The quick brown fox jumped over the lazy dog.

.text-right

The quick brown fox jumped over the lazy dog.

.text-pretty

The quick brown fox jumped over the lazy dog.

.text-balance

The quick brown fox jumped over the lazy dog.

Variable classes (anchor)

The variable text class utilities include no preset default values to enable using them to customize styles inline on-the-fly or combining them with the variables to create custom components in external styles.

Line-height (anchor)

<p class="line-height" style="--lh: 1.1;">

The quick brown fox jumped over the lazy dog.

Text-transform (anchor)

<p class="text-transform" style="--tt: uppercase;">

The quick brown fox jumped over the lazy dog.

Font-variant (anchor)

<p class="font-variant" style="--fv: small-caps;">

The quick brown fox jumped over the lazy dog.

Letter and word spacing (anchor)

<p class="text-spacing" style="--ls: 0.25em;">

The quick brown fox jumped over the lazy dog.

<p class="text-spacing" style="--ws: 0.125em;">

The quick brown fox jumped over the lazy dog.

<p class="text-spacing" style="--ls: 0.125em; --ws: -0.125em;">

The quick brown fox jumped over the lazy dog.

Text colors (anchor)

Fixed color .text-white and .text-black utilities (background colors included for example only).

.text-white .text-black

Link .decoration-none and .text-link color utilities.

Decoration none
Text link

Using the modules (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

The modules can be included individually:

custom.scss 
@use "stylemods/scss" as *;
@include font-sizes-css;
@include font-weights-css;
@include text-align-css;
@include text-wrap-css;
@include text-variable-classes-css;
@include text-colors-css;
@include text-links-css;

Or included grouped together in a single mixin:

custom.scss 
@use "stylemods/scss" as *;
@include text-css;

Font sizes and weights, and text alignment and wrap can also be included in custom breakpoints:

custom.scss 
@use "stylemods/scss" as *;
@include font-sizes-css;
@include font-weights-css;
@include text-align-css;
@include text-wrap-css;

// Example breakpoint
@media (width <= 480px) {
  @include font-sizes-sm-css;
  @include font-weights-sm-css;
  @include text-align-sm-css;
  @include text-wrap-sm-css;
}

See the using modules page for more information including how to compile the modules in cascade layers and include and reuse them in multiple source files.

Using the framework (anchor)

Using the recommended custom setup enable the styles in an overrides document:

overrides.scss 
@use "stylemods/scss/configuration" as *;
$enable-text:       true;
// Breakpoints
$enable-text-lg:    true;
$enable-text-md:    true;
$enable-text-sm:    true;

Include the overrides and the framework styles with your custom document for compiling the framework:

custom.scss 
@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information including how the styles can also be compiled within cascade layers.

Source code (anchor)

The modules and the framework follow the same methods for customizing the default values and using the CSS variables to create custom theme documents. See the customizing page for more information.

text.scss 
// ---------------------------------------------------------- 
// Text
// ----------------------------------------------------------
// Font sizes
$font-size-1:      0.75rem !default;
$font-size-2:      0.85rem !default;
$font-size-3:      0.938rem !default;
$font-size-4:      1rem !default;
$font-size-5:      1.063rem !default;
$font-size-6:      1.125rem !default;
$font-size-7:      1.25rem !default;

// Heading font sizes (replicates typography.scss sizes)
$font-size-h1:     2.125rem !default;
$font-size-h2:     1.75rem !default;
$font-size-h3:     1.5rem !default;
$font-size-h4:     1.375rem !default;
$font-size-h5:     1.25rem !default;
$font-size-h6:     1.063rem !default;

// Display font sizes
$font-size-display-1:   2.5rem !default;
$font-size-display-2:   2.75rem !default;
$font-size-display-3:   3rem !default;
$font-size-display-4:   3.5rem !default;
$font-size-display-5:   4rem !default;

// Maps
$font-sizes: (
  "1": $font-size-1,
  "2": $font-size-2,
  "3": $font-size-3,
  "4": $font-size-4,
  "5": $font-size-5,
  "6": $font-size-6,
  "7": $font-size-7,
  "h1": $font-size-h1,
  "h2": $font-size-h2,
  "h3": $font-size-h3,
  "h4": $font-size-h4,
  "h5": $font-size-h5,
  "h6": $font-size-h6,
  "display-1": $font-size-display-1,
  "display-2": $font-size-display-2,
  "display-3": $font-size-display-3,
  "display-4": $font-size-display-4,
  "display-5": $font-size-display-5,
) !default;

$font-weights: (
  "normal": normal,
  "bold": bold,
  "100": 100,
  "200": 200,
  "300": 300,
  "400": 400,
  "500": 500,
  "600": 600,
  "700": 700,
  "800": 800,
  "900": 900,
) !default;

$text-align: (
  "center": center,
  "left": left,
  "right": right,
) !default;

$text-wrap: (
  "balance": balance,
  "pretty": pretty,
) !default;

// Mixins
@mixin font-sizes-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name} {
      font-size: #{$value};        
    }
  }
}

@mixin font-weights-css {
  @each $name, $value in $font-weights {
    .fw-#{$name} {
      font-weight: #{$value};        
    }
  }
}

@mixin text-align-css {
  @each $name, $value in $text-align {
    .text-#{$name} {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-css {
  @each $name, $value in $text-wrap {
    .text-#{$name} {
      text-wrap: #{$value};        
    }
  }
}

@mixin text-variable-classes-css {
  .line-height {
    line-height: var(--lh);
  }
  
  .text-spacing {
    letter-spacing: var(--ls);
    word-spacing: var(--ws);
  }
  
  .font-variant {
    font-variant: var(--fv);
  }
  
  .text-transform {
    text-transform: var(--tt);
  }
}

@mixin text-colors-css {
  .text-white {
    color: #fff;
  }
  
  .text-black {
    color: #000;
  }
}

@mixin text-links-css {
  .decoration-none {
    text-decoration: none;
  }
  
  .text-link {
    color: CanvasText;
    text-decoration-color: CanvasText;
  }
}

// Breakpoints
// XXL
@mixin font-sizes-xxl-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name}-xxl {
      font-size: #{$value};        
    }
  }
}

@mixin font-weights-xxl-css {
  @each $name, $value in $font-weights {
    .fw-#{$name}-xxl {
      font-weight: #{$value};        
    }
  }
}

@mixin text-align-xxl-css {
  @each $name, $value in $text-align {
    .text-#{$name}-xxl {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-xxl-css {
  @each $name, $value in $text-wrap {
    .text-#{$name}-xxl {
      text-wrap: #{$value};        
    }
  }
}

// XL
@mixin font-sizes-xl-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name}-xl {
      font-size: #{$value};        
    }
  }
}

@mixin font-weights-xl-css {
  @each $name, $value in $font-weights {
    .fw-#{$name}-xl {
      font-weight: #{$value};        
    }
  }
}

@mixin text-align-xl-css {
  @each $name, $value in $text-align {
    .text-#{$name}-xl {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-xl-css {
  @each $name, $value in $text-wrap {
    .text-#{$name}-xl {
      text-wrap: #{$value};        
    }
  }
}

// LG
@mixin font-sizes-lg-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name}-lg {
      font-size: #{$value};        
    }
  }
}

@mixin font-weights-lg-css {
  @each $name, $value in $font-weights {
    .fw-#{$name}-lg {
      font-weight: #{$value};        
    }
  }
}

@mixin text-align-lg-css {
  @each $name, $value in $text-align {
    .text-#{$name}-lg {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-lg-css {
  @each $name, $value in $text-wrap {
    .text-#{$name}-lg {
      text-wrap: #{$value};        
    }
  }
}

// MD
@mixin font-sizes-md-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name}-md {
      font-size: #{$value};        
    }
  }
}

@mixin font-weights-md-css {
  @each $name, $value in $font-weights {
    .fw-#{$name}-md {
      font-weight: #{$value};        
    }
  }
}

@mixin text-align-md-css {
  @each $name, $value in $text-align {
    .text-#{$name}-md {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-md-css {
  @each $name, $value in $text-wrap {
    .text-#{$name}-md {
      text-wrap: #{$value};        
    }
  }
}

// SM
@mixin font-sizes-sm-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name}-sm {
      font-size: #{$value};        
    }
  }
}

@mixin font-weights-sm-css {
  @each $name, $value in $font-weights {
    .fw-#{$name}-sm {
      font-weight: #{$value};        
    }
  }
}

@mixin text-align-sm-css {
  @each $name, $value in $text-align {
    .text-#{$name}-sm {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-sm-css {
  @each $name, $value in $text-wrap {
    .text-#{$name}-sm {
      text-wrap: #{$value};        
    }
  }
}

// XS
@mixin font-sizes-xs-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name}-xs {
      font-size: #{$value};        
    }
  }
}

@mixin font-weights-xs-css {
  @each $name, $value in $font-weights {
    .fw-#{$name}-xs {
      font-weight: #{$value};        
    }
  }
}

@mixin text-align-xs-css {
  @each $name, $value in $text-align {
    .text-#{$name}-xs {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-xs-css {
  @each $name, $value in $text-wrap {
    .text-#{$name}-xs {
      text-wrap: #{$value};        
    }
  }
}

// XXS
@mixin font-sizes-xxs-css {
  @each $name, $value in $font-sizes {
    .fs-#{$name}-xxs {
      font-size: #{$value};        
    }
  }
}

@mixin font-weights-xxs-css {
  @each $name, $value in $font-weights {
    .fw-#{$name}-xxs {
      font-weight: #{$value};        
    }
  }
}

@mixin text-align-xxs-css {
  @each $name, $value in $text-align {
    .text-#{$name}-xxs {
      text-align: #{$value};        
    }
  }
}

@mixin text-wrap-xxs-css {
  @each $name, $value in $text-wrap {
    .text-#{$name}-xxs {
      text-wrap: #{$value};        
    }
  }
}

// Grouped mixins
@mixin text-css {
  @include font-sizes-css;
  @include font-weights-css;
  @include text-align-css;
  @include text-wrap-css;
  @include text-variable-classes-css;
  @include text-colors-css;
  @include text-links-css;
}

@mixin text-xxl-css {
  @include font-sizes-xxl-css;
  @include font-weights-xxl-css;
  @include text-align-xxl-css;
  @include text-wrap-xxl-css;
}

@mixin text-xl-css {
  @include font-sizes-xl-css;
  @include font-weights-xl-css;
  @include text-align-xl-css;
  @include text-wrap-xl-css;
}

@mixin text-lg-css {
  @include font-sizes-lg-css;
  @include font-weights-lg-css;
  @include text-align-lg-css;
  @include text-wrap-lg-css;
}

@mixin text-md-css {
  @include font-sizes-md-css;
  @include font-weights-md-css;
  @include text-align-md-css;
  @include text-wrap-md-css;
}

@mixin text-sm-css {
  @include font-sizes-sm-css;
  @include font-weights-sm-css;
  @include text-align-sm-css;
  @include text-wrap-sm-css;
}

@mixin text-xs-css {
  @include font-sizes-xs-css;
  @include font-weights-xs-css;
  @include text-align-xs-css;
  @include text-wrap-xs-css;
}

@mixin text-xxs-css {
  @include font-sizes-xxs-css;
  @include font-weights-xxs-css;
  @include text-align-xxs-css;
  @include text-wrap-xxs-css;
}