Rominou34/soft-css

.soft-row,
.soft-col {
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  align-items: stretch;
  justify-content: space-between;;
  padding: 0;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.soft-row,
.soft-col,
.soft-row div,
.soft-col div {
  box-sizing: border-box;
  text-align: inherit;
}

.soft-row {
  width: 100%;
}

.soft-row, .soft-col {
  height: auto;
  padding: 0;
}
/*
.soft-col :first-child {
  margin-top: 0;
}

.soft-col :last-child {
  margin-bottom: 0;
}*/

.soft-col > div:not([class*="col"]):not(.soft-row),
.soft-row > div:not([class*="col"]) {
  -webkit-flex: 1 0;
  flex: 1 0;
}

.soft-col > div:not(.soft-row):not(.soft-col):not(.container-sm):not(.container-md):not(.container-lg),
.soft-row > div:not(.soft-row):not(.soft-col):not(.container-sm):not(.container-md):not(.container-lg) {
  padding: 0.5em;
  margin: $grid-margin-sm;
}

/* WIDTH */
.col-1, .space-1 { width: calc(100% / 12 - #{$grid-margin}); }
.col-2, .space-2 { width: calc(100% / 6 - #{$grid-margin}); }
.col-3, .space-3 { width: calc(100% / 4 - #{$grid-margin}); }
.col-4, .space-4 { width: calc(100% / 3 - #{$grid-margin}); }
.col-5, .space-5 { width: calc(500% / 12 - #{$grid-margin}); }
.col-6, .space-6 { width: calc(100% / 2 - #{$grid-margin}); }
.col-7, .space-7 { width: calc(700% / 12 - #{$grid-margin}); }
.col-8, .space-8 { width: calc(800% / 12 - #{$grid-margin}); }
.col-9, .space-9 { width: calc(900% / 12 - #{$grid-margin}); }
.col-10, .space-10 { width: calc(1000% / 12 - #{$grid-margin}); }
.col-11, .space-11 { width: calc(1100% / 12 - #{$grid-margin}); }
.col-12 { width: calc(100% - #{$grid-margin}); }

/* DIVs that are containers of a grid don't need margin */
.col-1.soft-col, .col-1.soft-row { width: calc(100% / 12); }
.col-2.soft-col, .col-2.soft-row { width: calc(100% / 6); }
.col-3.soft-col, .col-3.soft-row { width: calc(100% / 4); }
.col-4.soft-col, .col-4.soft-row { width: calc(100% / 3); }
.col-5.soft-col, .col-5.soft-row { width: calc(500% / 12); }
.col-6.soft-col, .col-6.soft-row { width: calc(100% / 2); }
.col-7.soft-col, .col-7.soft-row { width: calc(700% / 12); }
.col-8.soft-col, .col-8.soft-row { width: calc(800% / 12); }
.col-9.soft-col, .col-9.soft-row { width: calc(900% / 12); }
.col-10.soft-col, .col-10.soft-row { width: calc(1000% / 12); }
.col-11.soft-col, .col-11.soft-row { width: calc(1100% / 12); }
.col-12.soft-col, .col-12.soft-row { width: 100%; }

/* PUSH */
.offset-left-1 { margin-left: calc(100% / 12) !important; }
.offset-left-2 { margin-left: calc(100% / 6) !important; }
.offset-left-3 { margin-left: calc(100% / 4) !important; }
.offset-left-4 { margin-left: calc(100% / 3) !important; }
.offset-left-5 { margin-left: calc(500% / 12) !important; }
.offset-left-6 { margin-left: calc(100% / 2) !important; }
.offset-left-7 { margin-left: calc(700% / 12) !important; }
.offset-left-8 { margin-left: calc(800% / 12) !important; }
.offset-left-9 { margin-left: calc(900% / 12) !important; }
.offset-left-10 { margin-left: calc(1000% / 12) !important; }
.offset-left-11 { margin-left: calc(1100% / 12) !important; }

/* PULL */
.offset-right-1 { margin-right: calc(100% / 12) !important; }
.offset-right-2 { margin-right: calc(100% / 6) !important; }
.offset-right-3 { margin-right: calc(100% / 4) !important; }
.offset-right-4 { margin-right: calc(100% / 3) !important; }
.offset-right-5 { margin-right: calc(500% / 12) !important; }
.offset-right-6 { margin-right: calc(100% / 2) !important; }
.offset-right-7 { margin-right: calc(700% / 12) !important; }
.offset-right-8 { margin-right: calc(800% / 12) !important; }
.offset-right-9 { margin-right: calc(900% / 12) !important; }
.offset-right-10 { margin-right: calc(1000% / 12) !important; }
.offset-right-11 { margin-right: calc(1100% / 12) !important; }

.space-1,
.space-2,
.space-3,
.space-4,
.space-5,
.space-6,
.space-7,
.space-8,
.space-9,
.space-10,
.space-11 {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/*************** RESPONSIVE DESIGN ***************/

/* LARGE */
/* Set the value according to the one you put at the beginning */
@media screen and (max-width: #{$container-lg - $grid-margin}) {
  .stack-lg:not(.soft-row) > div,
  .stack-lg :not(.soft-row):not(.stack-md):not(.stack-sm) > div {
    width: calc(100% - #{$grid-margin});
  }

  .stack-lg.soft-col > :not(.soft-row):not(.soft-col) {
    display: block;
    width: calc(100% - #{$grid-margin});
  }

  [class*="offset-left"] { margin-left: 0px !important; }
  [class*="offset-right"] { margin-right: 0px !important; }
}

/* MEDIUM */
/* Set the value according to the one you put at the beginning */
@media screen and (max-width: #{$container-md - $grid-margin}) {
  .stack-md:not(.soft-row) > div,
  .stack-md :not(.soft-row):not(.stack-sm) > div {
    width: calc(100% - #{$grid-margin});
  }

  .stack-md.soft-col > :not(.soft-row):not(.soft-col) {
    display: block;
    width: calc(100% - #{$grid-margin});
  }

  [class*="offset-left"] { margin-left: 0px !important; }
  [class*="offset-right"] { margin-right: 0px !important; }
}

/* SMALL */
/* Set the value according to the one you put at the beginning */
@media screen and (max-width: #{$container-sm - $grid-margin}) {
  .stack-sm:not(.soft-row) > div,
  .stack-sm :not(.soft-row) > div {
    width: calc(100% - #{$grid-margin});
  }

  .soft-col > :not(.soft-row):not(.soft-col) {
    display: block;
    width: calc(100% - #{$grid-margin});
  }

  [class*="offset-left"] { margin-left: 0px !important; }
  [class*="offset-right"] { margin-right: 0px !important; }
}