.option-select.control-button
  .dropdown
    select#option-selector
      option(value="palette-cmyk" selected) Eagle
      option(value="palette-1") Boise St.
      option(value="palette-2") Hilfiger
      option(value="palette-3") Polo
      option(value="palette-4") Munich
      option(value="palette-5") Nairobi
      option(value="palette-6") Nautica
      option(value="palette-7") Sherbert      
button.info-toggle.control-button
  svg.icon(viewBox="0 0 48 48")
    title info
    path(d="M21 14.25c0-1.237 1.013-2.25 2.25-2.25h1.5c1.237 0 2.25 1.013 2.25 2.25v1.5c0 1.237-1.013 2.25-2.25 2.25h-1.5c-1.237 0-2.25-1.013-2.25-2.25v-1.5z")
    path(d="M30 36h-12v-3h3v-9h-3v-3h9v12h3z")
    path(d="M24 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zM24 43.5c-10.77 0-19.5-8.73-19.5-19.5s8.73-19.5 19.5-19.5 19.5 8.73 19.5 19.5-8.73 19.5-19.5 19.5z")
.grid.palette-cmyk
  - for (var x = 0; x < 5; x++)
    .grid-item
View Compiled
:root {
  font-size: calc(1rem + (24 - 16) * ( (100vw - 400px) / (1600 - 400)));

  // cmyk
  --cmyk-cyan: cyan; // #00FFFF
  --cmyk-magenta: magenta; // #FF00FF
  --cmyk-yellow: yellow; // #FFFF00
  --cmyk-black: black; // #000000
  --cmyk-white: white; // #FFFFFF

  // color palette 1
  --p1-1: #08327d;
  --p1-2: #00aabb;
  --p1-3: #ec6b2d;
  --p1-4: #333333;
  --p1-5: #0f0a01;

  // color palette 2
  --p2-1: #0b3536;
  --p2-2: #0098d8;
  --p2-3: #f54123;
  --p2-4: #e5e7de;
  --p2-5: #e7b300;

  // color palette 3
  --p3-1: #c7943e;
  --p3-2: #558a86;
  --p3-3: #2677bb;
  --p3-4: #f67944;
  --p3-5: #fbfbfb;

  // color palette 4
  --p4-1: #c2b4a6;
  --p4-2: #e7b300;
  --p4-3: #6e7f29;
  --p4-4: #f45844;
  --p4-5: #635045;

  // color palette 5
  --p5-1: #a63e14;
  --p5-2: #2f292b;
  --p5-3: #1aa9bc;
  --p5-4: #457c39;
  --p5-5: #e4e6dd;

  // color palette 6
  --p6-1: #0f0a01;
  --p6-2: #00aabb;
  --p6-3: #333333;
  --p6-4: #558a86;
  --p6-5: #08327d;

  // color palette 7
  --p7-1: #558a86;
  --p7-2: #f0c24f;
  --p7-3: #fe9f97;
  --p7-4: #0095a3;
  --p7-5: #635045;
}

// color palettes

.palette-cmyk {
  .grid-item {
    &:nth-child(1) {
      background-color: var(--cmyk-cyan);
      &::before {
        color: mix(black, cyan, 50%);
        content: "Cyan";
      }
    }
    &:nth-child(2) {
      background-color: var(--cmyk-magenta);
      &::before {
        color: mix(black, magenta, 40%);
        content: "Magenta";
      }
    }
    &:nth-child(3) {
      background-color: var(--cmyk-yellow);
      &::before {
        color: mix(black, yellow, 30%);
        content: "Yellow";
      }
    }
    &:nth-child(4) {
      background-color: var(--cmyk-black);
      &::before {
        color: #777;
        content: "Black";
      }
    }
    &:nth-child(5) {
      background-color: var(--cmyk-white);
      &::before {
        color: #444;
        content: "White";
      }
    }
  }
}

