by shunok

shunok / popo

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

126 Stars 21 Forks Last release: about 2 years ago (v1.4.0) 43 Commits 4 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


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.


  • 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+



More Examples...


  1. node.js
// npm
npm install popojs  --save

// yarn yarn add popojs

  1. browser


  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');

  1. browser
// body

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.