README.md

Cubism

Cubism is an HTML Canvas based UI framework. It provides more consistency across different broswers.

You can try the online demo here.

Example

Basic Layout

Code:

/**
 * Demo of a simple layout
 */
let app = Cubism.createFromId("mainCanvas");

app.init(
  new PointerHandlerParentElement(
    "PointerHandlerParentElement",
    new Background()
        .setColor(Colors.blue700),
    new VerticalLayout(
      "Outer Vertical Layout",
      new RectElement()
          .setWidth(100)
          .setHeight(100),
      new CircleElement()
          .setWidth(100)
          .setHeight(100),
      new HorizontalLayout(
        "Inner Horizontal Layout",
        new RectElement()
            .setWidth(100)
            .setHeight(100),
        new RectElement()
            .setWidth(100)
            .setHeight(100),
        new CircleElement()
            .setWidth(100)
            .setHeight(100)
      )
    )
        .setPosFromXY(50, 50)
  )
);