app.js

$(document).ready(function(){

   squareH();
   verticalCenter();

})

verticalCenter = function( selector ) {

   if (typeof(selector)==='undefined')
   selector = '.v-center';

   $( selector ).each(function(){
      var parent = $(this);
      parent.css({opacity:0});
      var totalH = 0;
      parent.children().each(function(){
         totalH += parseInt($(this).outerHeight(true));
      });
      parent.css({paddingTop: (( parent.outerHeight(true) - totalH ) / 2 ) });
      parent.stop().animate({ opacity: 1 });
   });

}
squareH = function( selector ) {

   if (typeof(selector)==='undefined')

   selector = '.squareH';

   $( selector ).each(function(){
      $(this).outerHeight( $(this).outerWidth() );
   });

}

colores.scss

$color-background: #0B665F;

$color-text: #FFE0D1;


$color-primary-0: #136F62;	// Main Primary color */
$color-primary-1: #86C4BC;
$color-primary-2: #358D81;
$color-primary-3: #004B41;
$color-primary-4: #001B17;

$color-secondary-1-0: #147852;	// Main Secondary color (1) */
$color-secondary-1-1: #47A17F;
$color-secondary-1-2: #298C67;
$color-secondary-1-3: #05613E;
$color-secondary-1-4: #00452B;

$color-secondary-2-0: #155D6D;	// Main Secondary color (2) */
$color-secondary-2-1: #448594;
$color-secondary-2-2: #287081;
$color-secondary-2-3: #074959;
$color-secondary-2-4: #01333F;


$color-tertiary-1-0: #8AA14E;	// Main tertiary color (1) */
$color-tertiary-1-1: #DAE9B1;
$color-tertiary-1-2: #ACC177;
$color-tertiary-1-3: #6C8430;
$color-tertiary-1-4: #4E6416;

$color-tertiary-2-0: #523E74;	// Main tertiary color (2) */
$color-tertiary-2-1: #9284A8;
$color-tertiary-2-2: #6D5B8B;
$color-tertiary-2-3: #3D285F;
$color-tertiary-2-4: #281548;

$color-complement-0: #B15B1E;	// Main Complement color */
$color-complement-1: #FFD0AF;
$color-complement-2: #E08E54;
$color-complement-3: #773100;
$color-complement-4: #2B1200;



$color-neutral-0: #A6B5A6;	// Main neutral color (2) */
$color-neutral-1: #FFFFFF;
$color-neutral-2: #E3E6E3;
$color-neutral-3: #6C896C;
$color-neutral-4: #345934;


$color-accent-0: #AED13C;	// Main accent color */
$color-accent-1: #F1FCCF;
$color-accent-2: #D9F57E;
$color-accent-3: #7D9E11;
$color-accent-4: #3F5200;



$lista-colores: (

   background $color-background,

   text $color-text,

   primary-0 $color-primary-0,
   primary-1 $color-primary-1,
   primary-2 $color-primary-2,
   primary-3 $color-primary-3,
   primary-4 $color-primary-4,

   secondary-1-0 $color-secondary-1-0,
   secondary-1-1 $color-secondary-1-1,
   secondary-1-2 $color-secondary-1-2,
   secondary-1-3 $color-secondary-1-3,
   secondary-1-4 $color-secondary-1-4,

   secondary-2-0 $color-secondary-2-0,
   secondary-2-1 $color-secondary-2-1,
   secondary-2-2 $color-secondary-2-2,
   secondary-2-3 $color-secondary-2-3,
   secondary-2-4 $color-secondary-2-4,

   tertiary-1-0 $color-tertiary-1-0,
   tertiary-1-1 $color-tertiary-1-1,
   tertiary-1-2 $color-tertiary-1-2,
   tertiary-1-3 $color-tertiary-1-3,
   tertiary-1-4 $color-tertiary-1-4,

   tertiary-2-0 $color-tertiary-2-0,
   tertiary-2-1 $color-tertiary-2-1,
   tertiary-2-2 $color-tertiary-2-2,
   tertiary-2-3 $color-tertiary-2-3,
   tertiary-2-4 $color-tertiary-2-4,

   complement-0 $color-complement-0,
   complement-1 $color-complement-1,
   complement-2 $color-complement-2,
   complement-3 $color-complement-3,
   complement-4 $color-complement-4,

   neutral-0 $color-neutral-0,
   neutral-1 $color-neutral-1,
   neutral-2 $color-neutral-2,
   neutral-3 $color-neutral-3,
   neutral-4 $color-neutral-4,

   accent-0 $color-accent-0,
   accent-1 $color-accent-1,
   accent-2 $color-accent-2,
   accent-3 $color-accent-3,
   accent-4 $color-accent-4,

);


