Block

Simple block and inline block display utility classes with module mixins for responsive modifiers.

Utilities (anchor)

Block utilities
Utility name	Property values
.block	display: block
.inline	display: inline
.block-inline	display: inline-block

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:

.block
.block-xxl
.block-xl
.block-lg
.block-md
.block-sm
.block-xs
.block-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 block-css;

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

Source code (anchor)

block.scss

//  ------------------------------------------------------------
//  Block
//  ------------------------------------------------------------

@mixin block-css {
  .block {
    display: block;
  }
  
  .block-inline {
    display: inline-block;
  }
}

@mixin block-xxl-css {
  .block-xxl {
    display: block;
  }
  
  .block-inline-xxl {
    display: inline-block;
  }
}

@mixin block-xl-css {
  .block-xl {
    display: block;
  }
  
  .block-inline-xl {
    display: inline-block;
  }
}

@mixin block-lg-css {
  .block-lg {
    display: block;
  }
  
  .block-inline-lg {
    display: inline-block;
  }
}

@mixin block-md-css {
  .block-md {
    display: block;
  }
  
  .block-inline-md {
    display: inline-block;
  }
}

@mixin block-sm-css {
  .block-sm {
    display: block;
  }
  
  .block-inline-sm {
    display: inline-block;
  }
}

@mixin block-xs-css {
  .block-xs {
    display: block;
  }
  
  .block-inline-xs {
    display: inline-block;
  }
}

@mixin block-xxs-css {
  .block-xxs {
    display: block;
  }
  
  .block-inline-xxs {
    display: inline-block;
  }
}