UNIVERSAL RESPONSIVE DASHBOARD

Goals

Create a browser GUI template system with the following features:

• moveable,
• sizeable,
• touchable,
• connected,
• lockable sides
• template width breakpoints
• grid scale 0-100

Demo

Demo

Universal Responsive Dashboard Demo

Install/Run

npm i
npm start

Template Width Breakpoints

• (sm, md, lg) are set in src/A.css

Template Unit Configuration

• Template file in src/D.ts
• The Core Absolute Unit Component has the following properties:

export type T = {
  i: number; // index
  t: string; // component type
  x: number; // position x
  y: number; // position y
  w: number; // width
  h: number; // height
  z: number; // z index
  l: T_LOCK; // side locks obj. ex) { t: true, r: false, ... }
  // connected unit index to sides. ex) { t: [1], r: [2, 3], ...}
  c: { t: number[]; r: number[]; b: number[]; l: number[] };
  bp: ("sm" | "md" | "lg")[]; // width breakpoint template class name
  minW: number; // minimum width
  maxW: number; // maximum height
  minH: number; // minimum height
  maxH: number; // maximum height

  // automatically set...
  d?: { x: number; y: number }; // distance moved
  aR?: number; // anchor right
  aB?: number; // anchor bottom
  tX?: number; // translate x
  tY?: number; // translate y
  oX?: number; // original x
  oY?: number; // original y
  oW?: number; // original width
  oH?: number; // origianl height
  tempL?: T_LOCK; // temporary locks
  deleted?: boolean; // deleted
};