Using Powergrid in javascript

We have more ways of using 🔢 Powergrid besides the demo page. Powegrid styles are generated with our major module powegrid.js. This enables to use it in nodejs in your project as part of a build process or in js playgrounds like jsfiddle or CodePen.

Checkout an example.

You can follow this steps.

Include powergrid script and optionally add decorative styles

<script src="https://zs.github.io/powergrid/powergrid.umd.js"></script>
<style>
/* General styles */
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  min-height: 100%;
  background: rgba(50, 50, 50, 0.5);
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

.fluid {
  width: 100%;
  height: 100%;
  overflow:auto; /* this helps to stretch container */
}

/* Decorate cells for better identification */
#grid {
  background: transparent;
}

#grid>div {
  background: white;
  padding: 10px;
  border: 1px solid #c0c0c0;
  box-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  color: #000;
  text-shadow: 1px 1px #c0c0c0;
  margin: 5px;
  cursor: pointer;
}

#grid>div:nth-child(n+1) {
  background: rgba(0, 255, 0, 0.5);
  border: 1px solid green;
}

#grid>div:nth-child(2n) {
  background: rgba(0, 255, 255, 0.5);
  border: 1px solid lightblue;
}

#grid>div:nth-child(3n) {
  background: rgba(0, 0, 255, 0.5);
  border: 1px solid blue;
}

#grid>div:nth-child(4n) {
  background: rgba(255, 0, 255, 0.5);
  border: 1px solid purple;
}

#grid>div:nth-child(5n) {
  background: rgba(255, 0, 0, 0.5);
  border: 1px solid red;
}

#grid>div:nth-child(6n) {
  background: rgba(255, 127, 0, 0.5);
  border: 1px solid orange;
}

#grid>div:nth-child(7n) {
  background: rgba(255, 255, 0, 0.5);
  border: 1px solid yellow;
}

#grid>div:nth-child(8n) {
  background: rgba(0, 255, 0, 0.5);
  border: 1px solid green;
}
#grid>div:nth-child(n).selected-grid{
  border: 2px dashed black;
}
</style>

Set a configuration

var config = {
	name: 'Power Grid',
	version: '0.1.0',
	url: 'https://github.com/ZS/powergrid/',
	cols: ['minmax(max-content,1fr)', '1fr', '100px', '100vw'],
	rows: ['minmax(max-content,1fr)', 'minmax(max-content,1fr)', 'minmax(max-content,1fr)'],
	align: 'center',
	justify: 'end',
	cells: [
		{
			text: '1231231231'
		},
		{
		},
		{
		},
		{
		},
		{
			col: 1,
			colSpan: 4
		},
		{
			align: 'center',
			justify: 'end'
		},
		{
			row: 2,
			rowSpan: 2,
			order: 1
		},
		{
		},
		{
		},
		{
		},
		{
		},
		{
		}
	],
	prefix: 'pg-',
};

Generate CSS styles dynamically

var css = powergrid.toCss(config);
var style = document.createElement('style');
style.setAttribute("rel", "stylesheet");
style.innerHTML = css;
document.body.append(style);

Add a grid html

<div class="pg-grid fluid" id="grid">
    <div class="pg-col-span-2">Big-image</div>
    <div class="pg-col-3">Small-image</div>
    <div class="pg-col-1 pg-row-2">Small-image</div>
    <div class="pg-col-2 pg-row-2 pg-col-span-2">Big-image</div>
    <div class="pg-col-1 pg-row-3">Small-image</div>
    <div class="pg-col-2 pg-row-3">Small-image</div>
    <div class="pg-col-3 pg-row-3">Small-image</div>
</div>

You should get something like this. Enjoy ✌️