Display

Basic block and flex display utilities, static only with no responsive modifiers.

Examples

.block {
  display: block;
}
  
.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}
  
.flex-wrap-none {
  flex-wrap: nowrap;
}

Using the module

Add the sassmods.scss to your custom styles as below then include the Sass mixin anywhere below.

@use "sassmods/scss/sassmods" as *;
@include display-css;

Using the framework

Enable the module in the sassmods-system.scss document as below.

$enable-display: true;

Source

The source code is a self-contained Sass document that compiles the style module as a Sass mixin.

Source

//  ------------------------------------------------------------
//  Block and flex display
//  ------------------------------------------------------------

@mixin display-css {

.block {
  display: block;
}
  
.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}
  
.flex-wrap-none {
  flex-wrap: nowrap;
}
  
} // end flex-css