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');
}

GIFT

I've made a board game callled GIFT (Good Interesting Fun Times). It's a party game / word game for 2 to 6 players.

Check out the board game!