SquareMe - Universal Resizable Grid

SquareMe is a universal grid layout built with Stencil. It can be embedded in projects using any framework or even plain HTML. Under the hood SquareMe leverages the SplitMe component.

See a Live Demo.

Installing

Option 1 (HTML)

Add the SquareMe script tag to your index.html:

<script src="https://unpkg.com/square-me/dist/square-me.js"></script>

Option 2 (React / Angular / Vue)

Add SquareMe to your project:

npm install --save square-me

Import SquareMe in your index.js:

import { defineCustomElements as defineSquareMe } from 'square-me/dist/loader';

defineSquareMe(window);

Basic Usage

Use the square-me tag anywhere you like. Set the number of rows and columns in the layout through the m and n attributes respectively. Set where the inner elements should be placed through the slot attribute:

<square-me m="2" n="2">
  <div slot="0 0" class="fill red"></div>
  <div slot="0 1" class="fill green"></div>
  <div slot="1 0" class="fill green"></div>
  <div slot="1 1" class="fill red"></div>
</square-me>

<style>
  .fill {
    height: 100%;
    width: 100%;
  }
</style>

Advanced Usage

SquareMe uses SplitMe under the hood. Any property/attribute passed to SquareMe will be forwarded to the underlying SplitMe components.

Simply append a -h or -v to the attribute name you would use in SplitMe and the property will be applied to the horizontal or vertical splitters respectively

<square-me m="2" n="2" sizes-h="0.75, 0.25" sized-v="0.25, 0.75">
  <div slot="0 0" class="fill red"></div>
  <div slot="0 1" class="fill green"></div>
  <div slot="1 0" class="fill green"></div>
  <div slot="1 1" class="fill red"></div>
</square-me>

Properties

Events