.container
  %aside.one Aside: 3 columns
  %article.two Article: 9 columns
  
  %aside.three Aside: 5 columns
  %article.four Article: 7 columns
View Compiled
$visual-grid: true
$visual-grid-index: front
$visual-grid-color: black
$visual-grid-opacity: .5

@import "bourbon"
@import "neat" 

body
  color: white
  background-color: white
  
.container
  +outer-container
  background-color: #f2f2f2

.one
  +span-columns(3)
  
.two
  +span-columns(9)
  +omega
  
.three
  +span-columns(5)
  
.four
  +span-columns(7)
  +omega
  
aside, article
  margin-bottom: 15px
  height: 150px
  
aside
  background-color: #81d4fa 

article
  background-color: #e64a19

External CSS

  1. https://github.com/thoughtbot/neat/blob/master/app/assets/stylesheets/settings/_visual-grid.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.