GithubHelp home page GithubHelp logo

LYTS's Introduction

LYTS

Abstract illustrations depicting the available layout components

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 · 📚 Guides · 📖 Examples

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:

image

const CenterCard: FunctionComponent = function () {
  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 & help

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

LYTS's People

Contributors

christiankaindl avatar

Stargazers

 avatar nick avatar Angela avatar awkweb  avatar  avatar Dmytro Ulianov avatar  avatar Mattèo Gauthier avatar ptruser avatar sigfried avatar Alejandro Beltrán avatar George avatar  avatar  avatar Patrick G avatar sam bacha avatar Tom Milewski avatar Will G avatar Ricardo Valero de la Rosa avatar settyan avatar Jack McCloy avatar Kirill Korolyov avatar Fatih avatar Sam Walsh avatar Michael Peyper avatar Vitalii Astakhov avatar Hisco avatar BlasterPistol avatar michael dong avatar Jon Wright avatar Zhuo Zhang avatar Rob Easthope avatar Beka avatar Yasin ATEŞ avatar Sebastian Sebald avatar Mikko Tirronen avatar João Palmeiro avatar Kevin Wilfried avatar Yassine El Bouziady avatar Timo Clasen avatar Vasilii Kovalev avatar Ricardo Amaral avatar Matt Hamlin avatar Rogin Farrer avatar Niall Barber avatar Justin Koo avatar Chase William avatar Justin Bennett avatar Richard Kwan avatar Yuriy Burychka avatar Andrejs Agejevs avatar Graham Murdoch avatar  avatar  avatar Jonathan Gomand avatar  avatar Lari Hoppula avatar Maxim Cheremisin avatar Leo Weigand avatar Ilya Radchenko avatar Luiz Nickel avatar Mike Tobia avatar Asher Cohen avatar Jon Milner avatar Guilherme Mota avatar Ankit Chouhan avatar σ Δ avatar Eunsoo Lee avatar Rafał Lemieszewski avatar  avatar Naresh Kumar avatar Diel Duarte avatar Adam Sanderson avatar shawntax avatar Alec Larson avatar Ahmed Noor E Alam avatar Pierre Bertet avatar Timon Röhrbacher avatar . avatar Rodrigo Antinarelli avatar Soumyajit Pathak avatar Michel Nemnom avatar Etienne-Joseph Charles avatar Dan Antal avatar  avatar Sadegh Barati avatar Alexey Istomin avatar Rob Phoenix avatar Fred Saddi avatar Abhishek Reddy Gaddam avatar  avatar Michael Alaev avatar Siddhesh Dabholkar avatar Artemiy Schukin avatar Balaj Marius avatar Bogdan Soare avatar Amane Mahmoud avatar  avatar Ezekiel Aquino avatar Ishimoto Koji  avatar

Watchers

David Wells avatar Christian Kaindl avatar Timon Röhrbacher avatar

Forkers

doeixd

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.