Get started

Installation

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:

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

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

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 <CenterCard> component renders a card with a max-width of 400px, centers it and uses a Stack to get consistent spacing:

// Edit the live code below
function CenterCard () {
  return (
    // A card with clamped 400px and centered
    <Clamp clamp='400px'>
      <Stack gap={0.75} className='card'>
        <h3>Card title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </Stack>
    </Clamp>
  )
}

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!

Support

If you get stuck, reach out to @christiankaindl on Twitter, or open a discussion on GitHub. In case of bugs open an issue on GitHub.