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)

Utility classes for font weights 100 to 900 are included but depend on the availability of the matching weight in the font family used. The examples use the minimalist StyleMods typography font stack so some weights below will appear the same.

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

The quick brown fox jumped over the lazy dog.

Text-transform (anchor)

The quick brown fox jumped over the lazy dog.

Font-variant (anchor)

The quick brown fox jumped over the lazy dog.

Letter and word spacing (anchor)

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 (background colors included for example only).

.text-white .text-black

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.85rem !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 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-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};        
    }
  }
}

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