https://github.com/mikeleg/flexsaber

Flexsaber is a declarative Web Components library for building flexible layouts using Flexbox. Designed to work in plain HTML, frontend frameworks, or no-code environments. Precise, modular, and powerful like a lightsaber.
https://github.com/mikeleg/flexsaber

flexbox frontend html ui-library web-components

Last synced: about 2 months ago
JSON representation

Flexsaber is a declarative Web Components library for building flexible layouts using Flexbox. Designed to work in plain HTML, frontend frameworks, or no-code environments. Precise, modular, and powerful like a lightsaber.

• Host: GitHub
• URL: https://github.com/mikeleg/flexsaber
• Owner: mikeleg
• License: mit
• Created: 2025-05-11T12:02:23.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-12T09:35:55.000Z (about 1 year ago)
• Last Synced: 2025-06-03T11:13:20.414Z (about 1 year ago)
• Topics: flexbox, frontend, html, ui-library, web-components
• Language: TypeScript
• Homepage:
• Size: 1.28 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Flexsaber

[![Build](https://github.com/mikeleg/flexsaber/actions/workflows/build.yml/badge.svg?branch=main)](https://github.com/mikeleg/flexsaber/actions?query=workflow%3A%22Build%22)

![Flexsaber Logo](./logo.png)

**Flexsaber** is a declarative Web Components library for building flexible layouts using Flexbox. Designed to work in plain HTML, frontend frameworks, or no-code environments. Precise, modular, and powerful like a lightsaber.

---

## 🚀 Installation

```bash

npm install flexsaber

```

---

## 🧪 Usage Example

```html

  

    Item A

    Item B

  

```

---

## 🧩 Components

- ``: Full-space container with optional scroll and padding

- ``: Horizontal flex container

- ``: Vertical flex container

- ``: Child element with optional `size`, `grow`, `shrink`, and `align`

---

## ⚙️ Attributes

All sizing values are in pixels (omit the `px` suffix).

| Attribute   | Description                            |

|-------------|----------------------------------------|

| `gap`       | Uniform spacing between children       |

| `row-gap`   | Vertical spacing override              |

| `col-gap`   | Horizontal spacing override            |

| `wrap`      | Enables wrapping                       |

| `align`     | Align items vertically (e.g. center)   |

| `justify`   | Align items horizontally (e.g. start)  |

| `grow`      | Flex-grow value                        |

| `shrink`    | Flex-shrink value                      |

| `size`      | Flex-basis (initial size)              |

---

## 🛡 License

MIT © 2025 Michele Gatti