Text

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

Examples (anchor)

Font sizes (anchor)

.fs-h1

The quick brown fox jumps over the lazy dog.

.fs-h2

The quick brown fox jumps over the lazy dog.

.fs-h3

The quick brown fox jumps over the lazy dog.

.fs-h4

The quick brown fox jumps over the lazy dog.

.fs-h5

The quick brown fox jumps over the lazy dog.

.fs-h6

The quick brown fox jumps over the lazy dog.

.fs-xxs

The quick brown fox jumps over the lazy dog.

.fs-xs

The quick brown fox jumps over the lazy dog.

.fs-sm

The quick brown fox jumps over the lazy dog.

.fs-body

The quick brown fox jumps over the lazy dog.

.fs-lg

The quick brown fox jumps over the lazy dog.

.fs-xl

The quick brown fox jumps over the lazy dog.

.fs-xxl

The quick brown fox jumps over the lazy dog.

Font weights (anchor)

The availability of the font weight utilities depends on matching weights in the font family used.

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

.text-center

The quick brown fox.

.text-right

The quick brown fox.

.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 classes include no preset values to enable customizing styles inline.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

To simplify customizing both the .text-spacing utility includes letter and word spacing property variables:

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

Text colors (anchor)

Fixed color .text-white and .text-black utilities.

White text Black text

Links (anchor)

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

Decoration none
Text link

Using the modules (anchor)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin(s) 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 links-utilities-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;
}

Source code (anchor)

See customizing for information about using the Sass and CSS variables in the source code to customize the styles, and Sass functionality (on the using StyleMods page) for other ways to use the variables to create custom styles.

text.scss

// ---------------------------------------------------------- 
// Text
// ----------------------------------------------------------
// Font sizes
$font-size-xxs:       0.75rem !default;
$font-size-xs:        0.875rem !default;
$font-size-sm:        0.938rem !default;
$font-size-body:      1rem !default;
$font-size-lg:        1.063rem !default;
$font-size-xl:        1.125rem !default;
$font-size-xxl:       1.25rem !default;
$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;

// Maps
$font-sizes: (
  "xxs": $font-size-xxs,
  "xs": $font-size-xs,
  "sm": $font-size-sm,
  "body": $font-size-body,
  "lg": $font-size-lg,
  "xl": $font-size-xl,
  "xxl": $font-size-xxl,
  "h1": $font-size-h1,
  "h2": $font-size-h2,
  "h3": $font-size-h3,
  "h4": $font-size-h4,
  "h5": $font-size-h5,
  "h6": $font-size-h6,
) !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 links-utilities-css {
  .decoration-none {
    text-decoration: none;
  }
  
  .text-link {
    color: CanvasText;
    text-decoration-color: CanvasText;
  }
}

@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 links-utilities-css;
}

// 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-lg-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};        
    }
  }
}