https://github.com/tetracalibers/polym-generic-layout

https://github.com/tetracalibers/polym-generic-layout

Last synced: 11 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/tetracalibers/polym-generic-layout
• Owner: tetracalibers
• Created: 2022-09-21T23:43:45.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-26T07:54:57.000Z (over 2 years ago)
• Last Synced: 2024-12-08T07:17:20.841Z (about 1 month ago)
• Language: TypeScript
• Size: 24 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @polym/generic-layout

**Collection of React generic layout components inspired by [Every-Layout](https://every-layout.dev/)**

## Demo & Document

[Click here to visit the **playground site** where you can operate and play props.](https://tetracalibers.github.io/polym-generic-layout/?path=/story/layout-introduction--page)

## Concept

### as props

The container that realizes the layout is rendered in div by default, but this can be changed by `as` props.

The `as` can be

- HTML tag name

- React component

- styled component

Depending on the `as`, the `ref` and props that can be specified for the component will change.

If `as` is rendered as an HTML element, then all of the HTML attributes of that element can be specified `as` props.

If `as` is a component, the functions and styles that the component has are merged.

---

## AspectFrame

**Responsive images with preserved aspect ratio**

```ts

  

```

## Grid

**Responsive grid layout without explicit media queries**

```ts

  

  

  

  

  

```

## HorizontalCenter

**Horizontal Centering Layout**

```ts

  

  

  

  

  

```

## VerticalCenter

**Layout that vertically centers any of several vertically aligned elements**

```ts

  

  

  

  

  

```

## HorizontalStack

**Horizontal alignment layout that wraps nicely on small screens**

```ts

  

  

  

  

  

```

## VerticalStack

**Layout with elements evenly spaced vertically**

```ts

  

  

  

  

    

    

    

  

  

```

## SwitchStack

**Layout switches from horizontal to vertical depending on screen width and number of elements**

```ts

  

  

  

  

  

```

## TwoColumn

**Responsive two-column layout with side content and main content**

```ts

  

  

```

## OverlapLayer

**Layout with layers on top of layers**

Usage: Modal Dialog, Fixed Header, etc.

```ts

  

    

  

  

```

## SliderAlign

**Scrollable horizontal alignment layout**

Usage: Carousel, etc.

```ts

  

  

  

  

  

```