Demo json2html with BEM

Demo json2html with bem-components (only CSS)

by ilyar

HTML

<script src="https://rawgit.com/moappi/json2html/master/json2html.js"></script>
<link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css">

CSS

.icon_social_twitter {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABPElEQVQ4y2NgGDTg3fdf/LjE+47fLajbf6Nx3vmHCTAxDPX+K89shClABvqzDl9gmHLmP8O0C/8ZJp7877Dg6H75SfsezLvwOAlFof22x6dAChI2nJ8PM/3c8w8GDEse/2dY8w6BF97/z7/mxefzr744oRgw7/bnOrCCOTf+C3TvegcyKH/PzSkomqF4/ZMfFf///+dBMcBhzbWjcEUrX4ENYph55T82A4BABCOwzr/9Eca/4d1nbBqQscGej7exxgLISXWXv8wnZMi8O18acUblviefw/V3vL2Nz3agRRI4DQBK8p97+zMq4OjnQ9g0v//51x5nIgKFukDHtncMnXv/M8y/jaI5/vSXbSDNQAuYcdnMDMQa59//Tqi7+m0hDM+7/6Pz3pc/4SA5nJrRAxKI5ZGwBBCzMwxqAADz8kerOr7ibwAAAABJRU5ErkJggg==);
}

JavaScript

var data = [
  {
    'text': 'BEM — BEM Easy Makeup',
    'url': 'https://twitter.com/intent/tweet?url=http://bit.ly/demo_bem_json2html&text=BEM%20—%20BEM%20Easy%20Makeup.%20Demo%20json2html%20with%20bem-components&hashtags=b_&original_referer=https://jsfiddle.net/ilyar/0kcpv5mf/',
  },
];

var template = {
  tag: 'a',
  class: 'button button_theme_islands button_size_xl',
  href: '${url}',
  target: '_blank',
  children: [
    {
      tag: 'span',
      class: 'icon icon_social_twitter',
    },
    {
      tag: 'span',
      class: 'button__text',
      html: '${text}',
    },
  ]
};
document.body.innerHTML = json2html.transform( data, template );