Flex

Flex CSS columns with margin

Use this mixin when you want 3 columns + margin with flex!

// Flex columns using all the tricks.
@mixin three-columns() {
  $gutter-column: 10px;
  // Remove gutter.
  margin: -$gutter-column;
  ul {
    margin: 0;
    display: flex;
    justify-content: center;
    li {
      // Add gutter.
      margin: $gutter-column;
      // 3 columns including gutter.
      width: calc(33.3333333333333% - (#{$gutter-column} * 2));
    }
  }
}

Preload images via CSS

Browsers doesn’t preload images that show on hover, leading to an awful flicker as the new image loads. Preload the image via CSS to avoid this flicker:

body:after{
  display: none;
  content: url('<path>.jpg');
}