---
name: General Layout System
route: /
---

import * as demos from '../demos'; 

<demos.Star/>

# General Layout System
`gls` 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 `gls` along with its peer dependencies: `react` (for html) and `typestyle` (for css):

```sh
npm i gls react typestyle
```

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

* [Spacing principle][principle-spacing]
* [Sizing principle][principle-sizing]
* [Scrolling principle][principle-scrolling]

# Components
All our components are just browser native react tags (default `div`) with atomic CSS generated by typestyle. 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 🕶.

[principle-spacing]:./principle-spacing/
[principle-sizing]:./principle-sizing/
[principle-scrolling]:./principle-scrolling/