<div class="o-layout__container">
  <div class="o-layout__item u-12-12 u-8-12--medium">

    <article class="article">
      <h1 class="article__title">Article title</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis hic vero, blanditiis nihil provident itaque cum cumque, facere libero, officiis minus obcaecati. Inventore modi aliquam praesentium cum, nobis eveniet iste.</p>
    </article>
  
  </div>
  
  <div class="o-layout__item u-12-12 u-4-12--medium">
    
    <aside class="sidebar">
      <h3 class="sidebar__title">Sidebar</h3>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </aside>
    
  </div>
</div>

// Needed for layout item padding and widths
* {
  box-sizing: border-box;
}

// -------------------------------------
//   Variables
// -------------------------------------

$grid-columns: 12;

$grid-breakpoints: (
  medium: 768px,
  large: 960px
);

// -------------------------------------
//   Functions
// -------------------------------------

@function percentage-width($span, $columns) {
  @return ($span / $columns) * 100%;
}

// -------------------------------------
//   Grid
// -------------------------------------

.o-layout__container {
  max-width: 1000px;
  margin: 0 auto;
}

.o-layout__item {
  float: left;
  padding-left: 14px;
  padding-right: 14px;
}

// Basic grid
@for $i from 1 through $grid-columns {
  .u-#{$i}-#{$grid-columns} {
    width: percentage-width($i, $grid-columns);
  }
}

// Loop breakpoints to generate screen-specific grids
@each $key, $val in $grid-breakpoints {
  @media (min-width: #{$val}) {
    @for $i from 1 through $grid-columns {
      .u-#{$i}-#{$grid-columns}--#{$key} {
        width: percentage-width($i, $grid-columns);
      }
    }
  }
}

// Custom stuff
body {
  background: #ccc;
}

.article, .sidebar {
  padding: 15px;
  border-radius: 5px;
}

.article {
  background: #f2f3f4;
  
  &__title {
    color: #333;
  }
}

.sidebar {
  background: #ddd;
  
  ul {
    list-style: none;
    padding: 0;
  }
  
  a {
    display: block;
    color: #333;
    
    &:hover {
      text-decoration: none;
    }
  }
}