Margins framework classes

margins.css

.mr-10 {
  margin-right: 10px;
}
.mr-20 {
  margin-right: 20px;
}
.mr-30 {
  margin-right: 30px;
}
.mr-40 {
  margin-right: 40px;
}

.ml-10 {
  margin-left: 10px;
}
.ml-20 {
  margin-left: 20px;
}
.ml-30 {
  margin-left: 30px;
}
.ml-40 {
  margin-left: 40px;
}

.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-40 {
  margin-top: 40px;
}
.mt-50 {
  margin-top: 50px;
}

.mb-10 {
  margin-bottom: 10px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mb-50 {
  margin-bottom: 50px;
}

/* Mobile margins */
.mb-10-at-sm {
  margin-bottom: 10px;
  @mixin md_up {
    margin-bottom: 0;
  }
}

.mb-20-at-sm {
  margin-bottom: 20px;
  @mixin md_up {
    margin-bottom: 0;
  }
}
.mb-30-at-sm {
  margin-bottom: 30px;
  @mixin md_up {
    margin-bottom: 0;
  }
}
.mb-40-at-sm {
  margin-bottom: 40px;
  @mixin md_up {
    margin-bottom: 0;
  }
}
.mb-50-at-sm {
  margin-bottom: 50px;
  @mixin md_up {
    margin-bottom: 0;
  }
}

.mb-10-at-xs {
  margin-bottom: 10px;
  @mixin sm_up {
    margin-bottom: 0;
  }
}
.mb-20-at-xs {
  margin-bottom: 20px;
  @mixin sm_up {
    margin-bottom: 0;
  }
}
/* /end Mobile margins */

.margin-none {
  margin: 0;
}
.mb-none {
  margin-bottom: 0;
}
.mt-none {
  margin-top: 0;
}