liser/src/modules/display.css

functional css help to optimizing design work and building responsive websites

.dn {
  display: none;
}
.di {
  display: inline;
}
.db {
  display: block;
}
.dib {
  display: inline-block;
}
.dit {
  display: inline-table;
}
.dt {
  display: table;
}
.dtc {
  display: table-cell;
}
.dt-row {
  display: table-row;
}
.dt-row-group {
  display: table-row-group;
}
.dt-column {
  display: table-column;
}
.dt-column-group {
  display: table-column-group;
}

.dt--fixed {
  table-layout: fixed;
  width: 100%;
}

@media screen and (min-width: 30em) {
  .dn-ns {
    display: none;
  }
  .di-ns {
    display: inline;
  }
  .db-ns {
    display: block;
  }
  .dib-ns {
    display: inline-block;
  }
  .dit-ns {
    display: inline-table;
  }
  .dt-ns {
    display: table;
  }
  .dtc-ns {
    display: table-cell;
  }
  .dt-row-ns {
    display: table-row;
  }
  .dt-row-group-ns {
    display: table-row-group;
  }
  .dt-column-ns {
    display: table-column;
  }
  .dt-column-group-ns {
    display: table-column-group;
  }

  .dt--fixed-ns {
    table-layout: fixed;
    width: 100%;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .dn-m {
    display: none;
  }
  .di-m {
    display: inline;
  }
  .db-m {
    display: block;
  }
  .dib-m {
    display: inline-block;
  }
  .dit-m {
    display: inline-table;
  }
  .dt-m {
    display: table;
  }
  .dtc-m {
    display: table-cell;
  }
  .dt-row-m {
    display: table-row;
  }
  .dt-row-group-m {
    display: table-row-group;
  }
  .dt-column-m {
    display: table-column;
  }
  .dt-column-group-m {
    display: table-column-group;
  }

  .dt--fixed-m {
    table-layout: fixed;
    width: 100%;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .dn-ml {
    display: none;
  }
  .di-ml {
    display: inline;
  }
  .db-ml {
    display: block;
  }
  .dib-ml {
    display: inline-block;
  }
  .dit-ml {
    display: inline-table;
  }
  .dt-ml {
    display: table;
  }
  .dtc-ml {
    display: table-cell;
  }
  .dt-row-ml {
    display: table-row;
  }
  .dt-row-group-ml {
    display: table-row-group;
  }
  .dt-column-ml {
    display: table-column;
  }
  .dt-column-group-ml {
    display: table-column-group;
  }

  .dt--fixed-ml {
    table-layout: fixed;
    width: 100%;
  }
}

@media screen and (min-width: 60em) {
  .dn-l {
    display: none;
  }
  .di-l {
    display: inline;
  }
  .db-l {
    display: block;
  }
  .dib-l {
    display: inline-block;
  }
  .dit-l {
    display: inline-table;
  }
  .dt-l {
    display: table;
  }
  .dtc-l {
    display: table-cell;
  }
  .dt-row-l {
    display: table-row;
  }
  .dt-row-group-l {
    display: table-row-group;
  }
  .dt-column-l {
    display: table-column;
  }
  .dt-column-group-l {
    display: table-column-group;
  }

  .dt--fixed-l {
    table-layout: fixed;
    width: 100%;
  }
}