liser/src/modules/border-widths.css

functional css help to optimizing design work and building responsive websites

.bw0 {
  border-width: 0;
}
.bw1 {
  border-width: 0.125rem;
}
.bw2 {
  border-width: 0.25rem;
}
.bw3 {
  border-width: 0.5rem;
}
.bw4 {
  border-width: 1rem;
}
.bw5 {
  border-width: 2rem;
}

.bt-0 {
  border-top-width: 0;
}
.br-0 {
  border-right-width: 0;
}
.bb-0 {
  border-bottom-width: 0;
}
.bl-0 {
  border-left-width: 0;
}

@media screen and (min-width: 30em) {
  .bw0-ns {
    border-width: 0;
  }
  .bw1-ns {
    border-width: 0.125rem;
  }
  .bw2-ns {
    border-width: 0.25rem;
  }
  .bw3-ns {
    border-width: 0.5rem;
  }
  .bw4-ns {
    border-width: 1rem;
  }
  .bw5-ns {
    border-width: 2rem;
  }
  .bt-0-ns {
    border-top-width: 0;
  }
  .br-0-ns {
    border-right-width: 0;
  }
  .bb-0-ns {
    border-bottom-width: 0;
  }
  .bl-0-ns {
    border-left-width: 0;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .bw0-m {
    border-width: 0;
  }
  .bw1-m {
    border-width: 0.125rem;
  }
  .bw2-m {
    border-width: 0.25rem;
  }
  .bw3-m {
    border-width: 0.5rem;
  }
  .bw4-m {
    border-width: 1rem;
  }
  .bw5-m {
    border-width: 2rem;
  }
  .bt-0-m {
    border-top-width: 0;
  }
  .br-0-m {
    border-right-width: 0;
  }
  .bb-0-m {
    border-bottom-width: 0;
  }
  .bl-0-m {
    border-left-width: 0;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .bw0-ml {
    border-width: 0;
  }
  .bw1-ml {
    border-width: 0.125rem;
  }
  .bw2-ml {
    border-width: 0.25rem;
  }
  .bw3-ml {
    border-width: 0.5rem;
  }
  .bw4-ml {
    border-width: 1rem;
  }
  .bw5-ml {
    border-width: 2rem;
  }
  .bt-0-ml {
    border-top-width: 0;
  }
  .br-0-ml {
    border-right-width: 0;
  }
  .bb-0-ml {
    border-bottom-width: 0;
  }
  .bl-0-ml {
    border-left-width: 0;
  }
}

@media screen and (min-width: 60em) {
  .bw0-l {
    border-width: 0;
  }
  .bw1-l {
    border-width: 0.125rem;
  }
  .bw2-l {
    border-width: 0.25rem;
  }
  .bw3-l {
    border-width: 0.5rem;
  }
  .bw4-l {
    border-width: 1rem;
  }
  .bw5-l {
    border-width: 2rem;
  }
  .bt-0-l {
    border-top-width: 0;
  }
  .br-0-l {
    border-right-width: 0;
  }
  .bb-0-l {
    border-bottom-width: 0;
  }
  .bl-0-l {
    border-left-width: 0;
  }
}