Sakura Custom Grids

Next to nothing css to make things nice. The aim here is simplicity.

by Sam Fereday

HTML

<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css">

SCSS

$pd: 20px;

.grid {
  margin: 0 0 $pd 0;  
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
  float: left;
  padding-right: $pd;
  box-sizing: border-box;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

/* Outside padding (if required) */
.grid-pad {
  padding: $pd 0 $pd $pd;
  [class*='col-']:last-of-type {
    padding-right: $pd;
  }
}