liser/build/liser.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; }
}