bitandblack-rows/example/assets/example.js

A small and simple CSS gutter to create rows and cells using the flexbox model.

import "./example.scss";
import { Position, Viewport } from "../../index";

/**
 * The following script tracks the viewport and its changes.
 * The callback will be fired whenever the viewport changes and returns the name of the current viewport.
 */

const viewport = new Viewport();

viewport
    .onResize((viewportName) => {
        console.log(`Viewport is currently defined as "${viewportName}"`);
    })
;


/**
 * The following script handles the cell positions and adds information about them.
 * This allows handling and targeting cells at the top, the bottom and the side of a grid.
 */

const position = new Position();
position
    .setAddCssClassesForOutsideCells(true)
    .setAddDataAttributesAboutCellPositions(true)
    .add(
        document.querySelector(".row")
    )
;