liser/src/modules/max-widths.css

functional css help to optimizing design work and building responsive websites

/* Max Width Scale */

.mw1 {
  max-width: 1rem;
}
.mw1s {
  max-width: 1.5rem;
}
.mw2 {
  max-width: 2rem;
}
.mw2s {
  max-width: 3rem;
}
.mw3 {
  max-width: 4rem;
}
.mw3s {
  max-width: 6rem;
}
.mw4 {
  max-width: 8rem;
}
.mw4s {
  max-width: 12rem;
}
.mw5 {
  max-width: 16rem;
}
.mw5s {
  max-width: 24rem;
}
.mw6 {
  max-width: 32rem;
}
.mw6s {
  max-width: 40rem;
}
.mw7 {
  max-width: 48rem;
}
.mw7s {
  max-width: 56rem;
}
.mw8 {
  max-width: 64rem;
}
.mw8s {
  max-width: 80rem;
}
.mw9 {
  max-width: 96rem;
}

/* Max Width String Properties */

.mw-none {
  max-width: none;
}

@media screen and (min-width: 30em) {
  .mw1-ns {
    max-width: 1rem;
  }
  .mw1s-ns {
    max-width: 1.5rem;
  }
  .mw2-ns {
    max-width: 2rem;
  }
  .mw2s-ns {
    max-width: 3rem;
  }
  .mw3-ns {
    max-width: 4rem;
  }
  .mw3s-ns {
    max-width: 6rem;
  }
  .mw4-ns {
    max-width: 8rem;
  }
  .mw4s-ns {
    max-width: 12rem;
  }
  .mw5-ns {
    max-width: 16rem;
  }
  .mw5s-ns {
    max-width: 24rem;
  }
  .mw6-ns {
    max-width: 32rem;
  }
  .mw6s-ns {
    max-width: 40rem;
  }
  .mw7-ns {
    max-width: 48rem;
  }
  .mw7s-ns {
    max-width: 56rem;
  }
  .mw8-ns {
    max-width: 64rem;
  }
  .mw8s-ns {
    max-width: 80rem;
  }
  .mw9-ns {
    max-width: 96rem;
  }

  .mw-none-ns {
    max-width: none;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .mw1-m {
    max-width: 1rem;
  }
  .mw1s-m {
    max-width: 1.5rem;
  }
  .mw2-m {
    max-width: 2rem;
  }
  .mw2s-m {
    max-width: 3rem;
  }
  .mw3-m {
    max-width: 4rem;
  }
  .mw3s-m {
    max-width: 6rem;
  }
  .mw4-m {
    max-width: 8rem;
  }
  .mw4s-m {
    max-width: 12rem;
  }
  .mw5-m {
    max-width: 16rem;
  }
  .mw5s-m {
    max-width: 24rem;
  }
  .mw6-m {
    max-width: 32rem;
  }
  .mw6s-m {
    max-width: 40rem;
  }
  .mw7-m {
    max-width: 48rem;
  }
  .mw7s-m {
    max-width: 56rem;
  }
  .mw8-m {
    max-width: 64rem;
  }
  .mw8s-m {
    max-width: 80rem;
  }
  .mw9-m {
    max-width: 96rem;
  }

  .mw-none-m {
    max-width: none;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .mw1-ml {
    max-width: 1rem;
  }
  .mw1s-ml {
    max-width: 1.5rem;
  }
  .mw2-ml {
    max-width: 2rem;
  }
  .mw2s-ml {
    max-width: 3rem;
  }
  .mw3-ml {
    max-width: 4rem;
  }
  .mw3s-ml {
    max-width: 6rem;
  }
  .mw4-ml {
    max-width: 8rem;
  }
  .mw4s-ml {
    max-width: 12rem;
  }
  .mw5-ml {
    max-width: 16rem;
  }
  .mw5s-ml {
    max-width: 24rem;
  }
  .mw6-ml {
    max-width: 32rem;
  }
  .mw6s-ml {
    max-width: 40rem;
  }
  .mw7-ml {
    max-width: 48rem;
  }
  .mw7s-ml {
    max-width: 56rem;
  }
  .mw8-ml {
    max-width: 64rem;
  }
  .mw8s-ml {
    max-width: 80rem;
  }
  .mw9-ml {
    max-width: 96rem;
  }

  .mw-none-ml {
    max-width: none;
  }
}

@media screen and (min-width: 60em) {
  .mw1-l {
    max-width: 1rem;
  }
  .mw1s-l {
    max-width: 1.5rem;
  }
  .mw2-l {
    max-width: 2rem;
  }
  .mw2s-l {
    max-width: 3rem;
  }
  .mw3-l {
    max-width: 4rem;
  }
  .mw3s-l {
    max-width: 6rem;
  }
  .mw4-l {
    max-width: 8rem;
  }
  .mw4s-l {
    max-width: 12rem;
  }
  .mw5-l {
    max-width: 16rem;
  }
  .mw5s-l {
    max-width: 24rem;
  }
  .mw6-l {
    max-width: 32rem;
  }
  .mw6s-l {
    max-width: 40rem;
  }
  .mw7-l {
    max-width: 48rem;
  }
  .mw7s-l {
    max-width: 56rem;
  }
  .mw8-l {
    max-width: 64rem;
  }
  .mw8s-l {
    max-width: 80rem;
  }
  .mw9-l {
    max-width: 96rem;
  }

  .mw-none-l {
    max-width: none;
  }
}