@daytona/living-design-system

Living Design System (LDS)

LDS is a component management service, defining a way to write and manage components, modules and view, which makes it easy to maintain, view and develop.

One folder per component

A component is a folder with all its defining assets within, like CSS, JavaScript, Template, default JSON data, configurations, screenshots, examples and description. for instance:

 - MyComponent
  -- index.css
  -- index.js
  -- index.hbs
  -- default.json
  -- readme.md

By handling all component specifications in one place we can easier make sure CSS, JS and HTML are functioning together. And works as an instance independent on where in the DOM you put it.

Further more, by relying on a standardized way of strucuring your components, we can then parse the file structure and get a complete library of all components and their dependencies.

Living design system, is a way to handle this standardized way of structuring components, by indexing them, bundlinge their assets, serving them as templating partials, and creating an API allowing us to render them in isolation or modifying them.

LDS consists of several vital parts to make your job easier.

• LDS Build: compiles and bundles all assets into a public folder.
• LDS Parser: Parses the file structure, returning a LDS object with all your components
• LDS Engine: Reads all template files and serves them as partials
• LDS Server: Starts up a HTTP server serving your prototype, styleguide, api
• LDS CLI: Defines a "lds" namespace in terminal, enabling commands for, starting server, building and watching assets and generating new projects or components.
• LDS API: defines a set of endpoints to present, render or update your components.
• LDS Styleguide: Creates a complete styleguide of your components, to get a better overview.
• LDS Create: Generator for creating new components, modules, helpers, views or projects.
• LDS Test: Tests the status of your components and makes sure you don't commit any bugs.
• LDS Editor: Opens the views in edit-mode, with the possibility to to update page data according to defined schemas.

You can configure the file structure or templating engine, using the lds.config.js in your root project directory. Read more about configuration in out documentation

Installation

Install lds by installing it as global dependency

$ npm install -g @daytona/living-design-system
$ lds init myProject

or just

$ lds init

to set it up in current folder

This sets up a folder structure (which you can change) and a config file (lds.config.js) with all the paths and configurations of your project, and a simple example component.

To start up the server run command

$ lds start

This builds your assets, creating a watch task for file changes in your project and starts up a KOA.js server with routes for all your views and for a separate styleguide presenting your components and views, as well as a API, with commands to manage you design system.

Documentation

• Installation
• Getting started
• Commandline
• Configuration
• Views & layouts
• Styleguide
• API