@uplynk/lynk-design v1.0.0

LYNK

A library of web components for building web applications with the Uplynk user interface style guide.

Lynk's primary goals are:

• Framework Agnostic with BEM fallback (where it makes sense)
• Fully customizable and extendable
• Built with accessibility and localization in mind

Documentation: lynk.design

What are we using to build Lynk?

Components are built with LitElement, a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by esbuild.

Forking the Repo

Clone the repo locally and install dependencies.

git clone https://gitlab.com/limelight-networks/uplynk/ucc-team/lynk-design.git
cd lynk-design
pnpm install

Developing

Once you've cloned the repo, run the following command.

pnpm start

This will spin up the Lynk dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browser's don't provide a way to re-register custom elements, but most changes to the source will reload the browser automatically.

The documentation is powered by Docsify, which uses raw markdown files to generate pages. As such, no static files are built for the docs.

Building

To generate a production build, run the following command.

pnpm run build

Creating New Components

To scaffold a new component, run the following command, replacing lynk-tag-name with the desired tag name.

pnpm run create lynk-tag-name

This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.