Get started with planout CDN

BSD-3-Clause licensed

Planout is a lightweight library for creating and managing responsive, multi-column layouts.

Tags:
  • experiments
  • a/b testing
  • multivariate testing
  • experiment design
  • ab
  • split testing

Stable version

Copied!

How to start using planout CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with planout CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/planout/5.3.0/planout.min.js"></script>
  <style>
    #container { width: 300px; height: 300px; border: 1px solid black; }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    const container = document.getElementById('container');
    const plan = new Planout.Plan(container);

    plan
      .add(new Planout.Box('box1', { width: 100, height: 100, top: 20, left: 20, backgroundColor: 'red' }))
      .add(new Planout.Box('box2', { width: 100, height: 100, top: 150, left: 20, backgroundColor: 'blue' }))
      .add(new Planout.Box('box3', { width: 100, height: 100, top: 20, left: 150, backgroundColor: 'green' }))
      .layout();
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions