Sircus

gutter

<div class="t-gutter">...</div>
<div class="t-gutter2x">...</div>
<div class="t-gutter3x">...</div>
<div class="t-gutter4x">...</div>

reset gutter

<div class="t-gutterReset">...</div>
<div class="t-gutterReset2x">...</div>
<div class="t-gutterReset3x">...</div>
<div class="t-gutterReset4x">...</div>

Install

npm install sircus-tools-gutter sircus-variables

CSS import

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

CSS

/*
 * sircus-tools-gutter
 ================================================== */
.t-gutterQuarter {
  padding-left: calc(var(--gutter) / 4) !important;
  padding-right: calc(var(--gutter) / 4) !important;
}

.t-gutterResetQuarter {
  margin-left: calc(0 - (var(--gutter) / 4)) !important;
  margin-right: calc(0 - (var(--gutter) / 4)) !important;
}

.t-gutterHalf {
  padding-left: calc(var(--gutter) / 2) !important;
  padding-right: calc(var(--gutter) / 2) !important;
}

.t-gutterResetHalf {
  margin-left: calc(0 - (var(--gutter) / 2)) !important;
  margin-right: calc(0 - (var(--gutter) / 2)) !important;
}

.t-gutter {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

.t-gutterReset {
  margin-left: calc(0 - var(--gutter)) !important;
  margin-right: calc(0 - var(--gutter)) !important;
}

.t-gutter2x {
  padding-left: calc(var(--gutter) * 2) !important;
  padding-right: calc(var(--gutter) * 2) !important;
}

.t-gutterReset2x {
  margin-left: calc(0 - (var(--gutter) * 2)) !important;
  margin-right: calc(0 - (var(--gutter) * 2)) !important;
}

.t-gutter3x {
  padding-left: calc(var(--gutter) * 3) !important;
  padding-right: calc(var(--gutter) * 3) !important;
}

.t-gutterReset3x {
  margin-left: calc(0 - (var(--gutter) * 3)) !important;
  margin-right: calc(0 - (var(--gutter) * 3)) !important;
}

.t-gutter4x {
  padding-left: calc(var(--gutter) * 4) !important;
  padding-right: calc(var(--gutter) * 4) !important;
}

.t-gutterReset4x {
  margin-left: calc(0 - (var(--gutter) * 4)) !important;
  margin-right: calc(0 - (var(--gutter) * 4)) !important;
}

Responsive CSS

@media (--viewport-sm) {
  .t-sm-gutterQuarter {
    padding-left: calc(var(--gutter) / 4) !important;
    padding-right: calc(var(--gutter) / 4) !important;
  }

  .t-sm-gutterResetQuarter {
    margin-left: calc(0 - (var(--gutter) / 4)) !important;
    margin-right: calc(0 - (var(--gutter) / 4)) !important;
  }

  .t-sm-gutterHalf {
    padding-left: calc(var(--gutter) / 2) !important;
    padding-right: calc(var(--gutter) / 2) !important;
  }

  .t-sm-gutterResetHalf {
    margin-left: calc(0 - (var(--gutter) / 2)) !important;
    margin-right: calc(0 - (var(--gutter) / 2)) !important;
  }

  .t-sm-gutter {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  .t-sm-gutterReset {
    margin-left: calc(0 - var(--gutter)) !important;
    margin-right: calc(0 - var(--gutter)) !important;
  }

  .t-sm-gutter2x {
    padding-left: calc(var(--gutter) * 2) !important;
    padding-right: calc(var(--gutter) * 2) !important;
  }

  .t-sm-gutterReset2x {
    margin-left: calc(0 - (var(--gutter) * 2)) !important;
    margin-right: calc(0 - (var(--gutter) * 2)) !important;
  }

  .t-sm-gutter3x {
    padding-left: calc(var(--gutter) * 3) !important;
    padding-right: calc(var(--gutter) * 3) !important;
  }

  .t-sm-gutterReset3x {
    margin-left: calc(0 - (var(--gutter) * 3)) !important;
    margin-right: calc(0 - (var(--gutter) * 3)) !important;
  }

  .t-sm-gutter4x {
    padding-left: calc(var(--gutter) * 4) !important;
    padding-right: calc(var(--gutter) * 4) !important;
  }

  .t-sm-gutterReset4x {
    margin-left: calc(0 - (var(--gutter) * 4)) !important;
    margin-right: calc(0 - (var(--gutter) * 4)) !important;
  }
}

@media (--viewport-md) {
  .t-md-gutterQuarter {
    padding-left: calc(var(--gutter) / 4) !important;
    padding-right: calc(var(--gutter) / 4) !important;
  }

  .t-md-gutterResetQuarter {
    margin-left: calc(0 - (var(--gutter) / 4)) !important;
    margin-right: calc(0 - (var(--gutter) / 4)) !important;
  }

  .t-md-gutterHalf {
    padding-left: calc(var(--gutter) / 2) !important;
    padding-right: calc(var(--gutter) / 2) !important;
  }

  .t-md-gutterResetHalf {
    margin-left: calc(0 - (var(--gutter) / 2)) !important;
    margin-right: calc(0 - (var(--gutter) / 2)) !important;
  }

  .t-md-gutter {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  .t-md-gutterReset {
    margin-left: calc(0 - var(--gutter)) !important;
    margin-right: calc(0 - var(--gutter)) !important;
  }

  .t-md-gutter2x {
    padding-left: calc(var(--gutter) * 2) !important;
    padding-right: calc(var(--gutter) * 2) !important;
  }

  .t-md-gutterReset2x {
    margin-left: calc(0 - (var(--gutter) * 2)) !important;
    margin-right: calc(0 - (var(--gutter) * 2)) !important;
  }

  .t-md-gutter3x {
    padding-left: calc(var(--gutter) * 3) !important;
    padding-right: calc(var(--gutter) * 3) !important;
  }

  .t-md-gutterReset3x {
    margin-left: calc(0 - (var(--gutter) * 3)) !important;
    margin-right: calc(0 - (var(--gutter) * 3)) !important;
  }

  .t-md-gutter4x {
    padding-left: calc(var(--gutter) * 4) !important;
    padding-right: calc(var(--gutter) * 4) !important;
  }

  .t-md-gutterReset4x {
    margin-left: calc(0 - (var(--gutter) * 4)) !important;
    margin-right: calc(0 - (var(--gutter) * 4)) !important;
  }
}

@media (--viewport-lg) {
  .t-lg-gutterQuarter {
    padding-left: calc(var(--gutter) / 4) !important;
    padding-right: calc(var(--gutter) / 4) !important;
  }

  .t-lg-gutterResetQuarter {
    margin-left: calc(0 - (var(--gutter) / 4)) !important;
    margin-right: calc(0 - (var(--gutter) / 4)) !important;
  }

  .t-lg-gutterHalf {
    padding-left: calc(var(--gutter) / 2) !important;
    padding-right: calc(var(--gutter) / 2) !important;
  }

  .t-lg-gutterResetHalf {
    margin-left: calc(0 - (var(--gutter) / 2)) !important;
    margin-right: calc(0 - (var(--gutter) / 2)) !important;
  }

  .t-lg-gutter {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  .t-lg-gutterReset {
    margin-left: calc(0 - var(--gutter)) !important;
    margin-right: calc(0 - var(--gutter)) !important;
  }

  .t-lg-gutter2x {
    padding-left: calc(var(--gutter) * 2) !important;
    padding-right: calc(var(--gutter) * 2) !important;
  }

  .t-lg-gutterReset2x {
    margin-left: calc(0 - (var(--gutter) * 2)) !important;
    margin-right: calc(0 - (var(--gutter) * 2)) !important;
  }

  .t-lg-gutter3x {
    padding-left: calc(var(--gutter) * 3) !important;
    padding-right: calc(var(--gutter) * 3) !important;
  }

  .t-lg-gutterReset3x {
    margin-left: calc(0 - (var(--gutter) * 3)) !important;
    margin-right: calc(0 - (var(--gutter) * 3)) !important;
  }

  .t-lg-gutter4x {
    padding-left: calc(var(--gutter) * 4) !important;
    padding-right: calc(var(--gutter) * 4) !important;
  }

  .t-lg-gutterReset4x {
    margin-left: calc(0 - (var(--gutter) * 4)) !important;
    margin-right: calc(0 - (var(--gutter) * 4)) !important;
  }
}