Flexbox Minesweeper

Flexbox Minesweeper.markdown

Flexbox Minesweeper

Old school minesweeper created with only HTML & CSS using Flexbox. Inspired by Landon Schropp.

A Pen by C-Rodg on CodePen.

License.

index.html

<main>
  <header class="menu">
    <img class="icon" src="https://dowdcvkfm95kf.cloudfront.net/minesweeper/icon.svg" width="28" height="28"/>
    <h1>Minesweeper</h1>
    <button>
      <img src="https://dowdcvkfm95kf.cloudfront.net/minesweeper/minimize.svg" width="24" height="24"/>
    </button>
    <button>
      <img src="https://dowdcvkfm95kf.cloudfront.net/minesweeper/maximize.svg" width="24" height="24"/>
    </button>
    <button>
      <img src="https://dowdcvkfm95kf.cloudfront.net/minesweeper/close.svg" width="24" height="24"/>
    </button>
  </header>
  <div class="minesweeper">
    <nav>
     <button>Game</button>
     <button>Help</button>
    </nav>
    <section class="game">
      <div class="controls">
       <img src="https://dowdcvkfm95kf.cloudfront.net/minesweeper/numbers29.svg" alt="" class="number" />
       <button type="button" class="reset">
        <img src="https://dowdcvkfm95kf.cloudfront.net/minesweeper/smiley.svg" alt="" />
       </button>
       <img src="https://dowdcvkfm95kf.cloudfront.net/minesweeper/numbers10.svg" alt="" class="number"/>
      </div>
      <div class="board">
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
        <button class="space"></button>
      </div>
    </section>
  </div>
</main>

style.scss

@mixin border($size, $top-left-color, $bottom-right-color){
  border-top: $size solid $top-left-color;
  border-right: $size solid $bottom-right-color;
  border-bottom: $size solid $bottom-right-color;
  border-left: $size solid $top-left-color;
}

* {
  box-sizing: border-box;
}

html, body {
 height: 100%;
}

main {
 display: flex;
 flex-direction: column;
 border: 2px solid black;
}

.menu {
 display: flex;
 border: 2px solid black;
 background-color: blue;
 button {
  flex: 0 0 auto;
  @include border(2px, #fff, #000);
  background-color: #c0c0c0;
  align-items: center;
  line-height: 0;
  margin-left: 6px;
 }
}

h1 {
 font-size: 1rem;
 color: #fff;
 flex: 1 1 0;
 margin: 0;
 line-height: 28px;
 position: relative;
 top: 1px;
}

body {
  background: #444;
  padding: 30px 50px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.minesweeper {
  font-size: 20px;
  font-family: sans-serif;
  background-color: #c0c0c0;
}

.game {
  padding: 10px;
}

button {
  padding: 0;
  outline: 0;
  border: none;
  background-color: transparent;
}

.board {
  @include border(6px, #808080, white);
  width: 332px;
  height: 332px;
  display: flex;
  flex-wrap: wrap;
 }

.space {
  @include border(4px, white, #808080);
  flex: 0 0 32px;
  height: 32px;
 }

.controls{
  display: flex;
  justify-content: space-between;
  @include border(4px, #808080, white);
  margin-bottom: 10px;
  padding: 10px;
}

.number {
  @include border(3px, #808080, white);
  background-color: #030303;
}

.reset {
  @include border(5px, white, #808080);
  width: 48px;
  height: 48px;
 }

nav {
  button {
   margin: 6px 10px;
   
   &::first-letter {
    text-decoration: underline;
   }
  }
}