.palette-1 {
  .grid-item {
    &:nth-child(1) {
      background-color: var(--p1-1);
      &::before {
        color: #999;
        content: "#08327d";
      }
    }
    &:nth-child(2) {
      background-color: var(--p1-2);
      &::before {
        color: mix(black, #00aabb, 45%);
        content: "#00aabb";
      }
    }
    &:nth-child(3) {
      background-color: var(--p1-3);
      &::before {
        color: mix(black, #ec6b2d, 40%);
        content: "#ec6b2d";
      }
    }
    &:nth-child(4) {
      background-color: var(--p1-4);
      &::before {
        color: #777;
        content: "#333333";
      }
    }
    &:nth-child(5) {
      background-color: var(--p1-5);
      &::before {
        color: mix(white, #0f0a01, 45%);
        content: "#0f0a01";
      }
    }
  }
}

.palette-2 {
  .grid-item {
    &:nth-child(1) {
      background-color: var(--p2-1);
      &::before {
        color: mix(white, #0b3536, 60%);
        content: "#0b3536";
      }
    }
    &:nth-child(2) {
      background-color: var(--p2-2);
      &::before {
        color: mix(black, #0098d8, 30%);
        content: "#0098d8";
      }
    }
    &:nth-child(3) {
      background-color: var(--p2-3);
      &::before {
        color: mix(black, #f54123, 35%);
        content: "#f54123";
      }
    }
    &:nth-child(4) {
      background-color: var(--p2-4);
      &::before {
        color: mix(black, #e5e7de, 40%);
        content: "#e5e7de";
      }
    }
    &:nth-child(5) {
      background-color: var(--p2-5);
      &::before {
        color: mix(black, #e7b300, 35%);
        content: "#e7b300";
      }
    }
  }
}

.palette-3 {
  .grid-item {
    &:nth-child(1) {
      background-color: var(--p3-1);
      &::before {
        color: mix(black, #c7943e, 40%);
        content: "#c7943e";
      }
    }
    &:nth-child(2) {
      background-color: var(--p3-2);
      &::before {
        color: mix(white, #558a86, 40%);
        content: "#558a86";
      }
    }
    &:nth-child(3) {
      background-color: var(--p3-3);
      &::before {
        color: mix(white, #2677bb, 50%);
        content: "#2677bb";
      }
    }
    &:nth-child(4) {
      background-color: var(--p3-4);
      &::before {
        color: mix(black, #f67944, 40%);
        content: "#f67944";
      }
    }
    &:nth-child(5) {
      background-color: var(--p3-5);
      &::before {
        color: #777;
        content: "#fbfbfb";
      }
    }
  }
}

.palette-4 {
  .grid-item {
    &:nth-child(1) {
      background-color: var(--p4-1);
      &::before {
        color: mix(black, #c2b4a6, 40%);
        content: "#c2b4a6";
      }
    }
    &:nth-child(2) {
      background-color: var(--p4-2);
      &::before {
        color: mix(black, #e7b300, 40%);
        content: "#e7b300";
      }
    }
    &:nth-child(3) {
      background-color: var(--p4-3);
      &::before {
        color: mix(white, #6e7f29, 50%);
        content: "#6e7f29";
      }
    }
    &:nth-child(4) {
      background-color: var(--p4-4);
      &::before {
        color: mix(black, #f45844, 40%);
        content: "#f45844";
      }
    }
    &:nth-child(5) {
      background-color: var(--p4-5);
      &::before {
        color: mix(white, #635045, 50%);
        content: "#635045";
      }
    }
  }
}

.palette-5 {
  .grid-item {
    &:nth-child(1) {
      background-color: var(--p5-1);
      &::before {
        color: mix(white, #a63e14, 70%);
        content: "#a63e14";
      }
    }
    &:nth-child(2) {
      background-color: var(--p5-2);
      &::before {
        color: mix(white, #2f292b, 70%);
        content: "#2f292b";
      }
    }
    &:nth-child(3) {
      background-color: var(--p5-3);
      &::before {
        color: mix(black, #1aa9bc, 40%);
        content: "#1aa9bc";
      }
    }
    &:nth-child(4) {
      background-color: var(--p5-4);
      &::before {
        color: mix(white, #457c39, 45%);
        content: "#457c39";
      }
    }
    &:nth-child(5) {
      background-color: var(--p5-5);
      &::before {
        color: mix(black, #e4e6dd, 45%);
        content: "#e4e6dd";
      }
    }
  }
}

.palette-6 {
  .grid-item {
    &:nth-child(1) {
      background-color: var(--p6-1);
      &::before {
        color: mix(white, #0f0a01, 70%);
        content: "#0f0a01";
      }
    }
    &:nth-child(2) {
      background-color: var(--p6-2);
      &::before {
        color: mix(black, #00aabb, 40%);
        content: "#2f292b";
      }
    }
    &:nth-child(3) {
      background-color: var(--p6-3);
      &::before {
        color: #999999;
        content: "#333333";
      }
    }
    &:nth-child(4) {
      background-color: var(--p6-4);
      &::before {
        color: mix(black, #558a86, 40%);
        content: "#558a86";
      }
    }
    &:nth-child(5) {
      background-color: var(--p6-5);
      &::before {
        color: mix(white, #08327d, 45%);
        content: "#08327d";
      }
    }
  }
}

.palette-7 {
  .grid-item {
    &:nth-child(1) {
      background-color: var(--p7-1);
      &::before {
        color: mix(white, #558a86, 50%);
        content: "#558a86";
      }
    }
    &:nth-child(2) {
      background-color: var(--p7-2);
      &::before {
        color: mix(black, #f0c24f, 30%);
        content: "#f0c24f";
      }
    }
    &:nth-child(3) {
      background-color: var(--p7-3);
      &::before {
        color: mix(black, #fe9f97, 40%);
        content: "#fe9f97";
      }
    }
    &:nth-child(4) {
      background-color: var(--p7-4);
      &::before {
        color: mix(white, #0095a3, 45%);
        content: "#0095a3";
      }
    }
    &:nth-child(5) {
      background-color: var(--p7-5);
      &::before {
        color: mix(white, #635045, 35%);
        content: "#635045";
      }
    }
  }
}

// layout

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

img {
  line-height: 0;
  max-width: 100%;
}

.grid {
  display: grid;
  grid-gap: 0;
  flex-grow: 1;
  flex-shrink: 0;
  height: 100vh;
  width: 100%;
  > * {
    @include fade-in;
    counter-increment: grid-items;
    display: flex;
    align-items: center;
    letter-spacing: .1em;
    justify-content: center;
    text-align: center;
    transition: .4s ease;
    &::before {
      opacity: 0;
      content: counter(grid-items);
      font-family: $Montserrat;
      text-transform: uppercase;
      font-size: 1.75em;
      transition: opacity .4s;
    }
  }
  @media (min-width: 20em) {
    grid-template-columns: 1fr 1fr;
  }
  @media (min-width: 40em) {
    //grid-template-columns: 2fr 1fr 1fr 2fr;
    //grid-template-rows: 2fr 1fr 1fr 2fr;
  }
  @media (min-width: 60em) {
    grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
    grid-template-rows: 2fr 1fr 1fr 1fr 2fr;
  }
}

.info-visible {
  .grid-item::before {
    opacity: 1;
  }
}

.grid-item {
  background-color: rgba(black, .15);
  transition: .4s ease;
  
  @media (min-width: 20em) {
    grid-column: span 1;
    
    &:nth-child(3) {
      grid-column: span 2;
    }
  }
  // @media (min-width: 40em) {
  //   &:nth-child(1) {
  //     grid-column: 1 / 3;
  //     grid-row: 1 / 3;
  //   }
  //   &:nth-child(2) {
  //     grid-column: 3 / 5;
  //     grid-row: 1 / 3;
  //   }
  //   &:nth-child(3) {
  //     //grid-column: 1 / 3;
  //     grid-row: 3 / 5;
  //   }
  //   &:nth-child(4) {
  //     grid-column: 3 / 5;
  //     grid-row: 3 / 5;
  //   }
  //   &:nth-child(5) {
  //     //clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  //     //clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
  //     grid-column: 2 / 4;
  //     grid-row: 2 / 4;
  //     //padding: 4rem;
  //   }
  @media (min-width: 60em) {
    &:nth-child(1) {
      grid-column: 1 / 4;
      grid-row: 1 / 4;
    }
    &:nth-child(2) {
      grid-column: 4 / 6;
      grid-row: 1 / 2;
    }
    &:nth-child(3) {
      grid-column: 1 / 4;
      grid-row: 4 / 6;
    }
    &:nth-child(4) {
      grid-column: 4 / 6;
      grid-row: 2 / 4;
    }
    &:nth-child(5) {
      grid-column: 4 / 6;
      grid-row: 4 / 6;
    }
  }
}

.control-button {
  background-color: rgba(black, .25);
  color: white;
  display: flex;
  flex-direction: column;
  opacity: .75;
  margin-top: -1em;
  padding: .75em .5em;
  position: fixed;
  top: 50%;
  left: 0;
  transition: .4s ease;
  z-index: 1;
  &:hover, &.active, &:active {
    background-color: rgba(black, .4);
    opacity: 1;
  }
  label, select {
    color: currentColor;
  }
  label {
    margin: 0;
  }
}

@mixin button-icon {
  position: absolute;
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
  margin-left: -1rem;
  top: 50%;
  left: 50%;
}

.info-toggle {
  right: 0;
  left: auto;
  .icon {
    flex-grow: 1;
    height: 1.875rem;
    width: 1.875rem;
    margin-right: 0;
    top: 0;
  }
}

.dropdown {  
  display: block;
  margin-top: 0;
  position: relative;
  padding: 0;
  select {
    background: none;
    border: none;
    color: transparent;
    padding: 0;
    width: 2rem;
    margin: 0;
    outline: none;
    /* Remove select styling */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    /* Magic font size number to prevent iOS text zoom */
    font-size: 1.25em;
    /* General select styles: change as needed */
    font-weight: bold;
    line-height: 1.3;
    position: relative;
    &:focus {
      box-shadow: none;
      border: none;
      //color: initial;
      outline: none;
    }
  }
  &::after {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/icon-palette-white.svg") 0 0 no-repeat;
    @include button-icon;
    /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
    content: "";
    position: absolute;
    z-index: 2;
    /* These hacks make the select behind the arrow clickable in some browsers */
    pointer-events: none;
  }
  &:hover {
    border: none;
  }
}

/* This hides native dropdown button arrow in IE 10/11+ so it will have the custom appearance, IE 9 and earlier get a native select */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .dropdown select::-ms-expand {
    display: none;
  }
  /* Removes the odd blue bg color behind the text in IE 10/11 and sets the text to match the focus style text */
  select:focus::-ms-value {
    background: transparent;
    color: #222;
  }
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
View Compiled
$( "select" ).change(function() {
  if($("select option:selected").val() == "palette-cmyk"){
    $(".grid").removeClass("palette-1 palette-2 palette-3 palette-4 palette-5 palette-6 palette-7").addClass("palette-cmyk");        
  }
  if($("select option:selected").val() == "palette-1"){
    $(".grid").removeClass("palette-2 palette-3 palette-4 palette-5 palette-6 palette-7 palette-cmyk").addClass("palette-1");        
  }
  if($("select option:selected").val() == "palette-2"){
    $(".grid").removeClass("palette-1 palette-3 palette-4 palette-5 palette-6 palette-7 palette-cmyk").addClass("palette-2");        
  }
  if($("select option:selected").val() == "palette-3"){
    $(".grid").removeClass("palette-1 palette-2 palette-4 palette-5 palette-6 palette-7 palette-cmyk").addClass("palette-3");        
  }
  if($("select option:selected").val() == "palette-4"){
    $(".grid").removeClass("palette-1 palette-2 palette-3 palette-5 palette-6 palette-7 palette-cmyk").addClass("palette-4");        
  }
  if($("select option:selected").val() == "palette-5"){
    $(".grid").removeClass("palette-1 palette-2 palette-3 palette-4 palette-6 palette-7 palette-cmyk").addClass("palette-5");        
  }
  if($("select option:selected").val() == "palette-6"){
    $(".grid").removeClass("palette-1 palette-2 palette-3 palette-4 palette-5 palette-7 palette-cmyk").addClass("palette-6");        
  }
  if($("select option:selected").val() == "palette-7"){
    $(".grid").removeClass("palette-1 palette-2 palette-3 palette-4 palette-5 palette-6 palette-cmyk").addClass("palette-7");        
  }
});

$(".info-toggle").on("click" , function() {
  $(".grid").toggleClass("info-visible");
  $(this).toggleClass("active");
});

$(".grid-item").on("click" , function() {
  $(".grid").toggleClass("info-visible");
  $(this).toggleClass("active");
});

External CSS

  1. https://codepen.io/ericthayer/pen/1b88027d0220b52e07214fff4610e7ba.scss
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/_normalize.5.0.scss
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/_font-variables.scss
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/functional-modifiers.css
  5. https://codepen.io/ericthayer/pen/JKEBE.css

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/jquery-slim.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js