Badgerly Wall of Badges

by Steven Hunt

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<div id="output1">
Loading...
</div>

CSS

#output1 > div {
  float: left;
  min-width: 20px;
}
/*****************************
 * Badgerly
 * Written by Steven Hunt
 * MIT License
 *****************************/
/*****************************
 * Badgerly
 * Core styles for all shapes and colors
 * MIT License
 *****************************/
/* represents a badge, which has a ribbon and a shape. */
.badge {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative; }
  .badge .border {
    border-style: solid; }
    .badge .border.gold {
      border-color: goldenrod; }
    .badge .border.silver {
      border-color: #cccccc; }
    .badge .border.bronze {
      border-color: sienna; }

/* SHAPES */
.badge {
  /* common shape properties */
  /* a diamond is a square rotated. */
  /* rotate the contents of the diamond back so that it doesn't look weird. */
  /* a badge can either have a simple ribbon, or a lanyard with a left and right ribbon. */ }
  .badge .circle, .badge .square, .badge .diamond {
    display: inline-block;
    margin: 0;
    padding: 0;
    z-index: 1000; }
  .badge .diamond {
    transform: rotate(45deg); }
  .badge .diamond > * {
    transform: rotate(-45deg); }
  .badge .lanyard {
    position: relative;
    overflow: hidden;
    /* common properties of the left and right ribbon in a lanyard. */ }
    .badge .lanyard .ribbon.left, .badge .lanyard .ribbon.right {
      top: 0;
      position: absolute;
      z-index: 0; }
  .badge .ribbon {
    margin: 0;
    padding: 0; }

/* COLORS */
.badge .gold {
  background: radial-gradient(gold, palegoldenrod);
  color: goldenrod; }

.badge .silver {
  background: radial-gradient(#fafafa, #dddddd);
  color: #cccccc; }

.badge .bronze {
  background: radial-gradient(darkorange, chocolate);
  color: sienna; }

/* RIBBON PATTERNS */
/* COUNTRIES */
.badge {
  /* 13 red and white strips: United States */
  /* red white and blue: Netherlands */
  /* red white and green: Mexico, Hungary */
  /* blue white and red: France */
 ...

JavaScript

var colors = ['gold', 'silver', 'bronze'];
var ribbons = ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'black', 'red-white-stripes', 'red-white-blue', 'blue-white-red', 'red-white-green', 'green-white-red', 'red-white-red', 'red-blue-white', 'gold-red-black', 'orange-white-green', 'rainbow'];
var sizes = ['tiny', 'small', 'medium', 'large', 'huge'];
var shapes = ['circle', 'square', 'diamond'];

var $output = $('#output1');

$output.empty();

function generateRibbon (ribbon, isLanyard) {
	if (!isLanyard) {
  	return '<div class="ribbon '+ribbon+'"></div>';
  }
	return '<div class="lanyard"><div class="ribbon left '+ribbon+'" /><div class="ribbon right '+ribbon+'" /></div>';
}

function generateBadges (isLanyard, isBorder) {

for (var l = 0; l < shapes.length; l++)
for (var k = 0; k < sizes.length; k++)
for (var i = 0; i < colors.length; i++)
for (var j = 0; j < ribbons.length; j++) {
	$output.append('<div class="badge ' + sizes[k] + '">' + generateRibbon(ribbons[j], isLanyard) + '<div class="'+shapes[l]+' ' +colors[i]+(isBorder ? ' border' : '')+'"><i class="fa fa-star"></i></div></div>');
}
}

generateBadges(false, false);
generateBadges(true, false);
generateBadges(false, true);
generateBadges(true, true);