Skip to content

Latest commit

 

History

History
164 lines (116 loc) · 5.18 KB

ARCHITECTURE.md

File metadata and controls

164 lines (116 loc) · 5.18 KB
Raw

Opensource Design Tool for the world.

For whom eager to create, design, develop and share with the world.

Grida (Previously known as Bridged 2022 - opensource collaborative realtime ui editor)

an opensource wasm application explicitly designed for service application design/development

  • developer first
  • plugin sdk and core engine api is mapped 1:1
  • right on to production code

Alpha - This project is under development and Unstable

This project, Grida is under development with preview technologies. We are looking forward that Grida will change the industry design/development standard by this piece of OSS Project. For updates, please subscribe our news letter on grida.co

Stable Ecosystem Projects

  • Grida Assistant - A plugin fro figma that allows to import designs to Grida.
  • Grida Code - Design to Code Engine. A design ✌️ code standard.

Engine & Foundation

  • studio is built uppon skia graphics library
  • the core component used is followed by reflect design system
  • studio's surface is built on react

Docs

Read the Grida usage docs here

Workspace

artboard workspace

Scriptable

scripting built in with js/ts sdk and add-on plugin

Backend

Live Collaborative Design Server

Structure - Packages & Modules

GRAPHICS ENGINE

  • nothing - nothing but drawing. everything drawable graphics engine.
    • github
    • website
    • @nothing.app/react - React SDK - Fully built, all-in-one graphics tools for drawing, editing and sharing

UI LIBRARY

  • reflect-ui

DESIGN DATA STRUCTURE & HANDLING

  • reflect-core-ts - reflect core definitions on typescript (nodejs)
  • design-sdk - 🎨 A mid wrapper for building consistant figma & sketch & studio plugin, with single api reference
  • design-file-converter - ➡️🎨➡️🎨 Convert your design from sketch figma xd Grida - to - sketch figma xd Grida.
  • .grida - .grida configuration specs for Grida App and Code extensions

BACKEND - LIVE COLLABORATION / DATA MANAGEMENT

  • design-server - Structure & SDK for building realtime collaboration backend service
  • BASE - Grida App Services - BASE

WYSIWYG

  • boring - 😶 A very boring text editor engine like notion. yet free and open to use

DESIGN TO CODE

  • design-to-code - Design to code engine. A design ✌️ code standard.

The design

design of Grida editor on figma

Bridging the gap between design and development

Here are some concepts that do not exist on current design tools, but only at implementation.

  • Theme support
  • Responsive layout
  • Linting
  • Grid
  • List
  • Slots (Not swapping components)
  • States
  • Git
  • Variables
  • Data layer
  • Logic layer
  • Design to code
  • Built in base design system (Reflect - a universal design system built for design systems)

Key features / modes

  • presentation mode
  • muggle mode
  • developer mode
  • graphics mode
  • designer mode
  • product mode
  • prototype mode
  • documentation mode
  • diagram mode (EDR)
  • live collaborative editing
  • version control in-the-box
  • responsive mode (responsive components)
  • visual engine in-the-box
  • context engine in-the-box

Contributing

We'de love to have you change the industry together. Read below documentations before submitting a PR.

Building

git clone --recurse-submodules https://github.com/gridaco/grida.git
cd grida

pnpm install

update pulling - git submodule update --init --recursive

References