magic grid with clearfix for scss - rosalsm/TIY-GitHub GitHub Wiki

// Main Styles: main.scss
main.container {
 @extend .grid;

  margin: 0 auto;
  max-width: 60em;

  > aside#about {
    @media (max-width: 30em){
      width: 100%;
    }
  }
}

// Tabs Helper Classes: _tabs.scss
.tabs {
  > * {
    background-color: gray;
  }
}

// Grid Helper Classes: _grid.scss
.grid {
  @extend .clearfix;
  // overflow: auto; // Not recommended!

  [class*="col-"] {
    float: left;
    box-sizing: border-box;
    padding: 0 1em;

    &:first-child {
      padding-left: 0;
    }
    &:last-child {
      padding-right: 0;
    }

    img {
      width: 100%;
    }
  }
  .col-1-2 {
    width: 100% * (1/2);
  }

  .col-1-3 {
    width: 100% * (1/3);
  }
  .col-2-3 {
    width: 100% * (2/3);
  }
  .pad-1-3 {
    margin-left: 100% * (1/3);
  }
}

.clearfix::before,
.clearfix::after {
  display: table;
  content: ' ';
}
.clearfix::after {
  clear: both;
}

.mobile-only {
  display: none;
  @media (max-width: 30em){
    display: inherit;
  }
}