https://github.com/meftunca/box-ui

https://github.com/meftunca/box-ui

Last synced: 7 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/meftunca/box-ui
• Owner: meftunca
• Created: 2023-08-24T13:30:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-24T13:31:43.000Z (over 1 year ago)
• Last Synced: 2024-11-09T13:05:11.023Z (2 months ago)
• Size: 2.93 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# boxy-ui

## Purpose

This project aims to simplify the design and usage of basic UI elements while providing flexibility for customization. UI elements include boxes to contain various content types (Box), text display (Text), and embedded content (Embed).

## Main Components

1. **Box Component:**

   - **Description:** The foundational component, Box, serves as a container for UI elements.

   - **Properties:**

     - `role` (e.g., button, video, img, etc.)

     - `style` (CSS-like styling)

     - `content` (other components or content)

   - **Example Usage:**

     ```jsx

     Click Me

     ```

2. **Text Component:**

   - **Description:** Used to display textual content.

   - **Properties:**

     - `text` (the text to be displayed)

     - `style` (styling)

   - **Example Usage:**

     ```jsx

     Hello, World!

     ```

3. **Embed Component:**

   - **Description:** Used to display embedded content (e.g., video, map, iframe).

   - **Properties:**

     - `source` (the source of the embedded content)

     - `style` (styling)

   - **Example Usage:**

     ```jsx

     

     ```

## Benefits

- **Simplicity and Customization:** Users can customize the basic components (Box, Text, Embed) to create UI elements that suit their needs.

- **Hierarchical Structure:** Users can nest UI elements to create more complex interfaces.

- **Reusability:** Creating and managing these components enhances code reusability.

- **Ease of Maintenance:** Treating UI elements individually simplifies maintenance and development processes.

## Sample Scenario

1. **Creating a Simple Button:**

   Users can create a button using the `` component with the `role="button"` attribute.

   ```jsx

   Click Me