Lese

Easy to use and lightweight layout framework for @emotion/styled.

Lese was inspired after using Laco, an extremely lightweight package for state management, with React. Lese's goal is to provide a powerful set of tools to quickly build layouts in emotion's styled components while being under 2KBs in size when gzipped. The modern flex and grid specifications are excellent. Thus the framework provides very little abstraction on top of these specs and instead provides convenient shorthand properties to make responsive layouts a breeze. The project is in early alpha so bugs and breaking API changes are to be expected between minor releases.

To-Do

Base Components
Switch to @emotion/styled
First Draft of Documentation
API Review
Add type defintions
Convenience functions in helpers to reduce code size
Properties for modifying position of flex and grid children

Features

🔥 Extremely lightweight - <2KBs gzipped
📦 Out of the box support for Grid and Flex
🚀 Blazing fast development speed

How It Works

All components (aside from image) inherit from the Base component which includes convienence props for responsive sizing, text modification, and sizing. The framework's goal is not to provide a layer of abstraction over the existing css properties (beyond xAlign and yAlign) but rather to provide easy to use short hand properties.

The more I use CSS Grid, the more convinced I am that there is no benefit to be had by adding a layer of abstraction over it. CSS Grid is the layout framework baked right into the browser - Jen Simmons

The Future

lese is planned to be the underlying framework of a future project called morre which will be a comprehensive UI Framework that aims to avoid the pitfalls popular frameworks such as Bootstrap by making custom styling and components using base styles and components easy and maintainable (no more !important). Before that project begins, the API for lese must be stable.

API

Base

Contains all of the base props for Flex and Grid components. Possible prop values are as follows:

`relative: boolean`

Short-hand property for applying position: relative

`padding: string`

Short-hand property for applying padding

`margin: string`

Short-hand property for applying margin

Row/Column

A flex container with flex-direction: row or flex-direction: column set by default based on the selected element. Includes 3 main abstractions for making flex easier to interact with.

`xAlign: boolean | string`

Based on the component (Row or Column), xAlign will automatically switch between justify-content (Row) and align-items (Column). Defaults to "center" when set to true. Otherwise, it passes the string to the appropriate css property.

`yAlign: boolean | string`

Based on the component (Row or Column), xAlign will automatically switch between align-items (Row) and justify-content (Column). Defaults to "center" when set to true. Otherwise, it passes the string to the appropriate css property.

`separation: string | string[]`

Based on the component (Row or Column), separation will use margin-top (Column) or margin-left (Row) on its immediate children on all but the first child using * + *. The value of the string will be passed to the appropriate css property. When the value is a single CSS length, such as 8px, all elements are separated based on this value. When multiple values are provided in the form of a string array or space delimited string, each index will correspond to the separation of one element. Additionally, a rest operator (...) can be used anywhere in the string for defaulting a separation value.

() => (
  <Row separation="8px 12px">
    <div>a</div>
    {/* Separated by 8px */}
    <div>b</div>
    {/* Separated by 12px */}
    <div>c</div>
    {/* No separation */}
    <div>d</div>
  </Row>
)

() => (
  <Row separation="8px ...10px 12px">
    <div>a</div>
    {/* Separated by 8px */}
    <div>b</div>
    {/* Separated by 10px */}
    <div>c</div>
    {/* Separated by 10px */}
    <div>d</div>
    {/* Separated by 12px */}
    <div>e</div>
  </Row>
)