yangzhiw / popo

PoPo is the grid layout tool, the best choice for runtime layout.

PoPo

PoPo is the grid layout tool, the best choice for runtime layout.

中文介绍

PoPo is a two dimensional grid layout library, The rows and columns of the grid system are custom defined at runtime, no CSS dependence, supports any size screen, It is especially suitable for large screen and super large screen.PoPo adopts the double layout pattern of grid and panel, it encapsulates content independent layout code, You can quickly build any complex pages without writing any HTML or CSS code.

Features

• Custom grid system, no CSS dependence, no third party library dependency, no need to write HTML, CSS code
• Grid system uniform and free layout && Universal panel layout && User defined layout patterns, Let layout be arbitrary.
• Scaling, positioning, auxiliary information, grid auxiliary line, sub screen (coordinate) auxiliary line, panel auxiliary line debugging function, so that the big screen application development debugging no longer bother
• Rapid construction of visualization applications
• Adaptive multi screen
• Rich configuration, debugging options and API
• Compatible IE9+

Docs

Examples

• 24 rows * 24 cols
• 24 rows * 48 cols
• Free layout
• Uniform layout
• Grids In Circle
• Scatter Diagram
• City, Click the sun into night mode and click the moon into day mode
• Progress Data Visualization For Big Screen And Mobile
• Data Visualization For Multi Screen

More Examples...

Install

1. node.js

// npm
npm install popojs  --save

// yarn
yarn add popojs

2. browser

<srcript src="./js/popo.min.js"></script>

Use

1. node.js

var P = require('popojs');

// or

import * as P from 'popojs';

// Initialize PoPo Instance
var popoInstance = P.init({
    rows: 12,
    cols: 24
});

...

// Render to container
popoInstance.addTo('container');

2. browser

// body
...
<div id="container"></div>
...
<script>
P.init({
    container: 'container',
    rows: 12,
    cols: 24
});
</script>