Starter Template

by Jesse Johnson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<pre id="app">

</pre>

SCSS

$back-color: #20262E;
$text-color: #7a8994;
$head-color: #373e43;
html {
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  background: $back-color;
  padding: 20px;
  color: -apple-system, BlinkMacSystemFont, segoe ui, roboto, ubuntu, fira sans, droid sans, helvetica neue, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 10px 0;
  font-family: -apple-system, BlinkMacSystemFont, segoe ui, roboto, ubuntu, fira sans, droid sans, helvetica neue, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-weight: 300;
  color: $head-color;
}

a {
  text-shadow: none !important;
  color: #0064bc;
  transition: color .1s linear 0s, background-color .1s linear 0s, opacity .2s linear 0s !important
}

a:focus,
a:hover,
a:active {
  color: #007be8
}

a,
a:focus,
a:hover,
a:active {
  outline: 0 !important;
  text-decoration: none
}

br {
  line-height: normal;
  clear: both
}

code {
  color: #be2444;
  background-color: #f2f4f5
}

code:hover {
  background-color: #fbd5dd
}

p {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 22px;
  margin: 0 0 10px;
  font-style: normal;
  white-space: normal
}

small {
  line-height: 18px;
  font-size: 85%
}

ul,
ol {
  margin-bottom: 10px
}

ul>li,
ol>li {
  padding-left: 3px;
  line-height: 24px
}

address {
  margin-bottom: 0
}

address a {
  color: #7a8994
}

blockquote {
  padding: 0 0 0 18px;
  border-left: 0
}

blockquote:before {
  content: '';
  font-family: FontAwesome;
  content: "\f10d";
  margin-right: 13px;
  float: left
}

blockquote p {
  font-size: 16px
}

blockquote small {
  line-height: 29px;
  color: #8b91a0;
 ...

TypeScript

const data = [
	{
    "cid": "dcc9a6fa6c264eb4b11a2f96eb06b83a",
    "name": "Sweetwater",
    "logo": "https://www.omacro.com/OmacroPictures/145x145/b4605ad1-35e3-4643-8895-1c280b676d52.jpg",
    "locations": [{
      "lid": "9e095696611e440b86c98b4567c06c34",
      "link": "https://services.omacro.com/BuyNow/Transaction?t=UAj7VtnrKkqiHyzqzGwI6A",
      "attributes": {}
    }]
  },
  {
    "cid": "6cede5b74e9d4c67b39a10a135b96be5",
    "name": "American Musical Supply",
    "logo": "https://www.omacro.com/OmacroPictures/145x145/cbca376c-09d8-45cd-bb23-930b35181112.jpg",
    "locations": [{
      "lid": "9e095696611e440b86c98b4567c06c34",
      "link": "https://services.omacro.com/BuyNow/Transaction?t=zT8IOJtq2Eus_hFnK0-2HQ",
      "attributes": {}
    }]
  },
  {
    "cid": "708a9031050848bbb3cc826936ad78bb",
    "name": "Sam Ash Music",
    "logo": "https://www.omacro.com/OmacroPictures/145x145/aeb81429-de73-4cb2-9675-9c0303bc4d43.jpg",
    "locations": [{
      "lid": "9e095696611e440b86c98b4567c06c34",
      "link": "https://services.omacro.com/BuyNow/Transaction?t=_hWLOurqjkCi7Pf-hWm14g",
      "attributes": {}
    }]
  },
  {
    "cid": "7ff9478b29054ebba5d5d75fbe318749",
    "name": "zZounds",
    "logo": "https://www.omacro.com/OmacroPictures/145x145/e7cbb29c-ef98-4fce-b35c-4cea4992b06b.jpg",
    "locations": [{
      "lid": "9e095696611e440b86c98b4567c06c34",
      "link": "https://services.omacro.com/BuyNow/Transaction?t=gGM8fKShU0ae3M4_3mvd6w",
      "attributes": {}
    }]
  },
  {
    "cid": "830c1c24feef45fbb2c4864aa838dea3",
    "name": "Guitar Center",
    "logo": "https://www.omacro.com/OmacroPictures/145x145/403985e8-2c96-4483-a9b3-3fd53d3a16ba.jpg",
    "locations": [{
      "lid": "9e095696611e440b86c98b4567c06c34",
      "link": "https://services.omacro.com/BuyNow/Transaction?t=9cM_cL_a00avb-LubLyjCQ",
      "attributes": {}
    }]
  },
  {
    "cid": "78705d20951f438abb49d653a2674e00",
    "name": "Full Compass Systems",
    "logo":...