MaxMilton/ekscss

/**
 * DISPLAY
 *
 * .<RESPONSIVE><BASE><MOD>
 *
 * RESPONSIVE:
 *      = (no prefix) default small
 *   ns- = not small screen breakpoint; anything medium or bigger
 *   m- = medium screen breakpoint
 *   l- = large screen breakpoint
 *
 * BASE:
 *   d = display
 *
 * MOD:
 *   n = none
 *   b = block
 *   i = inline
 *   ib = inline block
 *   f = flex
 *   if = inline flex
 *   g = grid
 *   ig = inline grid
 */

/* stylelint-disable a11y/no-display-none */

.dn { display: none; }
.db { display: block; }
.di { display: inline; }
.dib { display: inline-block; }
.df { display: flex; }
.dif { display: inline-flex; }
.dg { display: grid; }
.dig { display: inline-grid; }

${x.fn.each(x.media, (bp, query) => xcss`
  @media ${query} {
    .${bp}-dn { display: none; }
    .${bp}-db { display: block; }
    .${bp}-di { display: inline; }
    .${bp}-dib { display: inline-block; }
    .${bp}-df { display: flex; }
    .${bp}-dif { display: inline-flex; }
    .${bp}-dg { display: grid; }
    .${bp}-dig { display: inline-grid; }
  }
`)}