@lydio/molecules

Canonical URL:
https://alexstevovich.com/a/lydio-molecules-nodejs

Software URL:
https://midnightcitylights.com/software/lydio-molecules-nodejs

Useful general patterns for Lydio Lydio.

@lydio/molecules provides small compositional HTML structures — reusable, semantic, and built directly on top of Lydio’s atomic HTML system.
These include paired layouts, key–value components, and masked elements.

Installation

npm install @lydio/molecules

Example

import { KeyValue, ColumnPair, Mask } from '@lydio/molecules';

// Key–value layout
const kv = new KeyValue();
kv.key.withText('Username:');
kv.value.withText('example_user');

// Two-column pair
const pair = new ColumnPair();
pair.left.withText('Left column');
pair.right.withText('Right column');

// Masked element
const mask = new Mask();
mask.withSrc('/assets/mask-shape.svg');

// Render
console.log(kv.toHtml());
console.log(pair.toHtml());
console.log(mask.toHtml());

/*output
<div class="key_value">
  <div class="key">Username:</div>
  <div class="value">example_user</div>
</div>

<div class="column_pair">
  <div class="left">Left column</div>
  <div class="right">Right column</div>
</div>

<div class="mask" style="mask-image:url('/assets/mask-shape.svg');-webkit-mask-image:url('/assets/mask-shape.svg')"></div>
*/

Features

• Small reusable building blocks built from HTML atoms.
• Pass class overrides through the constructor options object.
• All setters and configuration methods return this.

License

Licensed under the Apache License 2.0.

Trademark

“Lydio” and related marks are trademarks of Alex Stevovich.

See TRADEMARK.md for details.