Get Started

layland is a simple (but powerful) general purpose layout system for React 🌹.

Having been a part of a fair share of component libraries, this library isolates the layout system from past efforts. This library allows you to have a reliable layout system that can work with any component library ❤️.

Installation

• Install layland along with its peer dependencies: react (for html), styled-components (for css):

npm i layland react styled-components

CSS principles

There are a few key CSS principles developed with layland. These ideas are designed to help build maintainable layouts in the world of components:

• Space principle
• Scale principle
• Scroll principle

Layout Components

All our components are just browser native react tags (div) with atomic CSS generated by styled-components. The layout system is powered by pure (and minimal) CSS resulting in high performance while still providing excellent developer ergonomics.

You can now jump to individual docs and demos using the sidebar. View them in order (recommended 👍🏻) or jump to whatever catches your eye 🕶.

• Column
• Row
• Responsive
• Grid
• Spacers
• Containers