liser/src/modules/utilities.css

functional css help to optimizing design work and building responsive websites

/* Equivalent to .overflow-y-scroll */
.overflow-container {
  overflow-y: scroll;
}

.center {
  margin-right: auto;
  margin-left: auto;
}
.center-box {
  margin: 0 auto;
}
.mr-auto {
  margin-right: auto;
}
.ml-auto {
  margin-left: auto;
}

@media screen and (min-width: 30em) {
  .center-ns {
    margin-right: auto;
    margin-left: auto;
  }
  .center-box-ns {
    margin: 0 auto;
  }
  .mr-auto-ns {
    margin-right: auto;
  }
  .ml-auto-ns {
    margin-left: auto;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .center-m {
    margin-right: auto;
    margin-left: auto;
  }
  .center-box-m {
    margin: 0 auto;
  }
  .mr-auto-m {
    margin-right: auto;
  }
  .ml-auto-m {
    margin-left: auto;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .center-ml {
    margin-right: auto;
    margin-left: auto;
  }
  .center-box-ml {
    margin: 0 auto;
  }
  .mr-auto-ml {
    margin-right: auto;
  }
  .ml-auto-ml {
    margin-left: auto;
  }
}

@media screen and (min-width: 60em) {
  .center-l {
    margin-right: auto;
    margin-left: auto;
  }
  .center-box-l {
    margin: 0 auto;
  }
  .mr-auto-l {
    margin-right: auto;
  }
  .ml-auto-l {
    margin-left: auto;
  }
}