CSS cheats

_grid.scss

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
  @include clearfix();

  @include media-breakpoint(xl) {
    max-width: $container-max-width;

    @at-root #{&}--fluid {
      max-width: none;
    }
  }
}

.g {
  @include make-grid;
}

@include make-grid-columns;

@include make-grid-columns-breakpoints;

_mixins.scss

// media queries helper
@mixin media-breakpoint($name) {
  @media (min-width: map-get($grid-breakpoints, $name)) {
    @content;
  }
}

@mixin media-breakpoint-down($name) {
  @media (max-width: map-get($grid-breakpoints, $name) - 0.1) {
    @content;
  }
}


// rem helper
@function rem($px) {
  @if (unitless($px)) {
    $px: $px * 1px;
  }

  @return #{$px/$font-size-root}rem;
}

// clearfix helper
@mixin clearfix {
  &:before,
  &:after {
    content: ' ';
    display: table;
  }

  &:after {
    clear: both;
  }
}

// grid builder
@mixin make-grid($gutter: $grid-gutter-width) {
  display: flex;
  flex-wrap: wrap;
  margin-left: ($gutter / -2);
  margin-right: ($gutter / -2);
}

@mixin make-column($gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: ($gutter / 2);
  padding-right: ($gutter / 2);
  word-break: break-word;
  min-width: 0;
}

@mixin make-grid-columns {
  @for $i from 1 through $grid-columns {
    .g__col-#{$i} {
      @include make-column;
      flex: 0 0 percentage($i / $grid-columns);
    }
  }
}

@mixin make-grid-columns-breakpoints {
  @each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint($breakpoint) {
      @for $i from 1 through $grid-columns {
        .g__col--#{$breakpoint}-#{$i} {
          flex: 0 0 percentage($i / $grid-columns);
        }
      }
    }
  }
}

_reset.scss

html {
  font-size: $font-size-root;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

*:focus {
  outline: none;
}

body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height;
  color: $body-color;
  background-color: $body-bg;
}

a {
  color: $link-color;
  text-decoration: none;

  &:hover,
  &:focus {
    color: $link-hover-color;
    text-decoration: none;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: .5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 400;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
}

[role="button"] {
  cursor: pointer;
}

label {
  display: inline-block;
  margin-bottom: .5rem;
}

input,
button,
select,
textarea {
  margin: 0;
  line-height: inherit;
  border-radius: 0;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  line-height: inherit;
}

input {
  word-break: initial;
}

_variables.scss

$font-size-root: 16px;
$font-size-base: .875rem; // 14px 
$font-family-base: 'Open Sans', sans-serif;
$line-height: 1.5;

$grid-breakpoints: (
  // Small screen / phone
  sm: 34rem,
  // Medium screen / tablet -- designed
  md: 48rem,
  // Large screen / desktop
  lg: 62rem,
  // Extra large screen / wide desktop -- designed
  xl: 75rem
);

$grid-columns: 12;
$grid-gutter-width: 1.875rem;
$container-max-width: 73.125rem;

$black-text: #424242;
$blue: #1fa9e0;
$blue-hover: #169dd2;
$body-bg: #FFF;
$body-color: $black-text;
$link-color: $blue;
$link-hover-color: $blue-hover;

example_grid.html

<!--container with max width -->
<div class="container">
  <div class="g">
    <div class="g__col-12 g__col--md-6">
    </div>
    <div class="g__col-12 g__col--md-6">
    </div>
  </div>
</div>

<!-- container fluid -->
<div class="container container--fluid">
  <div class="g">
    <div class="g__col-6">
    </div>
    <div class="g__col-6">
    </div>
  </div>
</div>

main.scss

@import 'variables';
@import 'mixins';

@import 'reset';
@import 'grid';