Sircus

width

<div class="t-width1of12">...</div>
<div class="t-width2of12">...</div>
<div class="t-width3of12">...</div>
<div class="t-width4of12">...</div>
<div class="t-width5of12">...</div>
<div class="t-widthHalf">...</div>
<div class="t-width7of12">...</div>
<div class="t-width8of12">...</div>
<div class="t-width9of12">...</div>
<div class="t-width10of12">...</div>
<div class="t-width11of12">...</div>
<div class="t-widthFull">...</div>

Install

npm install sircus-tools-width sircus-variables

CSS import

@import "sircus-tools-width";
@import "sircus-tools-width/responsive";
@import "sircus-variables";

CSS

/*
 * sircus-tools-width
 ================================================== */
.t-width1of12  { width: calc((1 / 12) * 100)% !important; }
.t-width2of12  { width: calc((2 / 12) * 100)% !important; }
.t-width3of12  { width: calc((3 / 12) * 100)% !important; }
.t-width4of12  { width: calc((4 / 12) * 100)% !important; }
.t-width5of12  { width: calc((5 / 12) * 100)% !important; }
.t-width6of12,
.t-widthHalf   { width: calc((6 / 12) * 100)% !important; }
.t-width7of12  { width: calc((7 / 12) * 100)% !important; }
.t-width8of12  { width: calc((8 / 12) * 100)% !important; }
.t-width9of12  { width: calc((9 / 12) * 100)% !important; }
.t-width10of12 { width: calc((10 / 12) * 100)% !important; }
.t-width11of12 { width: calc((11 / 12) * 100)% !important; }
.t-width12of12,
.t-widthFull   { width: calc((12 / 12) * 100)% !important; }

Responsive CSS

@media (--viewport-sm) {
  .t-sm-width1of12  { width: calc((1 / 12) * 100)% !important; }
  .t-sm-width2of12  { width: calc((2 / 12) * 100)% !important; }
  .t-sm-width3of12  { width: calc((3 / 12) * 100)% !important; }
  .t-sm-width4of12  { width: calc((4 / 12) * 100)% !important; }
  .t-sm-width5of12  { width: calc((5 / 12) * 100)% !important; }
  .t-sm-width6of12,
  .t-sm-widthHalf   { width: calc((6 / 12) * 100)% !important; }
  .t-sm-width7of12  { width: calc((7 / 12) * 100)% !important; }
  .t-sm-width8of12  { width: calc((8 / 12) * 100)% !important; }
  .t-sm-width9of12  { width: calc((9 / 12) * 100)% !important; }
  .t-sm-width10of12 { width: calc((10 / 12) * 100)% !important; }
  .t-sm-width11of12 { width: calc((11 / 12) * 100)% !important; }
  .t-sm-width12of12,
  .t-sm-widthFull   { width: calc((12 / 12) * 100)% !important; }
}

@media (--viewport-md) {
  .t-md-width1of12  { width: calc((1 / 12) * 100)% !important; }
  .t-md-width2of12  { width: calc((2 / 12) * 100)% !important; }
  .t-md-width3of12  { width: calc((3 / 12) * 100)% !important; }
  .t-md-width4of12  { width: calc((4 / 12) * 100)% !important; }
  .t-md-width5of12  { width: calc((5 / 12) * 100)% !important; }
  .t-md-width6of12,
  .t-md-widthHalf   { width: calc((6 / 12) * 100)% !important; }
  .t-md-width7of12  { width: calc((7 / 12) * 100)% !important; }
  .t-md-width8of12  { width: calc((8 / 12) * 100)% !important; }
  .t-md-width9of12  { width: calc((9 / 12) * 100)% !important; }
  .t-md-width10of12 { width: calc((10 / 12) * 100)% !important; }
  .t-md-width11of12 { width: calc((11 / 12) * 100)% !important; }
  .t-md-width12of12,
  .t-md-widthFull   { width: calc((12 / 12) * 100)% !important; }
}

@media (--viewport-lg) {
  .t-lg-width1of12  { width: calc((1 / 12) * 100)% !important; }
  .t-lg-width2of12  { width: calc((2 / 12) * 100)% !important; }
  .t-lg-width3of12  { width: calc((3 / 12) * 100)% !important; }
  .t-lg-width4of12  { width: calc((4 / 12) * 100)% !important; }
  .t-lg-width5of12  { width: calc((5 / 12) * 100)% !important; }
  .t-lg-width6of12,
  .t-lg-widthHalf   { width: calc((6 / 12) * 100)% !important; }
  .t-lg-width7of12  { width: calc((7 / 12) * 100)% !important; }
  .t-lg-width8of12  { width: calc((8 / 12) * 100)% !important; }
  .t-lg-width9of12  { width: calc((9 / 12) * 100)% !important; }
  .t-lg-width10of12 { width: calc((10 / 12) * 100)% !important; }
  .t-lg-width11of12 { width: calc((11 / 12) * 100)% !important; }
  .t-lg-width12of12,
  .t-lg-widthFull   { width: calc((12 / 12) * 100)% !important; }
}