nickrigby / silc-grid Goto Github PK

Grid class for "auto" columns are duplicated for styles outside of specific breakpoints.

In a 12 column grid, no breakpoint classes are generated for the last column.

Since flexbox doesn't support collapsing margins, sometimes using silc-grid causes there to be excess whitespace. For example, if paragraphs have margin-bottom: 20px and heading tags have margin-top: 30px, normally a paragraph followed by a heading would have 30px of space beneath it. If a silc-grid with a paragraph inside one of its silc-grid__col's comes before a heading though the spacing will be 50px because margins don't collapse with flex containers. I've come up with the following Sass to address this:

.silc-grid--collapse-children .#{$silc-grid--namespace}grid__col {
  @each $breakpoint-name, $breakpoint-width in $silc-core--breakpoints {
    @for $x from 1 to $silc-grid--columns + 1 {
      &--#{$x}-#{$breakpoint-name} {
        &:first-child > *:first-child {
          margin-top: 0;
        }
        &:last-child > *:last-child {
          margin-bottom: 0;
        }
        @include media(#{$breakpoint-name}) {
          > *:first-child {
            margin-top: 0;
          }
          > *:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

This forces the first column's first child to always have no margin-top and the last column's last child to have no margin-bottom. When columns aren't stacked it applies those styles to the first and last children of each column. Proposing that this functionality will be available via a modifier class like .silc-grid--collapse-children.

Add breakpoint modifier classes for grid collapse and no gutters functionality.