@each $value in $lista-colores {

	   .color-#{nth($value, 1)} {
			& {
				color: nth($value, 2) !important;
			}
	   }
	   .color-#{nth($value, 1)}-bg {
			& {
				background-color: nth($value, 2) !important;
			}
	   }
	   .color-#{nth($value, 1)}-bd {
			& {
				border: 1px solid white;
				border-color: nth($value, 2) !important;
			}
	   }

	   .color-#{nth($value, 1)}-hover:hover {
			& {
				color: nth($value, 2) !important;
			}
	   }
	   .color-#{nth($value, 1)}-hover-bg:hover {
			& {
				background-color: nth($value, 2) !important;
			}
	   }
	   .color-#{nth($value, 1)}-hover-bd:hover {
			& {
				border: 1px solid white;
				border-color: nth($value, 2) !important;
			}
	   }


}

estilos.css

.w-100 {
   width: 100%;
}

.w-20 {
   width: 20%;
}

.h-15-v {
   height: 15vh;
}

.h-a {
   height: auto;
}


.p-0-1 {
   padding: 4px;
}


.text-center {
   text-align: center;
}


.columns {
   float: left;
   display: inline-block;
   width: 100%;
}

.w-20 {
   width: 20%;
}


h2 {
   width: 100%;
   clear: both !important;
   margin-bottom: 32px;
}






.font-1 { font-family: 'Montserrat', sans-serif; }

.font-2 { font-family: 'Roboto Slab', serif; }

.font-3 { font-family: 'Amatic SC', cursive; }

.font-4 { font-family: 'Bitter', serif; }

lista-colores.php

$colorList = [

"color-background",
"color-background",
"color-background",
"color-background",
"color-background",
"color-text",
"color-text",
"color-text",
"color-text",
"color-text",
"color-primary-0",
"color-primary-1",
"color-primary-2",
"color-primary-3",
"color-primary-4",
"color-secondary-1-0",
"color-secondary-1-1",
"color-secondary-1-2",
"color-secondary-1-3",
"color-secondary-1-4",
"color-secondary-2-0",
"color-secondary-2-1",
"color-secondary-2-2",
"color-secondary-2-3",
"color-secondary-2-4",
"color-tertiary-1-0",
"color-tertiary-1-1",
"color-tertiary-1-2",
"color-tertiary-1-3",
"color-tertiary-1-4",
"color-tertiary-2-0",
"color-tertiary-2-1",
"color-tertiary-2-2",
"color-tertiary-2-3",
"color-tertiary-2-4",
"color-complement-0",
"color-complement-1",
"color-complement-2",
"color-complement-3",
"color-complement-4",
"color-neutral-0",
"color-neutral-1",
"color-neutral-2",
"color-neutral-3",
"color-neutral-4",
"color-accent-0",
"color-accent-1",
"color-accent-2",
"color-accent-3",
"color-accent-4",

];

?>

<link rel="stylesheet" href="css/micrositio/micrositio-1.css" media="screen" title="no title">

<?php

foreach($colorList as $color) {

   ?>
   <h2 class="<?php echo $color; ?>"><?php echo $color; ?></h2>
   <?php
   for ($i=0; $i < ( floor(count($colorList)/5)); $i++) {

?>

<div class="columns w-20 h-a p-0-1">
   <h6 class="<?php echo $colorList[($i*5)]; ?>"><?php echo $colorList[($i*5)]; ?></h6>
   <div class="w-100 h-15-v squareH v-center text-center <?php echo $color . "-bg"; ?>">

<?php

      for ($j=0; $j < 5; $j++) {
   ?>
<span class="columns text-center <?php echo $colorList[($i*5)+$j]; ?>">NAHUAL</span>
<?php
      }

?>
   </div>
</div>
<?php
   }

}