Columns

Variable utility and numbered columns classes with module mixins for responsive modifiers.

Utilities (anchor)

Column utility names and property values
Utility name	Property values
.columns	columns: var(--cols)
.columns-1	columns: 1
.columns-2	columns: 2
.columns-3	columns: 3
.columns-4	columns: 4
.columns-5	columns: 5
.columns-6	columns: 6
.columns-7	columns: 7
.columns-8	columns: 8
.columns-9	columns: 9
.columns-10	columns: 10
.columns-11	columns: 11
.columns-12	columns: 12

Responsive mixins (anchor)

Responsive modifier mixins are provided for the column values utilities to include where required in custom breakpoints, the utilities available use the following modifier class naming convention:

.columns-3
.columns-3-xxl
.columns-3-xl
.columns-3-lg
.columns-3-md
.columns-3-sm
.columns-3-xs
.columns-3-xxs

Examples (anchor)

Variable columns (anchor)

The .columns class is a variable utility for customizing column values inline, single values can be used for column numbers and widths or both can be included for combined styling. Column gap properties work but row gap ones do not.

Far far away, behind the word mountains, close to the lands of Verbia, there live the blind texts. Separated they live in Nountown right at the coast of the Semantics, a large language ocean. One day however a small line of blind text decided to leave for the far World of Grammar. When she reached the first hills of the Italic Mountains, she had a last view of Alphabet Village and the winding Autocorrect River that ran through it.

Preset columns (anchor)

The col-* values utilities provide 12 preset numbered columns with optional responsive modifier classes for controlled design in custom breakpoints (see Using the module below).

You can also use the responsive columns to override values provided using the .columns utility at custom breakpoints.

Using the module (anchor)

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

custom.scss

@use "stylemods/scss" as *;
@include columns-css;

// Example breakpoint
@media (width <= 480px) {
  @include columns-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 (and required breakpoints) in an overrides document:

overrides.scss

@use "stylemods/scss/configuration" as *;
$enable-columns:      true;
$enable-columns-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 framework use the same source code, see Sass variables on the customizing page to learn how to customize the default column values included.

columns.scss

// ---------------------------------------------------------- 
// Columns
// ----------------------------------------------------------
$column-values: 12 !default;

@mixin columns-css {
  .columns {
    columns: var(--cols);
  }
  
  @for $value from 1 through $column-values {
    .columns-#{$value} {
      columns: $value;
    }
  }
}

@mixin columns-xxl-css {
  @for $value from 1 through $column-values {
    .columns-#{$value}-xxl {
      columns: $value;
    }
  }
}

@mixin columns-xl-css {
  @for $value from 1 through $column-values {
    .columns-#{$value}-xl {
      columns: $value;
    }
  }
}

@mixin columns-lg-css {
  @for $value from 1 through $column-values {
    .columns-#{$value}-lg {
      columns: $value;
    }
  }
}

@mixin columns-md-css {
  @for $value from 1 through $column-values {
    .columns-#{$value}-md {
      columns: $value;
    }
  }
}

@mixin columns-sm-css {
  @for $value from 1 through $column-values {
    .columns-#{$value}-sm {
      columns: $value;
    }
  }
}

@mixin columns-xs-css {
  @for $value from 1 through $column-values {
    .columns-#{$value}-xs {
      columns: $value;
    }
  }
}

@mixin columns-xxs-css {
  @for $value from 1 through $column-values {
    .columns-#{$value}-xxs {
      columns: $value;
    }
  }
}