Sircus

Install

npm install sircus-tools-display sircus-variables

CSS import

@import "sircus-tools-display";
@import "sircus-tools-display/responsive";
@import "sircus-variables";

CSS

/*
 * sircus-tools-display
 ================================================== */
.t-none        { display: none !important; }
.t-block       { display: block !important; }
.t-flex        { display: flex !important; }
.t-inlineBlock { display: inline-block !important; }
.t-inline      { display: inline !important; }
.t-table       { display: table !important; }
.t-tableCell   { display: table-cell !important; }

Responsive CSS

@media (--viewport-sm) {
  .t-sm-none        { display: none !important; }
  .t-sm-block       { display: block !important; }
  .t-sm-flex        { display: flex !important; }
  .t-sm-inlineBlock { display: inline-block !important; }
  .t-sm-inline      { display: inline !important; }
  .t-sm-table       { display: table !important; }
  .t-sm-tableCell   { display: table-cell !important; }
}

@media (--viewport-md) {
  .t-md-none        { display: none !important; }
  .t-md-block       { display: block !important; }
  .t-md-flex        { display: flex !important; }
  .t-md-inlineBlock { display: inline-block !important; }
  .t-md-inline      { display: inline !important; }
  .t-md-table       { display: table !important; }
  .t-md-tableCell   { display: table-cell !important; }
}

@media (--viewport-lg) {
  .t-lg-none        { display: none !important; }
  .t-lg-block       { display: block !important; }
  .t-lg-flex        { display: flex !important; }
  .t-lg-inlineBlock { display: inline-block !important; }
  .t-lg-inline      { display: inline !important; }
  .t-lg-table       { display: table !important; }
  .t-lg-tableCell   { display: table-cell !important; }
}