const gridMarkup =
  '<span class="dev__grid-toggle-button"></span><div class="dev__tools dev__hide"><div class="dev__grid"><div class="grid grid-cols-6 l:grid-cols-12 dev__grid-wrapper wrapper"><div class="dev__grid-col"></div><div class="dev__grid-col"></div><div class="dev__grid-col"></div><div class="dev__grid-col"></div><div class="dev__grid-col"></div><div class="dev__grid-col"></div><div class="dev__grid-col"></div><div class="dev__grid-col"></div><div class="dev__grid-col"></div><div class="dev__grid-col"></div><div class="dev__grid-col"></div><div class="dev__grid-col"></div></div></div></div>';

var body = document.body;
var gridContent = document.createElement('div');
//fill grid content with grid html
gridContent.innerHTML = gridMarkup;
//add grid content to body
body.appendChild(gridContent);

//handle buttons clicks
var gridBtn = document.querySelector('.dev__grid-toggle-button');
var devTools = document.querySelector('.dev__tools');

//toggle grid + applicable text
gridBtn.onclick = function () {
  devTools.classList.toggle('dev__hide');
  gridBtn.classList.toggle('hide-grid');
};
