Order

Order utilities to arrange flex or grid containers with module mixins for responsive modifiers.

Utilities (anchor)

Order utility names and property values
Utility name	Property values
.order-first	order: calc(-infinity)
.order-last	order: calc(infinity)
.order-0	order: 0
.order-1	order: 1
.order-2	order: 2
.order-3	order: 3
.order-4	order: 4
.order-5	order: 5
.order-initial	order: initial
.order-inline	order: var(--order)

Responsive mixins (anchor)

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

.order-1
.order-1-xxl
.order-1-xl
.order-1-lg
.order-1-md
.order-1-sm
.order-1-xs
.order-1-xxs

Using the module (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 anywhere below.

custom.scss

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

// Example breakpoint
@media (max-width: 480px) {
  @include order-sm-css;
}

Source code (anchor)

order.scss

//  ------------------------------------------------------------
//  Order
//  ------------------------------------------------------------
$order-first:   calc(-infinity) !default;
$order-last:    calc(infinity) !default;
$order-0:       0 !default;
$order-1:       1 !default;
$order-2:       2 !default;
$order-3:       3 !default;
$order-4:       4 !default;
$order-5:       5 !default;
$order-none:    initial !default;
$order-inline:  var(--order) !default;

$order-values: (
  "first": $order-first,
  "last": $order-last,
  "0": $order-0,
  "1": $order-1,
  "2": $order-2,
  "3": $order-3,
  "4": $order-4,
  "5": $order-5,
  "none": $order-none,
  "inline": $order-inline,
) !default;

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

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

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

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

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

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

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

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