Tools Module For Horizontal Gutter.

sircus-tools-gutter | v3.0.0

gutter

gutter

gutter2x

gutter3x

gutter4x

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

reset gutter

gutterReset

gutterReset2x

gutterReset3x

gutterReset4x

<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-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-gutter2xReset,
.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-gutter3xReset,
.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-gutter4xReset,
.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-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-gutter2xReset,
  .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-gutter3xReset,
  .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-gutter4xReset,
  .t-sm-gutterReset4x {
    margin-left: calc(0 - (var(--gutter) * 4)) !important;
    margin-right: calc(0 - (var(--gutter) * 4)) !important;
  }
}

@media (--viewport-md) {
  .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-gutter2xReset,
  .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-gutter3xReset,
  .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-gutter4xReset,
  .t-md-gutterReset4x {
    margin-left: calc(0 - (var(--gutter) * 4)) !important;
    margin-right: calc(0 - (var(--gutter) * 4)) !important;
  }
}

@media (--viewport-lg) {
  .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-gutter2xReset {
    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-gutter3xReset {
    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-gutter4xReset {
    margin-left: calc(0 - (var(--gutter) * 4)) !important;
    margin-right: calc(0 - (var(--gutter) * 4)) !important;
  }
}