https://github.com/christiankaindl/LYTS

Layout primitives for React
https://github.com/christiankaindl/LYTS

css javascript layout react

Last synced: about 2 months ago
JSON representation

Layout primitives for React

• Host: GitHub
• URL: https://github.com/christiankaindl/LYTS
• Owner: christiankaindl
• License: mit
• Created: 2022-01-01T18:51:53.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-22T13:16:32.000Z (over 1 year ago)
• Last Synced: 2024-07-19T18:24:04.448Z (2 months ago)
• Topics: css, javascript, layout, react
• Language: TypeScript
• Homepage: https://lyts.christiankaindl.com
• Size: 264 KB
• Stars: 164
• Watchers: 3
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  
LYTS

  

  
Layout primitives for React.



# LYTS

Layout primitives to build any kind of layout with useful props like `bleed`, `asChild` and `xAlign`/`yAlign`.

- **Composable** – Combine to create complex layouts

- **Small bundle** – 4kB when using *all* exports

- **Unstyled** – Use the styling solution of your choice

- **Layout props** – Simple, productive API

## Docs

**https://lyts.christiankaindl.com**

⚛️ [Components](https://lyts.christiankaindl.com/components) · 📚 [Guides](https://lyts.christiankaindl.com/guides) · 📖 [Examples](https://lyts.christiankaindl.com/examples)

## Installation

```sh

npm install @christiankaindl/lyts

```

After intallation, import the necessary CSS styles into your application. For example in a Next.js app, import them in `_app.js`:

```jsx

/* _app.js */

import '@christiankaindl/lyts/style.css' // Import the library styles here

function MyApp({ Component, pageProps }) {

  return 

}

export default MyApp

```

And that's all there is to set up! Now import one of the base components—Stack, Row, Clamp, Columns, Grid—and start building great layouts.

## Usage

Layout components can be composed until you achieve your desired layout. For example, The following \ component renders a card with a max-width of 400px, centers it and uses a Stack to get consistent spacing:

![image]()

```jsx

const CenterCard: FunctionComponent = function () {

  return (

    // A card with clamped 400px and centered

    

      

        
Card title

        
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

      

    

  )

}

```


Check out the Examples page for a comprehensive collection of layouts and how to build them with LYTS.

A real-world example using LYTS is this documentation site, which makes extensive use of all components. [Check out the code here](https://github.com/christiankaindl/LYTS-website/)!

## Support & help

If you get stuck, [reach out to @christiankaindl](https://twitter.com/christiankaindl) on Twitter. In case of bugs, [open an issue on GitHub](https://github.com/christiankaindl/LYTS/issues).

## Local Development

```sh

npm install

npm run dev

```