compensate-gutter: Creates an asymmetric grid to negate a parent container's gutter. #sassmeister #function #singularitygs

SassMeister-input-HTML.html

<h3>Problem: Redefining a singularity grid to compensate for parent gutter</h3>
<p>.element defines a custom grid with calculated alpha/omega columns to make columns "snap" back into the global grid.</p>
<div id="c1" class="container">
  <div class="element">Redefined grid, center columns, no gutter</div>
</div>
<div class="match"></div>

<div class="grid"><div></div><div></div><div></div> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> <div></div><div></div><div></div><div></div><div></div></div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Singularity.gs (v1.4.0)
// ----

@import "singularitygs";


@function compensate-gutter($grid: false, $gutter: false) {
  $grid:     find-grid($grid);
  $columns:  if(type-of($grid) == "list", length($grid), $grid);
  $gutter:   find-gutter($gutter);
  $alpha:    (1 + (1 / (1 + $gutter))) / 2;
  $new-grid: ($alpha);
  @for $i from 2 to $columns { $new-grid: append($new-grid, 1); }
  $new-grid: append($new-grid, $alpha);
  @return $new-grid;
}

$columns:        7;
$atomic-gutter:  2;
$atomic-column:  6;

$gutter:  $atomic-gutter / $atomic-column;

@include add-grid($columns);
@include add-gutter($gutter);
@include add-gutter-style(split);
// Hide exceeding grid items
.grid div:nth-child(n+#{$columns+1}){display: none;}

// Just for looks
*{margin:0;padding:0;box-sizing:border-box;}body{background:#ccc;font:500 15px/2 sans-serif;text-align:center;}.container{margin: 20px 0;background:#888;}.grid{clear:both; div{height:30px;background:#aaa;}}.element{height:30px;background:#e88;}.match{border:1px dashed black;height:100px;position:relative;top:10px;margin-bottom:-30px;}

// Grid columns with gutter, since background-grid on Chrome is unusable.
.grid div  { @include float-span(1, 1); }

// Parent grid with default gutter
.container { @include isolation-span($columns, 1); position: relative; }
.match     { @include isolation-span($columns - 2, 2, $gutter: 0); }

.element {

  @include layout(compensate-gutter()) {
    -debug-grid: find-grid();
    @include isolation-span($columns - 2, 2, $gutter: 0);

    &::before { @include isolation-span(1, 1); background: #8ee; left:  0; content: "alpha"; }
    &::after  { @include isolation-span(1, $columns); background: #8e8; right: 0; content: "omega"; }
    &::before, &::after { position: absolute; }
    //&::before {margin-left:0;width:$width;}
  }
  
}

SassMeister-output.css

.grid div:nth-child(n+8) {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #ccc;
  font: 500 15px/2 sans-serif;
  text-align: center;
}

.container {
  margin: 20px 0;
  background: #888;
}

.grid {
  clear: both;
}
.grid div {
  height: 30px;
  background: #aaa;
}

.element {
  height: 30px;
  background: #e88;
}

.match {
  border: 1px dashed black;
  height: 100px;
  position: relative;
  top: 10px;
  margin-bottom: -30px;
}

.grid div {
  width: 10.71429%;
  clear: right;
  float: left;
  margin-left: 1.78571%;
  margin-right: 1.78571%;
}

.container {
  width: 96.42857%;
  float: right;
  margin-left: 0;
  margin-right: 1.78571%;
  clear: none;
  position: relative;
}

.match {
  width: 71.42857%;
  float: left;
  margin-right: -100%;
  margin-left: 14.28571%;
  clear: none;
}

.element {
  -debug-grid: 0.875 1 1 1 1 1 0.875;
  width: 74.07407%;
  float: left;
  margin-right: -100%;
  margin-left: 12.96296%;
  clear: none;
}
.element::before {
  width: 9.63303%;
  float: left;
  margin-right: -100%;
  margin-left: 1.83486%;
  clear: none;
  background: #8ee;
  left: 0;
  content: "alpha";
}
.element::after {
  width: 9.63303%;
  float: right;
  margin-left: 0;
  margin-right: 1.83486%;
  clear: none;
  background: #8e8;
  right: 0;
  content: "omega";
}
.element::before, .element::after {
  position: absolute;
}

SassMeister-rendered.html

<h3>Problem: Redefining a singularity grid to compensate for parent gutter</h3>
<p>.element defines a custom grid with calculated alpha/omega columns to make columns "snap" back into the global grid.</p>
<div id="c1" class="container">
  <div class="element">Redefined grid, center columns, no gutter</div>
</div>
<div class="match"></div>

<div class="grid"><div></div><div></div><div></div> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> <div></div><div></div><div></div><div></div><div></div></div>