CSS Grid Layout Designer

css-grid-layout-designer.markdown

CSS Grid Layout Designer

A Pen by Michael Garten on CodePen.

License.

index.html

<div class="grid-container">
  <div class="grid-item" id="header"></div>
  <div class="grid-item" id="left"></div>
  <div class="grid-item" id="main"></div>
  <div class="grid-item" id="right"></div>
  <div class="grid-item" id="footer"></div>
  
  <div id="top"></div>
  <div id="config-panel">
    <p>
      <Generate>Config</Generate>
    </p>
    <form>
      <select class="dropdown" id="gridArea" placeholder="Select grid area">
        <option value="header">Header</option>
        <option value="left">Left</option>
        <option value="main">Main</option>
        <option value="right">Right</option>
        <option value="footer">Footer</option>
      </select>
      <select class="dropdown" id="templateChoice" placeholder="Template variant">
        <option value="default">Default</option>
      </select>
      <button class="button" id="renderBtn" type="button">Render Data</button>
    </form>
  </div>
  <div id="btm"></div>

</div>

script.typescript

let layout = [
    { 
      'id': 'header',
			'template': `<p>this is the header template!</p>`,
			'data': {},
			'style': {}
		},
    { 
      'id': 'left',
			'template': `<p>this is the left template!</p>`,
			'data': {},
			'style': {}
		},
    { 
      'id': 'main',
			'template': `<p>this is the main template!</p>`,
			'data': {},
			'style': {}
		},
    { 
      'id': 'right',
			'template': `<p>this is the right template!</p>`,
			'data': {},
			'style': {}
		},
    { 
      'id': 'footer',
			'template': `<p>this is the footer template!</p>`,
			'data': {},
			'style': {}
		}
];
let components = [
  {
    name: 'Default Template',
    id: 'default-component-placeholder',
    validAreas: ['header', 'left', 'main', 'right', 'footer'],
    html: `<p> :( No component selected for this area</p>`
  },
  {
    name: 'Basic Nav Menu',
    id: 'default-nav-menu',
    validAreas: ['header', 'left', 'right'],
    html: `<nav class="navbar"><ul><li>Home</li><li>About</li></ul></nav>`
  },
  {
    name: 'Simple Blog Post',
    id: 'simple-blog-post',
    validAreas: ['main'],
    html: `<article class="blog-post"><h1>How To Blog Real Good</h1><section>Lorem Ipsum..</section></article>`
  }
];
let store = {
	title : "CSS Grid Prototype Starter",
	description: "This is a basic concept proof that got totes ooc",
	logoUrl: "https://www.abouthack.com/wp-content/uploads/2014/07/css3_logo.png",
	routes: ["home", "about", "contact"],
	features: ["resume", "portfolio", "snippets", "experiments", "resources"],
	reviews: ["much wow", "very render", "such dom"],
};
let areas = document.querySelectorAll(".grid-item");
const areaSelect = document.querySelector('#gridArea');
const templateSelect = document.querySelector('#templateChoice');
const renderBtn = document.querySelector('#renderBtn');

function getConfig(area){
  return layout.find(gridItem => gridItem.id === area);
}
function render(gridItem){
  let container = document.getElementById(gridItem.id);
	container.innerHTML = gridItem.template;
  return container;
}
function renderComp(){
  let tgtArea = document.getElementById(areaSelect.value);
  console.log(templateSelect.value)
  let component = components.find(comp => comp.id === templateSelect.value);
  tgtArea.innerHTML = component.html;
  return component;
}
function handleAreaChange(){
  renderOptions(filterSelOptions())
}
function renderOptions(options) {
  let optList = ''
  options.map(option => optList += `<option value="${option.id}">${option.name}</option>`)
  templateSelect.innerHTML = optList;
  return templateSelect.value;
}
function filterSelOptions(){
  return components.filter(comp => comp.validAreas.includes(areaSelect.value));
}

areas.forEach(area => render(getConfig(area.id)));
areaSelect.addEventListener('input', handleAreaChange);
templateSelect.addEventListener('input', renderComp);
renderBtn.addEventListener('click', renderComp);

style.scss

$primary: #41b883;
$light-bg: #f1f1f1;
$dark-bg: #313131;

html,
body {
	background-color: $light-bg;
	height: 100%;
	width: 100%;
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
}

.grid-container {
	display: grid;
	width: 100%;
	height: 100%;
	grid-template-areas:
    "top     top    top    top"
    "config  header header header"
		"config  left   main   right"
		"config  left   footer right"
    "config  btm    btm    btm";
	grid-template-columns: minmax(150px, 1fr) 1fr 4fr 1fr;
	grid-template-rows: 20px 50px 1fr 50px 20px;
	.grid-item {
		border: 1px solid $dark-bg;
		border-radius: 6px;
		text-align: center;
    &:hover{
      color: $primary;
      border-color: $primary;
    }
	}
}

#header {
	grid-area: header;
	padding: 0 2%;
	ul {
		display: flex;
		justify-content: flex-end;
		li {
			list-style-type: none;
			border-left: 1px solid #ccc;
			color: #43a047;
			padding: 0 2%;
			max-height: 50px;
		}
	}
}
#top{
  grid-area: top;
}
#btm {
  grid-area: btm;
}
#top, #btm {
  background-color: $dark-bg;
  color: $light-bg;
}

#config-panel {
	grid-area: config;
	text-align: center;
	background-color: $dark-bg;
	color: $light-bg;
	input, select {
		width: 87%;
    border-radius: 3px;
		margin-bottom: 7px;
		padding: 5px;
	}
  button {
    width: 87%;
    padding: 5px;
    background-color: #00c09d;
    border-radius: 3px;
    border: 1px solid #35495e;
    color: #35495e;
  }
}

ul.menu {
	display: flex;
	flex-flow: column nowrap;
	padding: 0;
	li {
		list-style-type: none;
		padding: 5px;
	}
	li:hover {
		background: #4caf50;
	}
}

#left {
	grid-area: left;
}

#menu {
	grid-area: menu;
}

#main {
	grid-area: main;
}

#right {
	grid-area: right;
}

#footer {
	grid-area: footer;
}

li {
	list-style-type: none;
}